[[SVG]]는 도형과 글자의 위치를 텍스트로 기록할 수 있는 형식이다. 아래 두 줄은 이 연습을 위해 쓴 짧은 문장이다. 이미지를 그리듯 문장을 배치하되 글자를 곧바로 윤곽선으로 바꾸지는 않는다. 아직 문장에게 철자 수정의 기회를 주는 셈이다.

## 좌표 두 개로 시작하기

1. 아래 코드를 UTF-8 일반 텍스트 파일 `poem.svg`로 저장하고 웹 브라우저에서 연다. `.svg.txt`로 저장되지 않았는지도 확인한다.
2. 첫 번째 `text`의 `x`를 `40`에서 `100`으로 바꾼다. 첫 줄만 오른쪽으로 이동하는지 확인한다.
3. 같은 줄의 `y`를 바꿔 위아래 움직임을 비교한다. `y`는 여기서 글자의 위쪽 끝이 아니라 기준선 위치다.
4. 브라우저 창을 좁혀 본다. `viewBox`는 내부 좌표 영역을 정하며 실제 표시 크기와 구분된다.
5. 문장이나 배치를 바꾸면 `title`과 `desc`의 설명도 함께 고친다.

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 240"
     role="img" aria-labelledby="title desc">
  <title id="title">창문과 쉼표</title>
  <desc id="desc">위쪽 왼편에 창문은 열리고, 아래쪽 오른편에 쉼표는 남는다라는 문장이 있다.</desc>
  <rect width="600" height="240" fill="#faf5e9"/>
  <g fill="#222" font-family="sans-serif" font-size="30">
    <text x="40" y="80">창문은 열리고</text>
    <text x="250" y="175">쉼표는 남는다</text>
  </g>
</svg>
```

## 글자가 위치를 갖게 되면

- 이 예제의 글자색은 `fill`이다. 일반적인 HTML 문장의 `color`와 같은 자리라고 짐작하면 색이 말을 안 들을 수 있다.
- `font-family="sans-serif"`는 기기마다 다른 글자체를 쓸 수 있다. 글자 폭과 줄의 끝 위치도 함께 달라질 수 있다. 긴 문장으로 바꿨다면 글자가 600 × 240 좌표 영역 밖으로 잘리지 않았는지 먼저 살핀다. [[글자가 화면 밖으로 나갈 때]]에는 좌표와 글자 크기를 하나씩 바꿔 원인을 나눈다.
- [[타이포그래피]]의 정렬 규칙을 배우는 재료로도, [[자리를 바꾸는 한 줄의 시]]처럼 규칙을 흔드는 재료로도 쓸 수 있다.

화면의 좌표와 읽는 순서가 언제나 같지는 않다. 그 틈은 [[문장의 좌표계]]에 더 적어볼 만하다.

참고: [MDN의 SVG text 요소](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/text).

## 기타 등등

- `textPath`를 쓰면 글자를 직선 위가 아니라 경로의 모양을 따라 놓을 수 있다. 시의 행을 곡선으로 만드는 데 쓸 수 있다. [출처](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/textPath)
- 경로 위에서 글이 시작하는 위치는 `startOffset`으로 정한다. 곡선 자체를 옮기지 않고 문장의 출발점만 움직일 수 있다. [출처](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/textPath)

#SVG #타이포그래피 #시 #만들기