一张表看懂 Canvas 与 SVG 怎么选
55
0
0
| 关注维度 | Canvas（位图） | SVG（矢量） |
|---|---|---|
| 怎么画 | JavaScript 逐像素刷 | XML 声明图形，DOM 即图形 |
| 缩放 | 放大糊，缩小采样失真 | 无限放大依然锋利 |
| 事件交互 | 只能监听画布整体，自己算坐标 | 每个图形都是 DOM，直接绑点击、悬停 |
| 重绘成本 | 擦了重刷，越快越好 | 改单个属性即可，元素多时 DOM 开销大 |
| 性能瓶颈 | 画面尺寸 & 刷新频率 | 元素数量 > 千级后掉帧 |
| 文本、SEO | 文字变像素，难选中 | 原生文本，可被搜索、朗读 |
| 导出 | toDataURL() 一键出 PNG/JPG | 可复制 SVG 代码，或转 Base64 |
| 文件体积 | 代码短，生成内容越大越占内存 | 纯文本，路径复杂会膨胀 |
一句话场景速配
- 做游戏、粒子、实时视频特效 → Canvas，60 fps 不心疼
- 画图标、Logo、可缩放地图/图表 → SVG， retina 屏直接满分
- 图形需随数据频繁改样式、绑事件 → SVG，改属性就行
- 元素数量破万、每秒重绘几十次 → Canvas，避免 DOM 爆炸
混合打法也常见
UI 外壳、按钮、数据点用 SVG，跑着顺；
高频动画层叠在上方 <canvas>，性能稳。
两者叠一起，各司其责，才不会“用锤头拧螺丝”。
记住口诀：
“能矢量就矢量，要狂刷才位图”——选型不再纠结。
0
快来点个赞吧
发表评论
评论列表