HTML5 - Canvas Vs. SVG

HTML5 Canvas Vs. SVG

Canvas와 SVG는 둘다 웹페이지에서 그림을 그리기 위한 도구이지만 그 둘은 근본적으로 다릅니다.

SVG

SVG는 XML로 2D그래픽을 설졍하기 위한 언어입니다.

SVG는 XML기반이며 이 뜻은 모든 element를 SVG DOM과 함께 사용할 수 있다는 것입니다.

여러분은 element에다가 JavaScript 이벤트 핸들러를 붙일 수 있습니다.

SVG에서는 각각 그려진 모양이 객체에 기억되어져 있습니다. 만약 SVG 객체의 속성이 바뀌면

브라우저는 그 즉시 새로 그립니다.

Canvas

Canvas는 즉시 2D 그래픽을 그립니다.(JavaScript를 이용하여)

Canvas는 픽셀단위로 그림을 그립니다.

Canvas에서 한번 그림이 그려지게 되면 브라우저에 의해 잊혀지게 됩니다. 만약 위치가 바뀌면

새로 그려야 되는 수고가 필요합니다.

Canvas와 SVG비교

아래 테이블은 Canvas와 SVG간 주요 차이점입니다.

Canvas

SVG

1. 해상도 의존적
2. Event Handler를 지원하지 않음.

3. 좋지않은 텍스트 렌더링.

4. 결과를 png나 jpg로 저장 가능.

5. 많은 객체가 자주 다시 그려져야 함으로 그래픽 집약적 게임에 적합.

1. 해상도에 독립적.
2. Event Handler 지원.
3. 거대한 렌더링이 필요한 어플리케이션에 적합(Google Maps)
4. 복잡해질 경우 렌더링 속도가 느림.
5. 게임 어플리케이션으로 부적합.

하쿠나마타타