등록일: 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 입문자는

Scalable Vector Graphics (SVG)
XML 폼으로 벡터 그래픽 나타내기


난이도 : 중급

필자: W3C

2007 년 7 월 03 일

벡터 그래픽 언어인 Scalable Vector Graphics (SVG)를 사용하여 2차원 벡터 그래픽을 만들 수 있습니다. SVG 기능에는 어떤 것이 있고, Document Object Model (DOM), Cascading Style Sheets (CSS), XHTML과는 어떤 관계가 있는지 알아봅시다.

Scalable Vector Graphics (SVG) 1.1 [W3C Recommendation]은 2차원 그래픽을 기술하는 언어이다. 일부 래스터 그래픽 기능도 사용할 수 있지만, 기본적으로는 벡터 그래픽 언어이다. SVG는 실질적이고 유연한 그래픽 포맷을 XML에 제공한다는 목표를 갖고 있으며, 이 부분에서 성공을 거두었다. SVG의 기능에는 중첩된 변형, 클리핑 경로, 알파 마스크, 래스터 필터 효과, 템플릿 객체 등이 포함되어 있고, 확장성도 우수하다. SVG는 애니메이션, 줌과 플래닝 뷰, 다양한 그래픽 명령어, 그룹핑, 스크립팅, 하이퍼링크, 구조화 된 메타데이터, CSS, 특화된 DOM 수퍼세트, 기타 XML 문서로의 임베딩을 지원한다. SVG의 일부 디자인은 벡터 경로가 개별 애트리뷰트 내에서 공간 한정적인 숫자 리스트로 표현된다는 점에서 논란이 되고 있지만, 메인 SVG는 가장 광범위하게 XML 애플리케이션들을 포용하고 있다. 이 스팩은 여러 언어들로 번역되었다.

SVG 1.1은 XHTML 1.1+과 비슷한 방식으로 모듈화 되었다. Mobile SVG Profiles: SVG Tiny and SVG Basic [W3C Recommendation]에서는 모바일 폰과 PDA에 적합한 감소된 SVG 모듈을 정의하고 있다. SVG 1.2 [개발중]는 SVG를 완벽한 애플리케이션 플랫폼으로 만드는 새로운 툴과 그래픽 포맷을 추가했다.



참고자료

Uche Ogbuji 튜토리얼 SVG를 사용하여 브라우저에서 벡터 그래픽 만들기 (developerWorks, 2006년 6월), 브라우저용 동적 SVG 기능 (developerWorks, 2006년 8월).


튜토리얼 Scalable Vector Graphics 소개: Nicholas Chase (developerWorks, 2004년 3월).


SVG Wiki.


ZVON의 SVG reference.


기타 XML 표준들: XML 표준 (한글).


XML 관련 포럼 참여하기: XML 존 토론 포럼.


developerWorks 커뮤니티: developerWorks 블로그


IBM XML 인증: XML 부분 IBM 인증 개발자가 되는 방법.


XML 기술 자료 (영문): 기술자료, 팁, 튜토리얼, 표준, IBM 레드북.


XML 기술 자료 (한글): 기술자료, 팁, 튜토리얼, 표준, IBM 레드북.


developerWorks 기술 이벤트와 웹캐스트.

아로마소프트(대표 임성순, www.aromasoft.com)가 Java ME 플랫폼용 SVG 솔루션인 'JSR226' 제품의 개발 및 안정화 테스트를 완료하고 해외 시장 공략에 나선다고 30일 밝혔다.

'JSR226'은 JCP(Java Community Process)에 의해 정의된 국제 표준 규격으로 모바일 2D 벡터 그래픽 기술 표준인 'SVG(Scalable Vector Graphics Solution) Mobile Profile' 을 자바 플랫폼에서 구현할 수 있도록 하는 제품이다. SVG는 고화질의 콘텐츠를 화질의 손실 없이 확대하고 축소 시킬 수 있으며 웹과의 호환성이 뛰어나 유선에서 사용하던 콘텐츠와 그래픽을 무선에서도 무리 없이 표현할 수 있다.

