메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

IT/모바일

SVG로 만드는 웹 그래픽

한빛미디어

|

2002-11-20

|

by HANBIT

16,662

「한빛 네트워크 기사 공모전」 입선작: 한동훈

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



    Example 1 - One rectangle 
    

XML에 익숙한 분들이라면 처음 3줄이 의미하는 것을 알 것이다. 첫번째 줄은 이 문서가 XML 문서라는 것을 가리키며, 인코딩은 utf-8을 사용한다는 것을 의미한다. XML 입문자는
태그는 SVG 이미지를 선언하는 것이다. 태그는 이미지에 대한 설명으로 화면상에 나타나지 않고 단순히 태그상에서 이미지에 대한 설명을 위한 용도로 사용된다. HTML에서 흔히 사용하는 주석 태그()와 같은 역할을 한다. SimpleBox.svg를 저장하고, 브라우저에서 실행하면 다음과 같은 결과를 볼 수 있다. (SVG 플러그인이 설치되어 있지 않다면 플러그인을 설치하고, 라이선스 동의 화면이 나타난다)

예제 결과에서 알 수 있는 것처럼 태그에 지시된 대로 사각형이 생성된다는 것을 알 수 있다. 태그와 한 번 비교해보기 바란다.
    
style 태그에는 fill, stroke, stroke-width등을 한 번에 입력했는데, 원한다면 이들을 각각의 태그 , 로 입력할 수 있다. 다음에는 보다 복잡한 SVG를 살펴보자.
이름 : NotSimple.svg




    Example 2- One polyline and one ellipse
  
  
  

위 태그를 보는 것 만으로는 쉽게 모양이 다가오지 않을 것이다(사실, Amaya나 Illustrator에서 직접 그리는 것이 편하다. 독자도 태그에 익숙해진 다음에는 태그를 직접 입력하는 경우는 거의 없을 것이다). 예제에서 짐작할 수 있는 것처럼 태그는 타원을 그리며, 태그는 여러 개의 직선으로 그려진 선들을 그리는 데 사용한다. 각 선에 대한 좌표는 points 속성(attribute)안에 기록되며 형식은 예제와 같다. Sin 곡선을 그리고 싶다면 points 속성에 2000개 정도의 좌표를 입력하면 자연스러운 곡선을 그려낼 수 있다. 물론, 2000개의 좌표를 손으로 입력하지 않고 프로그램을 통해서 생성해내거나 그래픽 드로잉 프로그램을 사용할 것이다. 태그는 곡선 등을 그리는데 사용하기 때문에 몇 천 개의 좌표는 한 순간에 처리할 수 있다. 하나의 직선을 그리는 데는 태그를 사용한다. 보다 부드러운 곡선을 그리는 데는 태그를 사용한다. 이제 예제를 실행한 결과를 살펴보면 다음과 같다.

다음은 Amaya를 실행한 화면이다. Amaya에서는 태그를 직접 입력하지 않고, 도구를 이용해서 그릴 수 있다. 실제로는 Illustrator와 같은 도구를 사용하는 것이 더 좋지만, 나름대로의 장단점이 있다. 개인적으로는 SVG 드로잉 프로그램인 SodiPodi을 좋아한다. 필자가 보기에 오픈 소스이면서, 사용하기 편하고 뛰어난 기능을 제공한다고 생각한다. 리눅스 사용자는 반드시 써보기 바란다.

이 SVG를 실행한 결과와 소스는 다음과 같다.

이름 : circle.svg



  

여기에서 알 수 있는 것처럼 특별히 어려운 것은 없다. 이제 기본적인 SVG 태그들을 살펴보자.

기본 태그

태그
설명
SVG에서 최상위 태그로 HTML에서의 태그와 같은 역할을 한다.
SVG에 대한 설명을 위한 태그로 SVG에는 영향을 주지 않는다. HTML의 주석 태그()와 비슷하다.
사각형을 그린다.
원을 그린다.
타원을 그린다.
선을 그린다.
여러 개의 직선을 그린다.
패스로 정의된 곡선을 그린다.
여러 요소들을 하나의 그룹으로 정의하기 위해 사용한다.

기본 데이터 형식 및 인터페이스

데이터 형식
설명
시간에 따라 그래픽 요소들을 변경하기 위해 사용한다.
그래픽으로 렌더링될 텍스트를 정의하기 위해 사용한다.
숫자를 정의하기 위해 사용한다. 음수를 위해 -5와 같이 입력할 수 있다.
실수를 표현하기 위해 사용한다.
원점과 주어진 축과의 거리를 지정하기 위해 사용한다.
각도를 정의하기 위해 사용한다.
색상을 지정하기 위해 사용한다. 216가지의 색상 이름 또는 RGB를 사용할 수 있다.
시간을 나타내기 위해 사용한다. 단위는 s(초) 또는 ms(밀리초)로 표현한다.

기본 데이터 형식 및 인터페이스에 대한 자세한 설명과 예제를 보려면 Basic Data Types and Interfaces - SVG 1.1를 참고한다.

SVG 응용

SVG를 다양하게 응용할 수 있는데 그 중에 하나가 차트를 그리는 것이다. 차트 역시 직접 태그를 입력하지 않고 Amaya와 같은 도구를 사용하도록 하며, 실제 SVG 문서는 프로그램을 통해서 동적으로 생성해야 한다. 다음은 차트를 생성한 결과이며 0부터 차례대로 채워지는 것을 애니메이션한 것이다.

