벡터 도형을 마크업으로 표현하는 SVG를 배웁니다.
SVG는 circle, rect, path 같은 요소로 도형을 표현합니다. 벡터 방식이라 확대해도 선명하고 각 도형이 DOM 요소이므로 CSS와 JavaScript로 선택할 수 있습니다.
viewBox=0 0 500 200은 그림 안의 좌표계를 가로 500, 세로 200으로 정하고, CSS의 width: 100%가 이 좌표계를 카드 폭에 맞춰 늘리거나 줄입니다. rect는 (20, 30)에서 시작하는 230×120 상자에 rx=14로 모서리가 둥글고, circle은 중심 (360, 90)에 반지름 60입니다. 요소는 소스 순서대로 칠해지므로 마지막 text가 초록 사각형 위에 흰 글자로 올라옵니다.
SVG의 y축은 아래로 갈수록 커지므로 y=30은 위에서 30만큼 내려온 자리입니다. text의 y는 글자의 위쪽이 아니라 기준선 위치라서 y=100에 놓인 글자는 대부분 그 선보다 위에 그려집니다. fill과 stroke는 CSS 속성으로도 쓸 수 있고, 스타일시트에서 circle의 fill을 정하면 요소에 적은 fill 속성보다 CSS가 우선합니다.
의미 있는 SVG에는 접근 가능한 이름을 제공하고 장식용이면 보조 기술에서 숨기세요.
직접 바꿔보세요circle의 cx와 fill, rect의 rx 값을 바꿔보세요.