아로마소프트의 JSR226을 탑재한 휴대폰은 위와 같은 SVG 기반의 사용자 인터페이스를 구축할 수 있고 MMS, 텔레매틱스, 증권정보, 게임 등과 같은 콘텐츠 서비스의 그래픽 요소를 풍부하게 구현할 수 있다. 최근에는 3G 서비스로 인한 멀티미디어 콘텐츠 수요 확대로 그래픽 기술의 중요성이 점차 강화되는 데다 이통사들이 휴대폰 대기화면 개발경쟁에 나서며 관련 솔루션 도입이 활발하게 이루어지고 있다.

아로마소프트는 이러한 추세에 발맞춰 모바일 자바 플랫폼용 SVG에 대한 수요가 대폭 늘어날 것으로 보고 JSR226을 자사의 자바 플랫폼 '엠티(mTea)'에 통합 솔루션으로 탑재해 제공할 뿐만 아니라 별도의 제품으로 분리해 영업에 나서는 등 'JSR226'의 마케팅에 주력을 가하고 있다.

전 세계 20여 개 이동통신사에 자바 플랫폼을 공급해 온 해외 시장에서의 탄탄한 입지를 배경으로 3G 시대 멀티미디어 서비스의 기반이 되고 있는 SVG 그래픽 솔루션 분야에서도 점유율을 높이겠다는 전략이다. 아로마소프트 윤정원 차장은 "노키아, 소니에릭슨, NTT도코모 등 해외 휴대폰 제조사들이 그래픽 기술에 대한 중요성을 파악하고 모바일 SVG 기술을 적극 수용하는 등 관심이 높아지고 있어 개발에 나서게 되었다"며 'JSR226'은 3G서비스 시대의 블루오션으로 떠오르는 영상 및 이미지 콘텐츠 기술의 대표적인 제품으로 자리매김할 것""이라고 밝혔다.

(끝) 4/30"

데스크탑부터 휴대 전화와 휴대 정보 단말에까지 멀티미디어 기능을 확장한 개방형 그래픽 포맷
미국, 호주 연락처 --
Janet Daly, <janet@w3.org>, +1.617.253.5884 or +1.617.253.2613
유럽 연락처 --
Marie-Claire Forgue, <mcf@w3.org>, +33.492.38.75.94
아시아 연락처 --
Saeko Takeuchi <saeko@w3.org>, +81.466.49.1170
(언어별 보도자료 : 영어, 불어, 일본어)

추천서


--------------------------------------------------------------------------------

http://www.w3.org/ -- 2003년 1월 14일 -- 월드 와이드 웹 컨소시움 (W3C; World Wide Web Consortium)은 확장 벡터 그래픽(SVG; 이하 SVG로 표기) 1.1과 모바일 SVG 프로파일을 W3C 권고안으로 발표하였다. SVG 1.1은 SVG의 기능을 재이용 가능하도록 모듈을 분리한 것이며, 모바일 SVG는 그러한 모듈을 모바일 기기용으로 최적화한 형태로 재통합한것이다. 이들 사양이 W3C 권고안으로 발표된것은 W3C 권고안은 이 사양이 안정되고，웹의 상호운용성의 확보에 공헌하고，W3C 회원 조직에 의하여 검토되었으며，업계에 의하여 본 사양의 이용을 지지한다는 것을 의미한다.

벡터 그래픽에 모듈화를 도입한 SVG 1.1
SVG 1.1의 그래픽 기능은 2001년 9월 4일에 W3C 권고안로 되어 이미 폭넓게 이용되고 있는 SVG 1.0의 기능과 완전히 같다. 다만, 변경되는 것은 언어의 정의 방법이다. SVG 1.0에는 DTD가 하나이었으며, DTD 전체가 있어야만 했지만, SVG 1.1에서는 DTD를보다 작고 유연한 기능 모듈로 분할한 것으로 다양한 목적에따라 모듈을 조합하게 된다. SVG 워킹 그룹은 HTML 워킹그룹이 XHTML의 모듈화 할때 이용된 검증된 모듈화 기술을 이용하였다.

