Canvas 与 SVG 如何选择？
先理解原理和示例，再练习完整口述与追问。
回答要点
Canvas 位图即时绘制；SVG 矢量元素树；缩放、命中、节点数、可访问性与更新频率共同决定方案。
原理拆解
Canvas 通过绘图 API 在位图上绘制，浏览器不会为每个画出来的图形自动保留一个 DOM 元素。它适合大量对象、高频刷新、游戏、图像处理等场景，但命中检测、对象管理、局部更新和无障碍支持通常需要应用额外实现；高分屏还需匹配画布实际分辨率。
SVG 用矢量描述图形，每个图形通常是可访问、可设样式和绑定事件的元素。它缩放清晰，适合图标、结构图和中小规模可交互图表；节点特别多、频繁修改属性时，DOM、样式计算和绘制成本可能增大。不能简单说“Canvas 一定更快”，要结合图形数量、刷新频率、命中需求、设备性能和实现方式测量。
大量图元可以考虑 Canvas 或 WebGL，少量需要独立语义、清晰缩放的图元优先 SVG，也可以组合使用。Canvas 需要提供替代文本、DOM 控件或表格等可访问入口，SVG 也需要正确标题、描述、焦点与语义。截图导出还要考虑跨域资源导致画布污染、字体与图片加载完成等问题。
示例与推演
几十个需要独立 hover、焦点与语义的流程节点可优先 SVG；数万粒子每帧整体刷新可优先评估 Canvas/WebGL。若仅改变少量节点，SVG 的局部更新可能很合适；Canvas 每个图形的命中与状态通常需要自己维护。用真实图元数量与刷新频率做原型测量。
易错点
SVG 也可能携带脚本或外部引用，展示不可信 SVG 仍需安全处理。Canvas 画出的文字不自动具有等同 DOM 文本的可访问性。
参考回答可直接练习口述
Canvas 通过绘图 API 在位图上绘制，浏览器不会为每个画出来的图形自动保留一个 DOM 元素。它适合大量对象、高频刷新、游戏、图像处理等场景，但命中检测、对象管理、局部更新和无障碍支持通常需要应用额外实现；高分屏还需匹配画布实际分辨率。