등록일: 2002년 11월 20일조회수: 2,586 프린트 전체기사목록 「한빛 네트워크 기사 공모전」 입선작: 한동훈

SVG란?

SVG(Scalable Vector Graphics)는 XML에 기반한 웹 상의 그래픽을 기술하는 마크업 언어다. 1998년 W3C는 PGML(Precision Graphics Markup Language)와 VML(Vector Markup Language)라는 새로운 그래픽 포맷을 두 가지를 소개했었다. 이때 VML은 CSS를 사용하도록 되어 있었는데, 후일에 이 두 가지 언어가 하나로 합쳐져 새로운 언어를 탄생시켰다. 이것이 바로 SVG로 SVG가 탄생하게 된 목적은 동적이고 자유롭게 변환할 수 있으며, 사용자와 상호 작용할 수 있는 그래픽을 플랫폼 독립적으로 표현할 수 있도록 하는데 있다.

SVG는 현재 20여개 이상의 회원들로 구성되어 있으며, 이들 회원사들 중에는 썬(Sun), IBM, 어도비(Adobe), 매크로미디어(Macromedia), 휴렛패커드(HP), 마이크로소프트(Microsoft), AOL 등이 있다. 특히 어도비는 SVG용 플러그 인을 제공하는 등 SVG에 많은 투자를 하고 있다.

SVG의 버전은 현재 1.0, 1.1, 2.0이 있지만 1.1까지 작업이 마무리 되었으며 2.0은 기존의 문제점을 개선, 보완하기 위해 작업중이다. 또한 모빌 기기에서의 그래픽 표현을 위한 SVG Mobile이 작업중이며, XHTML + MathML + SVG를 위한 프로파일도 준비되어 있다. 관심있는 분들은 W3C를 방문하기 바란다.

SVG의 이점

SVG가 제공하는 이점은 앞에서도 얘기했지만, 여기서는 몇 가지 특징들을 정리해보겠다.


SVG Essentials


변환이 자유로운 벡터 그래픽: 독자들이 흔히 알고 있는 플래시와 마찬가지로 SVG 역시 벡터 기반 그래픽이기 때문에 그래픽을 축소 또는 확대하는 경우에 그래픽이 손상되지 않는다.
정확한 색상 표현: 화면상에서 볼 때와 인쇄물로 볼 때 정확히 같은 색상을 표현하는 것을 보장해준다. SVG에는 1600만 이상의 색상들을 제대로 지원한다.
Scalable: XML, HTML4, XHTML과 호환가능할 뿐만 아니라 CSS, XSL, DOM과 함께 사용할 수 있다. 다시 말해서 SVG는 확장가능하며, 스타일을 쉽게 적용할 수 있으며, 그래픽을 제어할 수 있으며, 쉽게 다른 문서와 통합할 수 있다는 것을 의미한다.
오픈 소스: 오픈 소스로 개발되고 있으므로 자유롭게 사용할 수 있으며, 다양한 언어들에서 SVG에 대한 개발을 제공하고 있다.(자바를 예로 들 수 있다)
기존 그래픽과 달리 고품질의 그래픽 이미지를 제공하고, 이미지에 있는 텍스트를 검색할 수 있으며, 사용자와 상호 작용하는 이미지를 작성할 수 있다.
SVG 도구

먼저 SVG를 보기 위해서는 Adobe SVG Viewer가 시스템에 설치되어 있어야 한다. 또는 Sun과 IBM이 개발한 SVG Viewer를 설치할 수 있다. 현재 SVG를 편집, 생성하기 위한 다양한 도구들이 제공되고 있으며, 이들에 대한 전체 목록은 SVG Implementations에서 쉽게 확인할 수 있다. 다음 절에서 설명하게 될 SVG 문법을 보면서 '저러한 것들을 어떻게 일일이 입력할까?'하는 생각은 하지 않아도 된다. 이미 Illustrator 9, Adobe GoLive 5.0, Paint Shop Pro, Corel Draw 9 또는 그 이상의 최근 버전의 그래픽 소프트웨어는 모두 'SVG로 내보내기(export)' 기능을 제공하고 있으며, 기존의 그래픽을 SVG로 쉽게 변환할 수 있다. SVG로 그래픽을 그릴 수 있는 SVG Editor들도 다수 제공되고 있으며, W3C에서는 SVG Editor인 Amaya를 제공하고 있으며, XMLSpy, HomeSite와 같은 소프트웨어 에서도 SVG를 지원한다. Protocol7.com에서는 C#으로 작성된 SVG#의 소스를 제공하고 있으니 관심있는 분들은 참고하기 바란다.

현재 SVG용 도구들은 맥, 리눅스, 솔라리스, 윈도우 환경에서 모두 이용할 수 있으며, 다양한 플랫폼에서 이용할 수 있다. Amaya와 같은 도구는 모티프, GTK, OpenGL과 같은 다양한 위젯으로 포팅되어 있다. 그놈(Gnome)의 GTK+에서의 SVG 지원에 대한 개발이 한창이며, 이미 SVG로 작성한 테마들도 눈에 띄고 있다.

SVG에서의 한글

SVG에서의 인코딩은 utf-8과 ISO-8859-x와 같은 기본적인 인코딩만 제공한다. 따라서 euc-kr과 같은 인코딩을 사용할 수 없으므로 SVG에 한글 텍스트를 추가하고 싶다면 유니코드를 입력하고 편집할 수 있는 SVG Editor(Amaya나 XMLSpy)등을 사용하기 바란다. 여기서는 도구의 사용법은 설명하지 않는다.

SVG 구현

SVG의 구문은 대부분의 경우에 사용하기 쉽고 매우 직관적이라는 것을 알 수 있을 것이다. SVG 역시 다른 언어들과 마찬가지로 XML에 기반한다. 먼저 간단한 상자를 그리는 SVG 예제를 살펴보자.
예제 : SimpleBox.svg

"http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd" >

Example 1 - One　 rectangle
style="fill:purple; stroke:gray; stroke-width:0.1cm" />


XML에 익숙한 분들이라면 처음 3줄이 의미하는 것을 알 것이다. 첫번째 줄은 이 문서가 XML 문서라는 것을 가리키며, 인코딩은 utf-8을 사용한다는 것을 의미한다. XML 입문자는