휴대용 단말기에서도 벡터 그래픽을 이용할 수 있도록 하는 모바일 SVG 프로파일
컬러 스크린을 갖고, 처리 능력도 향상하고, 보다 고도의 멀티미디어 기능이 제공 가능한 핸드헬드 기기나 휴대 전화에의 관심이 상당히 높아지고 있다．그것들은 아직 데스크톱 컴퓨터나 랩 톱 컴퓨터의 기능에는 미치지 못하지만, 이미 XHTML, SMIL, 그리고 SVG와 같이 웹의 표준 기술을 이용하여 표시할 수는 있다．W3C는 SVG 1.1 빌딩 블록을 다음의 두개의 프로파일 또는 완전한 SVG의 서브셋을 정의하는데 이용하고 있다.; SVG Tidy는 3세대 휴대 전화 사양의 일부로 하고 채용되는 멀티미디어가 가능한 핸드폰을 목표로 하고 있으며, SVG Basic은 핸드헬드 기기나 팜탑 컴퓨터를 위한것이다.

"데스크톱 컴퓨터를 이용할 수 없는 상황에 놓여져 있는 수많은 사람들에게 휴대 전화는 인터넷과 웹의 접속를 가능하게 한다. 일시적일지 또는 아닐지라도"라고 CSIRO로부터 W3C의 Fellow로 있는 Dean Jackson은 말하였다. "3GPP는 이미 모바일 SVG와 협력하고 있으며, 우리는 이미 3세대 휴대전화기에서 보다 충부한 내용을 볼 수 있도록 시작하였다"하고 그는 말하였다.

텍스트 메시지나 녹음된 메시지, 비트맵 로고를 송수신한 대신에，SVG Tiny는 화려한 애니메이션에 의한 멀티미디어 메시지의 송수신을 가능하게 한다. 랩 톱 컴퓨터와 씨름하거나, 공장이나 공사 현장, 병원이나 증권거래소등으로 정적으로 인쇄된 자료를 이용할 필요도 이미 있지 않다. 대신에 SVG Basic를 이용하여 무선 네트워크에 의하여 조직의 XML 데이터 웨어 하우스에 직결하고, 동적인 데이터 갱신이 가능한 휴대 정보 단말을 이용하여, 현장에서 기동적으로 활동한 풋워크가 좋은 전문가가 최신의 정보에 근거한 인터액티브하고 유익한 화상 정보를 이용한 것이 가능해졌다.

개방형 기술과 XML 컴포넌트를 통합한 SVG 1.1
W3C와 기타 다른 조직이 모듈화된 SVG 1.1 의 빌딩블록을 이용하도록 하는 방법은 빌딩블록을 결합하도록 함으로써 그것들을 다른 W3C 기술의 모듈 군과 조합시키어，보다 강력하고 통합된 솔루션을 만들어 내는 것이다. 예를 들면, SVG와 XForms의 조합을 통합여 그래픽으로 인터액티브한 입력 폼의 구축을 가능하게 하거나 SVG와 SMIL Basic의 조합으로 벡터 그래픽스와 화상이나 음성의 스토리밍과의 조합을 가능하게 하는것등이며, 나아가서는, XHTML, MathML, 그리고 SVG의 통합으로 표제나 리스트, 표를 포함한 텍스트나 수식, 인터액티브한 그래프나 도표등을 포함하여 과학적, 기술적인 커뮤니케이션을 가능하게 되는것이다.

