웹에서의 그래픽 다루기 (1편 : HTML5 SVG 소개)

웹에서의 그래픽 다루기 (1편 : HTML5 SVG 소개)

1. SVG 란?

W3C (World Wide Web 컨소시엄) 의 권장 사항인 SVG (Scalable Vector Graphics) 는 XML 에서 2차원 그래픽을 설명하기 위한 언어로 웹 페이지에 표시할 빠르고 가벼운 그래픽을 만들기 위해 사용할 수 있는 매우 효과적인 도구입니다.

2. SVG 사용 예

SVG를 잘 활용한다면 그림의 설명 상자와 같은 간단한 작업부터 게임까지 다양한 분야에서 사용 할 수 있습니다. 특히 근래 데이터 시각화가 이슈화 되고 있는 시점에서 SVG는 차트나 다이어그램, 지도 등을 구현하는데 아주 유용하게 쓰일 수 있습니다.

* 아래 링크는 SVG를 잘 활용한 사례로 참고하시면 좋을 것 같습니다. 

 

3. Browser Support 

 

 

W3C 에서는 SVG를 지원하는 브라우저의 버전을 위와 같이 나타내고 있습니다. 국내의 경우 오른쪽의 파이차트에서 보이는 것과 같이 IE8 의 점유율이 높은 비율을 차지하고 있지만 아쉽게도 SVG는 IE8 을 지원하지 않습니다. 하지만 IE8 이하 버전에서 VML 로 변환하는 오픈 소스 라이브러리인 Raphael.js를 이용하면 IE8에서도 문제 없이 SVG를 표현할 수 있습니다. 뿐만 아니라 벡터 그래픽 작업을 간단히 할 수 있는 다양한 기능을 제공하기 때문에 잘 활용한다면 매력적인 라이브러리가 될 것 입니다. Raphael.js에 대한 좀 더 상세한 내용은 다음 포스팅에서 다뤄볼 예정입니다.

chart by

 

http://www.webponent.com/main/webponentChart/index 

4. SVG vs Canvas

HTML은 보다 풍부하고 나아진 표준 그래픽을 제공하도록 발전하고 있습니다. 개발자들 역시 전문화된 기술을 이용하여 사용자에게 더 좋은 환경을 제공하기 위해 많은 노력을 합니다. 이러한 상황에서 SVG는 Canvas와 함께 그래픽 처리를 담당해 왔습니다. 사실 SVG와 Canvas를 모두 다뤄본 입장이라면 적어도 한번쯤은 어느 것을 사용해야 할지 고민해 봤을 것입니다. SVG와 Canvas는 웹에서 그래픽 처리를 하는 공통점을 가지고 있지만 전혀 다른 방식으로 그래픽 처리를 하기 때문에 서로 다른 장단점을 가지고 있습니다.

 

 

Canvas 와 SVG 의 주요 차이점

	Canvas	SVG
이미지 처리방식	비트맵	벡터
DOM	존재하지 않음   DOM 컨트롤이 불가능	존재함   외부 스크립트로 각 개체를 컨트롤   가능
외부 이미지 편집	비트맵 이미지 편집 용이	벡터 이미지 편집 용이
성능	높은 이미지 해상도를 가진 이미지를   사용하면 성능이 저하됨	이미지가 복잡해질수록 마크업이    복잡 해지고 성능이 저하됨
애니메이션	애니메이션 API가 없기 때문에    외부 스크립트의 타이머 등 사용	높은 수준의 애니메이션 지원
적합한 서비스	그래프 구현, 게임	그래프 구현, 매우 세밀한 해상도를    지원하는 UI, 애플리케이션
적합하지 않은 서비스	독립 애플리케이션 UI	게임

위의 표에서 보시는 바와 같이 Canvas 는 작은 화면, 많은 수의 개체, 전체적으로 많은 부분이 변경되어야 할 때 사용하는 것이 적합하며, SVG 는 넓은 화면, 적은 수의 개체, 확대 또는 개체의 변형이나 애니메이션 효과가 필요한 경우에 적합합니다.

Canvas 와 SVG 의 렌더링 속도 비교

Chart by http://www.webponent.com/main/webponentChart/index

픽셀 단위로 그리는 Canvas의 경우 화면의 크기가 커질수록 화면을 구성하는 픽셀이 많아지기 때문에 성능이 저하되기 시작합니다. 이와 다르게 SVG는 DOM에 추가하는 개체가 많아 질수록 성능이 저하됩니다.

Canvas와 SVG는 서로 다른 장단점을 가지고 있으므로 사용 환경을 고려하여 보다 적합한 것을 선택하는 것이 중요하다고 볼 수 있습니다. 

 

5. 마치며

 

지금까지 SVG에 대해서 간단하게 접해 보았습니다. 앞으로의 포스팅에서는 SVG 사용법과 프로젝트에 참여하면서 얻은 노하우를 예제를 통해 알아볼 예정이며, 앞서 언급했던 Raphael.js 에 대해서도 작성하도록 하겠습니다.

참고

http://www.nextree.co.kr/p9307/

 

http://copyrightdj.tistory.com/194