캔버스와 SVG 모두 브라우저에서 그림을 그릴 수 있지만 기본 원칙은 다릅니다.
SVG
SVG는 2차원 그래픽을 XML로 기술하는 언어입니다.
SVG는 XML을 기반으로 합니다. 즉, SVG DOM 내에서 모든 요소를 사용할 수 있습니다. 각 요소에 대해 JS 이벤트 핸들러를 추가할 수 있습니다.
SVG에서는 각 그래픽이 객체로 기록됩니다. SVG 개체의 속성이 변경되면 브라우저는 자동으로 그래픽을 다시 생성할 수 있습니다.
캔버스
캔버스는 2D 그래픽을 즉시 그릴 수 있습니다(JS 사용).
캔버스는 픽셀 단위로 재생성할 수 있습니다.
캔버스에서는 그래픽이 완성되면 브라우저에서 잊어버립니다. 그래픽의 위치를 변경하려면 그래픽에 가려진 개체를 포함하여 전체 화면을 다시 그려야 합니다.
캔버스와 SVG 비교
다음 표는 캔버스와 SVG의 주요 차이점을 보여줍니다.
| Canvas | SVG |
| 依赖分辨率 | 独立于分辨率 |
| 不支持事件处理器 | 支持事件处理器 |
| 弱文本渲染能力 | 最适合具有大渲染面积的应用（谷歌地图） |
| 可以保存最终图片为PNG或者JPG | 复杂图像，重画变慢（任何使用DOM很多的情况都会变慢） |
| 最适合许多 对象频繁重画的图形游戏 | 不适合游戏应用 |
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