위 예제의 소스는 다음과 같다.
이름 : animate.svg

MainBanner SideBanner VBNextgen 0 50 100 Copyright 2002. All Rights Reserved.
예제는 직접 입력하는 일 없이 이해만 하기 바란다. 위 텍스트는 코드를 통해서 생성한 것이다.

SVG와 MathML

웹 상에 수식을 표현하기 위해 정의된 XML 기반의 마크업 언어가 MathML이다. XML로 정의된 다양한 마크업 언어들을 어떻게 혼용할 것인가 궁금하게 생각하는 분들도 있을 것이다. 이 궁금증은 다음의 예제를 보면 해결될 것이다.


  
  
    
      
        
          3
          +
          4
          
        
      
    
  

다른 마크업 언어를 사용할 때는 태그를 사용하고, 해당 마크업 언어로 표시할 영역을 태그로 정의한다. 나머지는 일반 XML 문서와 동일하게 XML 네임 스페이스를 선언하고, 해당 마크업으로 기술하면 된다.

SVG와 응용

SVG 역시 XML 문서이기 때문에 CSS와 XSL을 사용해서 스타일을 정의할 수 있다. 또한 대부분의 경우에 특정한 작업(차트)을 위해서 내부 포맷으로 SVG를 사용하는 경우에 모든 것을 매번 프로그램하는 대신에 이러한 차트를 표현할 컨트롤을 생성하는 것이 더 좋다. 이러한 컨트롤을 생성함으로써 사용자와 상호작용하는 응용 프로그램을 쉽게 작성할 수 있다.

SVG와 지도

SVG가 가지고 있는 다양한 특징들 때문에 여러 분야에서 사용되고 있으며, 가장 대표적인 것으로는 지도를 예로 들 수 있다. 사용자와 쉽게 상호작용할 수 있으며, 확대와 축소가 자유로우면서 고품질의 그래픽을 제공하기 때문이다. 관심있는 분들은 SVGMapMaker 2.0 for MapInfo Professional을 참고하기 바란다. 참고로 MapInfo 소프트웨어는 전세계의 다양한 지도들을 검색할 수 있는 소프트웨어를 판매하는 회사다(국내지도 역시 CD 5장 분량의 컨텐트로 제공되고 있으며 특수 용도로도 사용되고 있음).

특별히 지도에 SVG가 유용한 이유는 무엇인가? 만약 지도상에서 어떤 건물이 잘못된 좌표에 있다면 SVG는 텍스트 에디터에서 간단한 수치 입력 만으로도 지도상의 건물을 쉽게 옮길 수 있으며 도로와 건물을 쉽게 새로 만들 수 있기 때문이다. 플래시라면 제너레이터를 사용해야 할 것이고, 다른 소프트웨어들은 더 복잡하다(상상만으로 필자는 끔찍하다!). 국내에서 개발된 지도 저작 도구로는 XEG(XML Editor for Graphics)가 있으며, 국내 지리 정보 제공용으로 많이 사용되고 있다.

마치며

SVG의 우수성에 대해서는 많은 이야기가 있었다. 마이크로소프트의 VML과 어도비의 PGML이 합쳐지고, 다시 W3C에서 2년이란 세월이 걸쳐서 2000년에 나왔던 SVG는 현재에도 업계에서 인정 받지 못하고 있다. 그러나 최근에는 SVG의 우수함을 널리 알리기 위해 활동하는 사람들은 물론이고 『SVG Essentials』와 같은 책도 나와 있다.

SVG 2는 지금 보다 더 확장하기 쉽게 발전할 것이다. 예를 들어 Xform이나 FO-XML과 함께 사용할 수 있게 될 것이고, 심지어는 VoiceXML도 함께 사용할 수 있게 될지도 모른다. 또한 현재 보다 파일 크기를 보다 작게 하기 위해 노력하고 있으며 모빌 기기를 위한 Tiny SVG로 진행중에 있다. SVG를 압축하여 전달하는 .svgz과 같은 압축 포맷은 이미 제공되고 있다.

현재 SVG는 오픈 소스를 중심으로 빠르게 퍼져나가고 있다. 2002년 7월에 GTK+의 SVG 지원 소식에 이어, 9월에는 SVG를 이용한 테마 제작에 대한 이야기가 퍼져나가고 있다. (리눅스에서 플래시와 같은 데스크탑도 가능해질 것이고, Mac OS X보다 이쁜 운영체제가 될 지도 모른다.) 이미 SVG를 사용한 윤곽선 글꼴 지원도 제공하며 웹 상에 CAD, 지도와 같은 복잡한 그래픽을 표현하면서 사용자와 상호 작용할 수 있는 그래픽 포맷으로 널리 각광받고 있다. SVG를 익히는 것은 웹에서 여러분에게 가장 최신 기술을 익힐 수 있는 기회를 제공할 것이다. 또한, SVG 2의 등장은 그래픽 세상을 멋지게 바꿔줄 것이라 생각한다. 독자들도 SVG 탐구에 뛰어들어 보는 것은 어떨까?

참고자료
TAG :
댓글 입력