SVG 和 Canvas

Canvas 和 SVG 都允许您在浏览器中创建图形，但它们在根本上是不同的。

Canvas

  • 位图，依赖分辨率。
  • 一旦绘制完成，浏览器不再保留图形引用；只能整体重绘，无法单独修改某个元素。
  • 适合：像素级图像处理、游戏、复杂动画、频繁重绘场景。
const cvs = document.getElementById('c');
const ctx = cvs.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

SVG

  • 可缩放矢量图形，不依赖分辨率。
  • 每个图形都是 DOM 节点，可以通过 CSS/JS 直接操作、可绑定事件、可被搜索引擎读取。
  • 适合：图标、地图、图表（ECharts/AntV）、需要响应用户交互的静态/少量动画场景。
<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="green" />
</svg>

对比

维度CanvasSVG
类型位图矢量
分辨率依赖不依赖
DOM 节点单个 ，内部靠像素每个图形都是 DOM 节点
事件绑定需手动坐标命中原生支持
重绘整体重绘可局部更新
适合游戏、图像处理、粒子动画图标、地图、图表
性能元素多时性能下降元素极多时性能下降

来源整理自：vue3js.cn 面试官系列