EE draft - SVG

ee-svg.md

svg

svg 태그를 사용해서 SVG 문서를 HTML 문서 내에 삽입할 수 있다.

SVG는 Scalable Vector Graphic 의 약자로, 마크업 언어로 편하게 벡터 그래픽을 그릴 수 있게 해주는 포맷. XML 문서 포맷이 정의되어 있으나, 덜 엄격한 포맷인 HTML 안에 문제없이 삽입할 수 있다.

SVG 문서는 좌표계를...블라블라

width, height 로 크기 바꾸기

svg 태그의 width, height 속성을 통해 크기를 지정할 수 있다.

<svg width="100" height="100" style="border: 1px solid red">
  <rect x="0" y="0" width="50" height="50" />
</svg>

viewBox 로 가시영역 바꾸기

svg 태그의 viewBox 속성을 통해 가시영역을 지정할 수 있다.

<svg width="100" height="100" viewBox="0 0 200 200" style="border: 1px solid red">
  <rect x="0" y="0" width="50" height="50" />
</svg>

viewBox 속성의 네 개의 수 중, 앞의 두 수는 가시영역의 좌측상단 좌표를, 뒤의 두 수는 가시영역의 크기를 나타낸다.

viewBox 속성은 svg 요소의 크기에 영향을 미치지 않으며, 가시영역에만 영향을 미친다. 위 예시에서, svg 태그에 의해 그려진 요소의 크기는 변함없이 100px * 100px 이지만, 그보다 두 배 큰 200px * 200px 의 가시영역이 그 안에 그려지므로 결과적으로 50%로 축소를 한 것과 마찬가지의 결과가 나온다.