"다른 모든 W3C 권고안과 마찬가지로, SVG는 XML，CSS, 그리고 DOM과 같은 개방적이고 이미 개발된 W3C 기술을 기반으로 하고 있다. SVG 또한 국제화나 웹접근성에 대한 요구사항을 위하여 면밀하게 검토되었으며, 기존의 기술과의 자연스러운 통합을 완성했다. 이로 인하여 어플리케이션의 능력을 최대한으로 도출할 수 있음과 동시에, 구현의 부하를 최소한으로 억제한 것을 할 수 있다."라고 SVG 워킹 그룹의 의장이며 W3C 기술 자문 위원회(TAG)의 회원인 Chris Lilley는 말하였다. 또한 그는 "오픈으로 진실로 표준에 근거한 솔루션은 그대로 투자에 대한 이익과 효과를 가져오고 있으며, 이러한 솔루션을 위한 사양은 강력하고, 확장 가능하고, 그리고 서로 효율적으로 조합하여야 가능하다"라고 말하고 있다.

운용되는 SVG 모바일
SVG로 지리적인 메타 데이터를 이용한 위치 정보에 근거한 서비스를 포함하여 SVG Mobile을 이용한 상용 서비스는 이미 운용이 시작되고 있다. SVG 워킹 그룹은 SVG 1.1 및 SVG Mobile의 구현 사례의 풍부함과, 렌더링과 상호운용성의 질에 대하여 상당히 만족하고 있다. BitFlash, CSIRO, KDDI, Nokia, ZOOMON등이 구현한 SVG Tidy, BitFlash, CSIRO, Intesis에 의하여 구현된 SVG Basic을 포함하여 2002년 11월까지 15개의 구현 사례가 테스트되었으며, 이외에도 많은 구현이 개발중에 있다.

이들 구현에 대한 상호운용성 시도의 결과로, SVG 구현은 수없이 많은 데스크탑과 랩탑 컴퓨터에 대한 구현 뿐만 아니라 휴대전화에 대한 구현, PDA에 대한 구현등을 여러 벤더들이 제공하는것이 밝혀졌다.

광범위하며 지속적인 업계의 지지를 받고 있는 SVG
SVG 워킹 그룹은 그래픽스 및 이동체 통신 업계를 리드하는 Adobe, Agfa-Gevaert N.V., America Onl　ine Inc., BitFlash, 캐논, Corel Corporation, CSIRO, Eastman Kodak, Ericsson, Expway, Hewlett-Packard, ILOG S.A., KDDI 연구소, Nokia, Openwave Systems Ltd, Quark, Savage Software, Schema Software, 샤프, Sun Microsystems Inc., ZOOMON AB등의 회사의 참가자로부터 제공된 다양한 전문적인 지식이나 기술을 통하여 운영된다. 또한 많은 조직이 SVG 1.1 및 Mobile SVG 에 대하여，이미 제품으로의 지원이나 제품에의 구현 계획을 표명하고 있습니다.

SVG에 관한 상세한 정보는 W3C의 SVG 개요 페이지를 참조하기 바란다.

