标准答案
- canvas 通过脚本在画布上绘制像素，绘制完成后图形本身不是 DOM 节点。
- svg 用 XML/DOM 描述矢量图形，每个图形元素都可以被选择、绑定事件和用 CSS 控制。
- canvas 适合大量点线、游戏、图片处理、粒子动画和高频重绘。
- svg 适合图标、流程图、低到中等复杂度图表、可缩放图形和需要无损缩放的场景。
- canvas 的可访问性和事件命中需要额外实现，svg 的节点语义和样式控制更直接。
题目解析
核心差异是 retained mode 和 immediate mode。SVG 保留图形结构，canvas 只保留像素结果。
选型时看图形数量、交互粒度、缩放质量、可访问性和重绘频率。
代码示例
SVG 元素可以直接成为可样式化和可交互的节点。
HTML
<svg viewBox="0 0 100 100" aria-label="完成进度">
<circle cx="50" cy="50" r="40" fill="none" stroke="#35ad72" />
</svg>
<canvas width="100" height="100"></canvas>常见误区
- 认为 canvas 一定比 svg 性能好，忽略图形数量和交互方式。
- 用 canvas 做少量图标，反而增加适配和可访问性成本。
- 用 svg 渲染海量图形节点，导致 DOM 和样式计算压力过大。