SVG : Scalable Vector Graphics

 

- 검색일 : 2023년 02월 24일 - 04시 58분

- 검색이유 : 데이터 시각화 관련 d3.js 와 chart.js를 알아보던 중에 두 라이브러리의 차이가 궁금해서 찾아봄

---

 

Chart.js는 캔버스 기반이고 d3.js는 주로 SVG를 사용한다는 점의 차이

캔버스 기반 그래픽과 SVG는 모두 웹 기술에서 사용되는 그래픽 표현 방식 중 두 가지입니다. 둘 다 JavaScript를 사용하여 그래픽 요소를 생성하고 조작할 수 있습니다.

캔버스 기반 그래픽은 HTML5 Canvas 요소를 사용하여 그림을 그리는 방식입니다. Canvas는 빈 도화지와 같은 역할을 하며, JavaScript를 사용하여 Canvas 상에 그래픽을 그립니다. 그래픽 요소를 생성하고 수정할 때, Canvas의 2D 그래픽 컨텍스트를 사용합니다. 이 방식은 픽셀 단위로 그림을 그리기 때문에, 그래픽이 렌더링될 때 비트맵 이미지로 변환됩니다. 따라서, 그래픽의 크기를 조정할 때, 브라우저는 이미지를 다시 렌더링해야 하므로 성능 저하의 가능성이 있습니다.

반면, SVG는 벡터 기반 그래픽으로서 XML 기반의 마크업 언어로 구성됩니다. SVG 요소를 사용하여 그래픽을 그리며, JavaScript를 사용하여 SVG 요소를 조작할 수 있습니다. 벡터 그래픽은 렌더링될 때 비트맵 이미지가 아니라, 그래픽의 수학적 표현을 렌더링합니다. 따라서, 그래픽의 크기를 조정해도 이미지가 희미해지거나 픽셀화되는 일이 없습니다. 또한, SVG 요소는 CSS와 함께 사용될 수 있으므로 그래픽 요소에 대한 스타일링이 용이합니다.
Chart.js는 Canvas를 기반으로 구성되어 있으며, d3.js는 SVG를 사용합니다. 따라서, Chart.js는 Canvas의 2D 그래픽 컨텍스트를 사용하여 그래픽을 그리고, d3.js는 SVG 요소를 사용하여 그래픽을 그립니다. 각 라이브러리는 각각의 방식을 사용하여 그래픽을 그리고 조작하기 때문에, 각각의 장단점이 있습니다.

 

SVG 약자는?

SVG는 Scalable Vector Graphics의 약자입니다. XML 기반의 벡터 그래픽 형식으로, 크기를 조정하더라도 이미지가 흐리거나 픽셀화되지 않는 특징을 가지고 있습니다. 따라서, 다양한 크기의 화면에서 일관된 이미지를 제공할 수 있으며, 모바일 기기와 같이 작은 화면에서도 높은 해상도의 이미지를 표시할 수 있습니다. SVG는 그래픽, 차트, 아이콘, 로고 등 다양한 종류의 이미지를 만들기에 적합합니다. 또한, CSS와 함께 사용하여 이미지에 대한 스타일링이 용이하고, JavaScript를 사용하여 그래픽 요소를 동적으로 조작할 수 있습니다. 이러한 특징들로 인해, SVG는 웹과 모바일 애플리케이션에서 그래픽 표현에 널리 사용되고 있습니다.

 

---