SVG는 도형과 글자의 위치를 텍스트로 기록할 수 있는 형식이다. 아래 두 줄은 이 연습을 위해 쓴 짧은 문장이다. 이미지를 그리듯 문장을 배치하되 글자를 곧바로 윤곽선으로 바꾸지는 않는다. 아직 문장에게 철자 수정의 기회를 주는 셈이다.
좌표 두 개로 시작하기
- 아래 코드를 UTF-8 일반 텍스트 파일
poem.svg로 저장하고 웹 브라우저에서 연다..svg.txt로 저장되지 않았는지도 확인한다. - 첫 번째
text의x를40에서100으로 바꾼다. 첫 줄만 오른쪽으로 이동하는지 확인한다. - 같은 줄의
y를 바꿔 위아래 움직임을 비교한다.y는 여기서 글자의 위쪽 끝이 아니라 기준선 위치다. - 브라우저 창을 좁혀 본다.
viewBox는 내부 좌표 영역을 정하며 실제 표시 크기와 구분된다. - 문장이나 배치를 바꾸면
title과desc의 설명도 함께 고친다.
<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 요소.