SVG(Scalable Vector Graphics)는 XML의 기반의 2차원 그래픽을 표현하기 위한 파일형식이다. SVG는 정적인(static) 이미지(image)뿐만 아니라 애니메이션이나 다양한 그래픽 효과를 위한 마크업과 API로 구성이 되어 있다. 그 이름 그대로 벡터(vector)기반으로 그래픽 데이터를 처리하므로 래스터(raster) 방식에 비해 확대나 축소에 유연하게 대응할 수 있으며 HTML에 섞어서 사용이 가능하므로 JavaScript를 통한 DOM 조작과 CSS로의 styling도 자유롭다. 현재는 1.1이 권고안으로 사용되고 있으며 여러가지 스펙이 추가된 1.2 버전이 재정중에 있다. 전체 스펙은 W3C SVG에서 확인할 수 있다.
지원 브라우져
데스크탑의 주요 브라우져인 FireFox, Chrome, Safari, Opera에서 지원을 하고 있다. MS에서는 SVG에 대응되는 VML(Vector Markup Language)라는 자체 스펙을 만들었으나 IE9부터는 SVG를 지원하기 시작했다.(MS는 W3C SVG워킹그룹에도 가입하였다) IE8이하버전에서는 플러그인 형태(Adobe SVG Viewer)로 SVG를 사용할 수 있다. 모바일 환경에서는 Mobile Safari, Mobile Opera, Fennec(FireFox의 모바일버전)에서 지원한다. 다만 안드로이드의 기본브라우져에서는 성능상의 이슈로 지원하고 있지 않고 있고 다음 버전(2.3 진저브레드 이상)의 안드로이드OS에서 지원할지 여부도 확실치 않다. 이외에 이미지를 SVG형태로 이미지를 export 하는 tool이나 SVG를 생성할 수 있는 많은 툴들이 있다.
XML based
SVG는 XML 베이스이다. 도형·필터·애니메이션이 XML 마크업 요소로 구성이 되며 각각의 조절은 그 속성값을 통해 이루어진다.일반적인 SVG의 형태는 다음과 같다.
<path id="mypath"stroke="black"d="M 50 50 L 100 100"/>
<rect id="myrect"stroke="black"d="M 50 50 L 100 100"style="border:1px solid;"/>
</svg>
이와 같이 XML기반이기 때문에 SVG전문툴 뿐만이 아니라 메모장같은 간단한 텍스트편집기로도 파일을 편집할 수 있으며 text기반으로 분석하기도 용이하다.
SVG의 활용
웹폰트
웹에서 타이포그라피는 매우 중요한 요소이다. 웹페이지의 전체의 분위기를 결정지으며 잘 선택된 폰트는 불필요한 이미지나 코드를 줄여주기도 한다. 다양한 타이포그라피를 표현하기 위해 일반적으로 가장 많이 사용되는 방법은 이미지이다. 출력하길 원하는 텍스트를 이미지로 만들어버리는 것이다. 하지만 이와같은 방법은 웹 접근성 측면에서는 바람직하지 못하다. 웹 폰트는 사용자의 PC에 해당폰트가 없더라도 환경에 구애받지 않고 다양한 타이포그라피를 사용할 수 있다는 장점이 있다. 웹폰트로는 MS에서 만든 eot 포맷이 가장 유명하지만 라이선스의 문제로 IE에서만 동작하다는 단점이 있다. SVG로도 웹폰트를 만들 수 있는데 아래의 text는 SVG웹폰트로 styling 된 것이다.
This is SVG webfont.Hello.
동적 이미지의 생성
Flash같은 별도의 플러그인 없이 웹 상에서 이미지를 생성해야 될 필요가 있을때 SVG는 매우 유용하다. 아래의 이미지는Daum 맵 서비스에서 면적구하기의 UI를 SVG로 구성한 예이다. 사용자의 마우스 움직임에 따라 면적를 나타내는 이미지가 계속 변하는데 이렇게 동적인 이미지를 SVG로 그릴 수 있다.
아래의 그림은 Google Docs 의 presention 서비스의 한 화면이다. 각종 도형들을 삽입하고 조절할 수 있는데 이런 도형들도 SVG로 생성된다.
resizing이 빈번한 이미지
SVG는 벡터 방식이므로 아래와 같이 이미지의 크기가 커지거나 작아지더라도 어느정도의 퀄리티를 계속 유지한다. [확대하기] 버튼을 한번 눌러보자.
일반 이미지
SVG 이미지
SVG사용하기
SVG의 MIME-type은 image/svg+xml 이고 확장자는 .svg를 권장한다. HTTP헤더의 MIME-type이 정확하지 않을 경우 일부 브라우져에서는 표현이 잘 되지 않는 경우가 있다. 사실 웹상에서는 SVG 파일을 단독으로 쓰기 보다는 HTML페이지 내에서 섞어 쓸 일이 더 많다.
embed, object tag 사용
<div>아래의 그림은 호랑이 입니다.<div>
<object type="image/svg+xml"data="tiger.svg">
위의 소스와 같이 embed 태그나 obejct 태그를 이용해 외부의 SVG를 html페이지 내에 포함시킬 수 있다.(embed 는 HTML5의 스펙에 포함되어 있다.) SVG파일별로 import가 쉽고 관리가 용이하다.(wikipedia의 경우 많은 이미지들이 SVG로 그려지고 각 위키 페이지에 import된다.)
img tag 사용
SVG 자체가 이미지의 한 포맷임으로 HTML의 img 태그를 사용할 수 있다. embed, object와의 차이점이 있다면 img 태그로 import시에는 SVG DOM node를 traversing 할 수 없다는 점이다.
<img src="my_image.svg"width="400"height="300">
CSS
SVG를 지원하는 브라우져에서는 CSS의 image 관련 속성에 SVG를 사용할 수 있다.
<style type="text/style">
.img { background-image:url(./image.svg); }
</style>
동적인 생성
정적인 SVG를 import 하는 경우만큼이나 동적으로 이미지를 생성해야 하는 경우가 많다. 이때에는 HTML element를 생성하듯이 SVG element를 만들면된다. 다만 SVG가 XML베이스이기 때문에 namespace를 명시해주어야 한다.
위와 같이 원하는 shape의 element를 선언하고 attribute를 통해 세부적으로 도형을 모양을 조절할 수 있다. 이후에도 살펴보겠지만 fitler나 animation등도 관련된 animation이나 filter element를 선언하고 attribute를 통해 세부적인 내용을 조절하는 방식으로 사용된다. 자세한 속성들은 천천히 살펴보도록하고 지금은 기본적인 몇가지 속성만 알아보자.
stroke 속성은 선의 색깔을 나타낸다.
storoke-width 속성은 선의 굵기를 나타낸다. 단위는 pixel이다.
fill 속성은 채워지는 색깔을 나타낸다.
좌표는 element마다 약간씩의 차이는 있지만 x , y attribute로써 표현된다. line element의 경우 선의 시작점과 끝점을 나타내기 위해 x1, y1, x2, y2 두쌍의 좌표 attribute가 존재한다.
circle, ellipse element에 사용된 cx, cy 속성은 원(타원)의 중심 좌표를 나타낸다. r 속성은 반지름을, rx 와 ry는 타원의 x축,y축 방향으로의 반지름을 나타낸다.
style 속성을 이용해 letter-spacing 이나 font-size 를 조절하는 위의 예에서 볼 수 있듯이 text element 는 CSS와 거의 흡사한 방법으로 text를 styling할 수 있다(이는다른 SVG의 다른 element들에도 적용된다). 3번째 라인의 rotate 속성은 character 하나 마다 얼마나 회전시킬지를 결정하는 속성이다. 단위는 degree이다. rotate="-10,-20,-30,-40, -40" 가 적용되어 있다면 각각의 텍스트는 다음과 같이 회전된다.
위치의 조절
text 가 나타낼 위치역시 x, y 로 조절이 되는데 도형과는 조금 차이가 있다. 아래의 코드와 그림에서와 같이 text와 line이 같은 y position이 같은 값을 가지고 있지만 라인이 text의 일부를 가로지는 걸 볼 수 있다.
<text x="20"y="50"style="font-size:40px;">A g p h ㄱ 가 각</text>
image
HTML의 img 와 같은 기능을 한다. image파일이나 svg파일을 모두 import할 수 있으며 기본 속성값은 rect 와 흡사하다. 다만 외부의 이미지를 link하기 위해서 xlink namespace가 선언되어 있어야 한다. 아래의 코드에서도 svg element에 xlink 의 namespcae( xmlns:xlink="http://www.w3.org/1999/xlink )를 선언해주었다.
앞에서 여러 basic shape들을 이용해 만든 도형들을 여러번 사용해야 할 때가 있다. 같은 모양 같은 색깔의 shape를 하나 더 선언해주는 것보다 use element를 통해 이미 선언된 element를 사용하는 것이 효율적이다. 아래의 예제는 <g> element로 묶인 복잡한 도형을 use 를 이용해 재사용하는 예이다. use 사용된 transform 속성은 뒤에 살펴보도록 하겠다.
일반 이미지
