Canvas与SVG本质区别在于渲染模型不同：Canvas是位图绘制API，适合高频重绘；SVG是矢量标记语言，适合结构化、可交互图形。二者不可简单互替，选型应基于操作主体与场景需求。
Canvas 与 SVG 的本质区别不是“格式新旧”，而是渲染模型不同
很多人以为 canvas 是 HTML5 新推的“替代 SVG”的方案，其实完全误解了。Canvas 是位图（raster）绘制 API，SVG 是矢量（vector）标记语言——它们解决的问题根本不同。Canvas 适合高频重绘（如游戏、实时图表），SVG 适合结构化图形（如图标、交互式地图、可缩放 UI 元素）。强行互转不光损失精度，还常引入不可逆的模糊或 DOM 膨胀。
把 SVG 转成 Canvas 图像会丢失交互和缩放能力
常见做法是用 ctx.drawImage(svgElement, ...) 或先转为 data:URL 再绘制。但注意：
- SVG 中的
、CSS 样式、事件监听器全部消失 - 缩放时 Canvas 输出是像素拉伸，文字边缘发虚，而原生 SVG 文字始终清晰
- 如果 SVG 含
- 某些浏览器（如 Safari）对非同源 SVG 转 canvas 会触发
SecurityError
Canvas 导出为 SVG 只能近似还原，且仅适用于简单路径
没有标准 API 能把 Canvas 绘制内容“反编译”成 SVG。可行路径只有两种：
- 手动记录所有
ctx.moveTo()、ctx.lineTo()等调用，运行时生成 - 用第三方库如
canvas2svg（已停止维护）或roughjs的 SVG 导出模式，但它们不支持阴影、渐变、图像填充等 Canvas 特性 - 若 Canvas 内容含
ctx.drawImage()的图片或滤镜效果，无法映射到 SVG，导出结果必然缺失
选型关键看“谁要操作图形”：用户？脚本？还是设计师？
如果你需要用户点击某个齿轮图标触发弹窗，选 SVG；如果要每秒画 60 帧粒子动画，选 Canvas。混合使用反而更常见：
立即学习“前端免费学习笔记（深入）”；
- 用 SVG 做 UI 框架（按钮、图例），Canvas 叠在上面画动态数据流
- 用
SVGElement.getBoundingClientRect()获取坐标，再传给canvas做精准命中检测 - 导出功能中，SVG 用于高清打印（PDF/InDesign），Canvas 用于分享截图（PNG/JPEG）
真正容易被忽略的是：Canvas 的 DPI 适配（devicePixelRatio）和 SVG 的 viewBox 单位系统混用时，尺寸错位极难调试。
