6.3 KiB
SVG의 <text> 요소와 관련 기능
SVG에서 <text> 요소는 텍스트를 그래픽으로 렌더링하는 데 사용됩니다. 단순히 텍스트를 표시하는 것을 넘어, 스타일링, 위치 조정, 경로 따라 배치 등 다양한 기능을 제공합니다. 아래에서는 <text> 요소의 주요 속성, <tspan>과 <textPath>의 역할, <symbol>과 <use>를 활용한 아이콘 제작 방법, 그리고 <foreignObject>에 대해 설명합니다.
<text> 요소와 주요 속성
<text>는 텍스트를 SVG 캔버스에 추가하며, 위치와 스타일을 속성으로 정의합니다.
기본 예시
<svg width="200" height="100">
<text x="10" y="50" fill="black">Hello, SVG!</text>
</svg>
주요 속성 정리
| 속성 | 설명 | 예시 값 |
|---|---|---|
x |
텍스트의 x축 시작 위치. | 10 |
y |
텍스트의 y축 시작 위치(기본적으로 baseline 기준). | 50 |
dx, dy |
텍스트 또는 문자별로 상대적 위치 조정. | 5, -10 |
fill |
텍스트 채우기 색상. | red, #ff0000 |
stroke |
텍스트 외곽선 색상. | black |
font-size |
글꼴 크기. | 16, 1em |
font-family |
글꼴 종류. | Arial, sans-serif |
text-anchor |
텍스트 정렬(시작점 기준). | start, middle, end |
dominant-baseline |
텍스트의 수직 정렬 기준. | auto, middle, hanging |
transform |
회전, 이동 등 변환 적용. | rotate(45 50 50) |
예시: 스타일링된 텍스트
<svg width="200" height="100">
<text x="100" y="50" font-size="20" fill="blue" text-anchor="middle" transform="rotate(-45 100 50)">
Rotated Text
</text>
</svg>
- 가운데 정렬된 파란색 텍스트를 45도 회전.
<tspan>: 텍스트 일부 스타일링
<tspan>은 <text> 내부에서 특정 텍스트 부분에 스타일을 적용하거나 위치를 조정할 때 사용됩니다.
예시
<svg width="200" height="100">
<text x="10" y="50" font-size="16">
Hello <tspan fill="red" font-weight="bold">SVG</tspan> World!
</text>
</svg>
- "SVG"만 빨간색으로 굵게 표시.
주요 특징
dx,dy로 위치 미세 조정 가능.- 여러 줄 텍스트를 만들 때 유용:
<svg width="200" height="100">
<text x="10" y="20" font-size="16">
<tspan x="10" dy="0">First Line</tspan>
<tspan x="10" dy="20">Second Line</tspan>
</text>
</svg>
<textPath>: 경로를 따른 텍스트
<textPath>은 텍스트를 <path>로 정의된 경로를 따라 배치합니다. href 속성으로 경로를 참조합니다.
예시
<svg width="200" height="200">
<defs>
<path id="curve" d="M10 80 Q100 20 190 80" />
</defs>
<text font-size="16">
<textPath href="#curve">Curved Text</textPath>
</text>
</svg>
- 텍스트가 곡선을 따라 배치됨.
주요 속성
startOffset: 경로 시작점에서의 오프셋(예:50%로 가운데 정렬).text-anchor: 텍스트 정렬.
<symbol>과 <use>를 활용한 아이콘 제작
<symbol>은 재사용 가능한 그래픽 템플릿을 정의하며, <use>로 이를 인스턴스화합니다. 아이콘 제작에 이상적입니다.
제작 방법
-
<symbol>로 아이콘 정의:<svg> <defs> <symbol id="star" viewBox="0 0 100 100"> <polygon points="50,10 60,40 90,40 65,60 75,90 50,70 25,90 35,60 10,40 40,40" fill="gold"/> </symbol> </defs> </svg>viewBox로 내부 좌표계를 설정.
-
<use>로 아이콘 재사용:<svg width="200" height="200"> <use href="#star" x="10" y="10" width="50" height="50"/> <use href="#star" x="100" y="100" width="30" height="30" fill="red"/> </svg>- 위치와 크기, 색상을 조정해 여러 번 사용.
장점
- 파일 크기 절약: 동일한 그래픽을 여러 번 재사용.
- 스타일 커스터마이징: 각
<use>마다 다른 스타일 적용 가능.
<foreignObject>: 외부 콘텐츠 삽입
<foreignObject>는 SVG 안에 HTML, 이미지 등 외부 콘텐츠를 포함할 수 있게 합니다. SVG가 아닌 다른 네임스페이스의 요소를 렌더링하는 데 사용됩니다.
예시
<svg width="200" height="200">
<foreignObject x="10" y="10" width="180" height="180">
<div xmlns="http://www.w3.org/1999/xhtml" style="color: blue; font-size: 16px;">
This is <b>HTML</b> inside SVG!
</div>
</foreignObject>
</svg>
- SVG 안에 HTML
<div>를 삽입.
주요 속성
x,y,width,height: 삽입 영역 정의.- 제한: 브라우저 호환성에 따라 렌더링이 달라질 수 있음.
활용
- SVG와 HTML의 장점을 결합(예: 버튼, 입력 폼 삽입).
- 복잡한 레이아웃이 필요한 데이터 시각화.
결론
SVG의 <text>는 위치와 스타일링을 자유롭게 조정할 수 있으며, <tspan>과 <textPath>로 세부 조정과 창의적 배치가 가능합니다. <symbol>과 <use>는 아이콘 시스템을 효율적으로 관리하는 데 유용하고, <foreignObject>는 SVG의 한계를 넘어 외부 콘텐츠를 통합할 수 있는 강력한 도구입니다. 이러한 기능들을 활용하면 단순한 텍스트나 아이콘을 넘어 인터랙티브하고 복잡한 그래픽을 구현할 수 있습니다.