目录
一、标准面试回答
二、原理区别
1. Canvas
示例
2. SVG
示例
三、最核心区别对比
四、渲染方式不同
Canvas：立即模式绘制
SVG：保留模式绘制
五、性能区别
1. Canvas 性能特点
适用场景
2. SVG 性能特点
适用场景
六、缩放区别
Canvas
SVG
七、事件处理区别
Canvas
SVG
八、动画区别
Canvas 动画
SVG 动画
九、开发和维护上的区别
Canvas
优点
缺点
SVG
优点
缺点
十、常见应用场景
Canvas 适合
SVG 适合
十一、一个更容易记的类比
十二、面试高分回答模板
十三、简洁背诵版
十四、一句话总结
这是前端面试里的高频题。
最核心的一句话可以先记住：
Canvas 是位图，SVG 是矢量图。
如果你先把这句说出来，面试官一般会继续追问性能、适用场景、事件处理这些点。
一、标准面试回答
Canvas和SVG都可以用来绘制图形，但它们的原理不同：
Canvas是基于像素的位图绘制，适合频繁重绘、大量图形、动画和游戏场景SVG是基于 XML 的矢量图，图形以 DOM 节点形式存在，适合图标、流程图、地图等需要缩放和交互的场景简单说：
- Canvas 更适合高频动态绘制
- SVG 更适合静态图形和结构化图形
二、原理区别
1. Canvas
Canvas是一个画布。
你通过 JavaScript 调用 API，在这块画布上按像素绘制内容。
一旦画上去，浏览器并不会把每个图形当成独立 DOM 元素保存。
也就是说：
- 画完之后只是“结果”留在画布上
- 图形本身不是 DOM 节点
- 想改某个图形，通常需要重新绘制
示例
<canvas id="cvs" width="200" height="200"></canvas>const canvas = document.getElementById('cvs') const ctx = canvas.getContext('2d') ctx.fillStyle = 'red' ctx.fillRect(20, 20, 100, 100)2. SVG
SVG本质上是 XML 描述的矢量图。
每个图形，比如圆、矩形、路径，都是独立标签，也可以看成 DOM 节点。
也就是说：
- 图形是结构化的
- 每个元素都能单独操作
- 放大缩小不会失真
示例
<svg width="200" height="200"> <rect x="20" y="20" width="100" height="100" fill="red" /> </svg>三、最核心区别对比
| 对比项 | Canvas | SVG |
|---|---|---|
| 图形类型 | 位图 / 像素图 | 矢量图 |
| 是否依赖分辨率 | 是 | 否 |
| 放大是否失真 | 会失真 | 不会失真 |
| 图形是否是 DOM 元素 | 不是 | 是 |
| 修改单个图形 | 不方便，通常重绘 | 方便，直接改节点 |
| 事件处理 | 需要手动计算命中区域 | 可直接绑定事件 |
| 适合场景 | 动画、游戏、图表、大量数据绘制 | 图标、地图、流程图、可交互图形 |
四、渲染方式不同
Canvas：立即模式绘制
Canvas 更像“拿画笔在纸上画”。
- 调一次 API，就画一次
- 画完后图形本身不会保留结构信息
- 要更新内容，通常整个区域重新绘制
所以它适合：
- 连续动画
- 频繁刷新
- 高性能绘图
SVG：保留模式绘制
SVG 更像“页面里真的有这些图形元素”。
- 每个图形都有自己的标签
- 浏览器知道谁是谁
- 可以直接改属性、改样式、加动画、绑事件
所以它适合：
- 图形结构明确
- 交互较多
- 缩放需求高
五、性能区别
这是面试里很容易被追问的重点。
1. Canvas 性能特点
Canvas 通常更适合：
- 图形数量很多
- 频繁重绘
- 动画帧更新快
因为它不需要维护大量 DOM 节点。
适用场景
- 小游戏
- 粒子动画
- 实时曲线
- 大数据量图表
2. SVG 性能特点
SVG 在图形数量不多时非常方便，开发体验也好。
但如果页面里有几千几万个 SVG 节点，DOM 会变得很重，性能可能下降。
适用场景
- logo
- icon
- 流程图
- 组织结构图
- 地图
- 少量可交互图形
六、缩放区别
Canvas
Canvas 是位图。
如果画布尺寸固定，放大后会模糊、失真。
想让它高清，通常要处理：
- 画布分辨率
- 设备像素比
devicePixelRatio
SVG
SVG 是矢量图。
- 可以任意缩放
- 放大后仍然清晰
- 特别适合高分屏和图标场景
七、事件处理区别
Canvas
Canvas 里的图形不是 DOM，所以不能直接：
- 给某个圆绑定点击事件
- 给某个矩形加 hover
如果想实现交互，通常要：
- 监听整个 canvas 的鼠标事件
- 自己计算鼠标点到了哪个区域
这会更复杂。
SVG
SVG 每个图形本身就是元素，可以直接绑定事件：
<svg width="200" height="200"> <rect id="box" x="20" y="20" width="100" height="100" fill="red" /> </svg>document.getElementById('box').addEventListener('click', () => { alert('clicked') })所以 SVG 在交互开发上更直观。
八、动画区别
Canvas 动画
Canvas 做动画通常依赖 JS，不断清空再重绘：
function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height) // 重新绘制 requestAnimationFrame(draw) } draw()适合：
- 帧动画
- 游戏动画
- 粒子效果
SVG 动画
SVG 可以通过：
- CSS 动画
- JS
- SMIL（部分场景）
来实现图形动画。
适合：
- 简单路径动画
- 图标动画
- 结构化动画
九、开发和维护上的区别
Canvas
优点
- 绘制性能好
- 适合复杂、动态、连续图形
- 非常适合游戏和可视化
缺点
- 不方便单独操作某个图形
- 可维护性相对低
- 无障碍和 SEO 支持弱
SVG
优点
- 结构清晰
- 每个元素可单独控制
- 方便加事件、加样式、加动画
- 缩放不失真
缺点
- 节点多时性能差
- 不适合超高频大规模重绘
十、常见应用场景
Canvas 适合
- 游戏
- 画板
- 粒子特效
- 实时监控图表
- 海量数据可视化
- 高频动画
SVG 适合
- icon 图标
- logo
- 地图
- 流程图
- 组织架构图
- 可编辑图形
- 需要缩放不失真的图形
十一、一个更容易记的类比
你可以这样理解：
- Canvas 像在纸上作画，画完就只是结果
- SVG 像搭积木，每一块都还在，可以单独拿出来改
这个类比在记忆上很好用。
十二、面试高分回答模板
Canvas和SVG的核心区别在于：Canvas是基于像素的位图绘制，SVG是基于 XML 的矢量图。
Canvas适合高频重绘和复杂动画场景，比如游戏、画板、实时图表，因为它不需要维护大量 DOM 节点，性能更适合连续绘制；SVG中每个图形都是独立的 DOM 元素，方便绑定事件、修改样式和缩放，且放大不会失真，所以更适合图标、流程图、地图这类结构化图形。简单说，动态高频绘制选 Canvas，静态可交互图形选 SVG。
十三、简洁背诵版
Canvas：位图，基于像素，适合动画和高频重绘SVG：矢量图，基于 DOM，适合图标和可交互图形Canvas放大会失真，SVG不会Canvas修改图形通常要重绘，SVG可以直接操作节点
十四、一句话总结
Canvas 更适合“画”，SVG 更适合“描述图形”。
