### SVG의 `<text>` 요소와 관련 기능

SVG에서 `<text>` 요소는 텍스트를 그래픽으로 렌더링하는 데 사용됩니다. 단순히 텍스트를 표시하는 것을 넘어, 스타일링, 위치 조정, 경로 따라 배치 등 다양한 기능을 제공합니다. 아래에서는 `<text>` 요소의 주요 속성, `<tspan>`과 `<textPath>`의 역할, `<symbol>`과 `<use>`를 활용한 아이콘 제작 방법, 그리고 `<foreignObject>`에 대해 설명합니다.

---

### `<text>` 요소와 주요 속성

`<text>`는 텍스트를 SVG 캔버스에 추가하며, 위치와 스타일을 속성으로 정의합니다.

#### 기본 예시
```xml
<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)`      |

#### 예시: 스타일링된 텍스트
```xml
<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>` 내부에서 특정 텍스트 부분에 스타일을 적용하거나 위치를 조정할 때 사용됩니다.

#### 예시
```xml
<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`로 위치 미세 조정 가능.
- 여러 줄 텍스트를 만들 때 유용:
```xml
<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` 속성으로 경로를 참조합니다.

#### 예시
```xml
<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>`로 이를 인스턴스화합니다. 아이콘 제작에 이상적입니다.

#### 제작 방법
1. `<symbol>`로 아이콘 정의:
   ```xml
   <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`로 내부 좌표계를 설정.

2. `<use>`로 아이콘 재사용:
   ```xml
   <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가 아닌 다른 네임스페이스의 요소를 렌더링하는 데 사용됩니다.

#### 예시
```xml
<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의 한계를 넘어 외부 콘텐츠를 통합할 수 있는 강력한 도구입니다. 이러한 기능들을 활용하면 단순한 텍스트나 아이콘을 넘어 인터랙티브하고 복잡한 그래픽을 구현할 수 있습니다.