HTML5_html5 튜토리얼 기술에서 Canvas와 SVG 간의 그리기 원리 비교

캔버스와 SVG 모두 브라우저에서 그림을 그릴 수 있지만 기본 원칙은 다릅니다.
SVG
SVG는 2차원 그래픽을 XML로 기술하는 언어입니다.
SVG는 XML을 기반으로 합니다. 즉, SVG DOM 내에서 모든 요소를 ​​사용할 수 있습니다. 각 요소에 대해 JS 이벤트 핸들러를 추가할 수 있습니다.
SVG에서는 각 그래픽이 객체로 기록됩니다. SVG 개체의 속성이 변경되면 브라우저는 자동으로 그래픽을 다시 생성할 수 있습니다.

캔버스
캔버스는 2D 그래픽을 즉시 그릴 수 있습니다(JS 사용).
캔버스는 픽셀 단위로 재생성할 수 있습니다.

캔버스에서는 그래픽이 완성되면 브라우저에서 잊어버립니다. 그래픽의 위치를 ​​변경하려면 그래픽에 가려진 개체를 포함하여 전체 화면을 다시 그려야 합니다.

캔버스와 SVG 비교
다음 표는 캔버스와 SVG의 주요 차이점을 보여줍니다.

Canvas	SVG
依赖分辨率	独立于分辨率
不支持事件处理器	支持事件处理器
弱文本渲染能力	最适合具有大渲染面积的应用（谷歌地图）
可以保存最终图片为PNG或者JPG	复杂图像，重画变慢（任何使用DOM很多的情况都会变慢）
最适合许多 对象频繁重画的图形游戏	不适合游戏应用