SVG와 Canvas 간단 비교

SVG와 Canvas의 차이

 

SVG (Scalable Vector Graphics)

 

 
SVG는 확장 가능한 벡터 그래픽라는 의미를 갖고있다.
이름 그대로 해석하면 커졌다 작아졌다해도 멀쩡한 벡터 (Vector) 이미지이다.
즉, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 말한다.
 

 
일반적인 이미지 파일인 JPG, PNG는 비트맵 이미지 파일 형식이라 크기에 따라 품질 저하가 발생한다.
반면에 Vector는 기하학적 정보와 계산에 의한 이미지이다.... (아무튼 수학적이다.)
이러한 벡터 이미지는 크기나 해상도를 변경해도 그냥 다시 계산을 하면 되기 때문에 품질 저하가 없다.
또한 크기를 키워도 데이터 양은 바뀌지 않는다.
 
이런 큰 장점이 있지만...
사실 복잡한 이미지는 오히려 더 무거워질 수 있어서 만능은 아니다.
 
SVG는 이러한 Vector를 웹페이지에서 사용하기 위한 표준이다.
아이콘이나 간단한 그림에 사용되고 있다.
또한 SVG는 XML 기반의 형식이다.
자세히 보면 title태그, path태그 등 코드로 이루어져 있음
자바스크립트, CSS를 이용해서 조작한다.
 

Canvas

SVG는 Canvas와 비교되곤 한다.
Canvas는 비트맵 기반의 그래픽이다.
픽셀을 조작하며 단일 canvas 태그로만 이루어져있다.
자바스크립트를 이용해서 조작하며 CSS 조작은 불가하다.
픽셀 단위로 조작이 가능해서 다양한 표현들이 가능하지만 까다롭고 개빡세고, 크기가 커질수록 성능이 떨어진다.
 

SVG	Canvas
벡터 기반	픽셀, 비트맵 기반
다중 그래픽 요소	단일 HTML요소
자바스크립트, CSS 조작	오직 자바스크립트 조작
정적 이미지, 고품질 문서에 유리	애니메이션, 동영상 작업에 유리