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 기술 이벤트와 웹캐스트.