面试题：Canvas 和 SVG 适用场景？矢量与位图？

SVG

• 矢量，DOM 节点描述图形，可缩放不失真。
• 易 CSS/JS 操作单元素、做动画与交互；图标、图表（D3 等）常见。
• 节点多时** DOM 过重**可能影响性能。

Canvas

• 位图画布，像素栅格，API 命令式绘制。
• 适合游戏、大数据点、视频帧处理、图像像素级操作。
• 缩放易糊（位图特性）；不可像 SVG 那样单个形状当 DOM 节点维护（除非再封装）。

面试一句话

结构少、要 DOM 事件：偏 SVG；像素绘制、性能优先的大量图形：偏 Canvas。