월드 와이드 웹 컨소시움[W3C]에 대하여
W3C는 웹 관련 상호운영성과 기술혁신을 주도하는 프로토콜 개발 등 웹을 주도하기 위하여 창립되었다. W3C는 국제 산업 컨소시움으로 미국 MIT 컴퓨터 과학 연구소(MIT LCS), 파리에 본부를 두고 있는 유럽 정보 처리수학 연구 컨소시엄(ERCIM) 그리고 일본의 게이오 대학에서 운영되고 있다. 컨소시움은 개발자와 사용자를 위한 WWW에 관한 정보의 공급, 새로운 기술의 사용을 설명하기 위한 다양한 프로토타입과 샘플 애플리케이션 등의 서비스를 제공하고 있다. 현재까지 450여 기관들이 컨소시움의 회원으로 가입하고 있으며, 이에 대한 추가 정보는 홈페이지(http://www.w3.org/)를 참조하면 된다.

얼마전에 올린 TV용 브라우저에 관한 글에서 헝그리... 님의 댓글을 보다가 갑자기 SVG에 대해서 많이 생각해 보게 되었다. SVG는 벡터 기반의 그래픽 파일 포맷으로 XHTML과 마찬가지로 XML을 기반으로 한다. DOM 규격을 지원하기 때문에 ECMAScript등과 연동하여 상당히 재미있는 효과를 낼 수가 있다. 유명한 SVG Tetris예제만 보더라도 그 가능성을 짐작할 수가 있다.

그런데 실상은 SVG가 그렇게 활성화 되고 있지만은 않다. 문제는 역시 너무 강력한 경쟁자인 플래시. 심지어 SVG 표준을 만들고 있는 사람들마저도 SVG가 기능면에서 매크로미디어의 독자 포맷인 플래시를 앞선다는 것은 힘든 것 아니냐는 걱정이 많다. 그래서 SVG를 디자이너들한테 보여주면 "어 이거 플래시에서 다 되는 거잖아요..."라는 평가를 받고, 웹 개발자들한테 보여주면 "이거 새로운 마크업 언어를 배워야 하는거에요? 헉 이 숫자들.. 어려워요.." 라는 평가를 받는다고 한다.

하지만 SVG의 미래가 어두운 것만은 아니다. 가장 큰 요인 중 하나는 바로 모바일... 플래시가 PC 시장에 집중했던 사이에 SVG는 Mobile Profile을 개발하고 상당수 핸드폰에 퍼졌다. 물론 플래시도 현재 Flash Lite를 출시하고 모바일 시장에 도전하고 있지만 표준 포맷도 아니고, 모바일 시장 입장에서는 PC처럼 이미 너무 널리 퍼져 버린 포맷도 아닌 Flash Lite를 채택하는데 주저하는 모습이다.

하지만 저런 정치적인 이유만으로 장기적인 전망이 좋다고는 할 수 없다. 플래시보다 뛰어나야만 결국 장기적으로 생존하게될 것이기 때문이다. 바로 그런 이유 중 하나를 만드는 것이 CDF라고 생각한다. CDF는 Compound Document Format의 약자로 XHTML, SMIL, SVG, XForm, MathML등 기존 만들어진 XML 기반 언어를 복합적으로 사용하는 방법에 대한 표준을 만들어 가고 있다. 물론 기존에도 브라우저 벤더들이 일부 이러한 기능을 구현하기는 했지만 namespace 충돌 해결 방법이라던지, DOM Event 전달 방법이라던지, DOM 연동 방법이라던지 등에서 제각각이기 때문에 실용적으로 사용하기에는 문제가 많았고 그래서 W3C에서 이에대한 표준화를 하고 있는 것이다.

SVG 하나만 놓고 보면 플래시에 비해서 단지 표준이라는 점 이외에는 개발도구, 개발자의 수 등 대부분의 면에서 특별히 뛰어난 점을 찾기가 힘들다. 하지만 이것이 XHTML, SMIL, XForm등과 같이 쓰인다면 얘기가 다르다. 각 언어가 가진 장점을 결합하여 상당한 시너지 효과를 볼 수 있을 것이다. 태생적으로 XML 기반이 아닌 플래시 보다는 한차원 높은 수준의 연동을 할 수 있을 것으로 보기 때문이다. 바로 이러한 이유 때문에 Mozilla도 SVG를 플래시와 같은 플러그인 형태가 아닌 Gecko 엔진에서 Native로 지원하는 결정을 내렸을 것이다.

XHTML이 워드나 아래한글보다 문서 표현 능력이 뛰어나서 성공한게 아니듯이 SVG도 단순히 플래시보다 화려한 그래픽을 만들어 내서 성공할 것 같지는 않다. 그보다는 표준이 가지는 장점과 더불어 기존 XML 기반 언어 및 브라우저 기반 콘텐트와의 시너지 효과가 중요하다.

http://www.w3.org/TR/SVG11/
http://beyondweb.egloos.com/969998
http://www.croczilla.com/svg/samples/svgtetris/svgtetris.svg
http://www.w3.org/2004/CDF/
http://www.mozilla.org/projects/svg/