SVG란?

기존에 알고 있던 SVG에 대한 상식

백터기반이기 때문에 사이즈가 변경되어도 안 깨지고 XHTML 문법으로 이루어져서 CSS 및 Event Handle이 가능하다.

정확한 개념 정리

SVG의 약자는 Scalable Vector Graphic 의 약자입니다. 

2차원의 백터 그래픽을 표현하기 위해서 탄생하였고 XML 기반의 표현입니다.

1998년 W3C에서 개발을 하였고 그전에는 Microsoft의 "VML"와 Apple의 "PGML" 이라는 2차원의 백터 그래픽을 XML로 표현하는 언어가 있었습니다.

하지만 두개다 W3C에서 채택하지 않았고 W3C는 SVG를 개발하여서 표준으로 채택하였습니다.

SVG의 장단점

장점으로는 백터기반이기 때문에 기존의 비트맵 기반의 포멧과 달리 사이즈가 늘어나도 사진이 깨지지 않고 매끄럽게 표현됩니다.

Web에서 Device의 Ratio를 대응하기 위해 기존 사이즈보다 x2된 사진으로 대응하는데 SVG를 사용하면 자동으로 대응되게 되어 원본과 x2를 모두 준비할 필요가 없습니다.

또 Webgl 환경에서 사용할때는 CSS를 이용하여 styling이 가능하고 JavaScript를 사용해서 EventHandlling이 가능합니다.

이를 이용하여 기존의 HTML/CSS로는 조금 어려운 Animation이나 효과들을 구현하기 쉽습니다.

단점은 큰 용량입니다. 

Path가 많아지게 되면 기존이미지 포멧들보다 용량이 커질 수가 있습니다.

이러한 단점을 보완하기 위해서 SVG Optimizing을 위한 툴도 존재합니다.

https://brunch.co.kr/@kkak10/3

SVG 시작해보기

SVG를 웹에서 구현하기 위해서는 <svg> 태그를 이해해야 합니다.

<svg> 태그는 svg의 루트 태그이며 XHTML 의 스펙을 따르고 있기 때문에 xmlns의 속성을 namespace로 부여하여야 동작합니다.

version은 사용할 svg의 스펙의 버전을 말하고 일반적으로는 1.1을 이용합니다.

width와 height는 svg 엘리먼트의 크기를 지정해주며 이는 requirement Arrtibute이기 때문에 무조건 지정해줘야 합니다.

viewbox라는 속성은 실제 svg영역 중에 보여줄 기준점을 정하는 속성입니다.

viewbox는 viewbox = "x, y, width height"로 이루어져 있는데 width나 height는 0 값 이하를 지정하면 SVG가 렌더링 되지 않습니다.

(x,y는 사각형 좌측 상단의 좌표)

해당 viewbox의 위치나 크기에 따라서 svg Element는 300x300 이지만 100x100만 표시될 수도 있고 좌표값도 0,0이 아닌 100,100 기준으로 보여줄 수도 있습니다.

위의 코드는 300x300의 SVG 위에 100x100의 사각형을 그리는 코드입니다.

rect의 좌표가 x:0 y:0 이기 때문에 SVG의 가장 왼쪽 위에 그려집니다.

만약 viewbox를 변경하게 되면 어떻게 나오는지 알아보겠습니다.

viewbox의 기본좌표를 50,50 으로 변경하면 0,0을 기준으로 그려진 rect는 원래 보이던 크기의 반만큼만 나옵니다.

SVG에서 사용하는 태그들

사각형

원

원 (eclipse)

중심선과, 가로 세로 반지름을 표현합니다.

선 (Line)

시작점과 끝점을 표시합니다.

폴리곤

각 point는 polygon을 형성하는 꼭지점의 좌표입니다.

끝점과 시작점은 지정하지 않아도 자동으로 이어줍니다.

폴리라인

각 point는 polygon과 비슷하며 여러개의 점을 이을때 사용합니다.

https://brunch.co.kr/@kkak10/3