[D3.js] D3.js SVG

SVG 역사

2001년에 W3C에서 정식으로 사양으로 권고하였으며 옛날부터 브라우저에서 표시할 수 있었다. 그러나 옛날에는 플러그인이라는 형식으로 표시되었어 지금과 같이 손쉽게 다룰 수 없었다.

2014년 시점에 브라우저 대부분이 SVG를 지원하므로 플러그인 없어도 삽입된 SVG 요소를 다룰 수 있었다.

인터넷 익스플로러는 버전9 이후부터 지원하며 스마트폰의 모바일 사파리나 구굴 크롬도 SVG를 지원하고 있다.

SVG(Scalable Vector Graphics)

SVG는 벡터를 기반으로한 그래픽을 그리는데 사용하는 마크업 언어의 하나이다.

마크업 언어라고 하면 HTML, XML이 유명하다. SVG는 XML의 한 종류이므로 XML 문법을 그대로 이용할 수 있다.

SVG는 HTML과 마찬가지로 스타일시트를 사용할 수 있다. 즉 CSS를 사용해 D3.js로 생성한 그래프의 스타일을 지정할 수 있다.

D3.js에서 볼 수 있는 그래프는 SVG로 구현한 것이다. D3.js 자체에는 그래픽을 그리는 기능이 없다. HTML 페이지에 배치되어 생성되는 SVG 요소를 조작하여 다양한 표현을 구현하게 된다. SVG를 사용해 거리에서 흔히보는 포스터나 광고 디자인 등 거의 모든 것을 표현할 수 있다.

벡터 기반의 SVG

SVG는 벡터를 기반으로 그래프를 그린다.

벡터를 기반으로 한다는 것은 좌표를 조합하여 그리는 방식을 말한다. 벡터 기반과 대조적으로 픽셀 기반이 있다. 어도비 포토샵 등 그래픽을 점의 조합으로 다루는 방식이다. 벡터 기반은 작은 데이터로도 도형을 그릴 수 있으며 해상도가 바뀌거나 도형을 확대해도 선이 깨끗하게 표시된다.

다만 단점이 있다. 복잡한 도형이라면 좌표가 많아져 표시하는데 시간이 걸린다.

그럼에도 픽셀기반은 보통 해상도의 그림과 고해상도의 그림 두 가지를 준비해야하나 SVG라면 해상도에 관계없이 하나의 데이터로 이 모두에 대응할 수 있다.