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 中的
<text></text>、<use></use>、CSS 样式、事件监听器全部消失 - 缩放时 Canvas 输出是像素拉伸，文字边缘发虚，而原生 SVG 文字始终清晰
- 如果 SVG 含
<foreignobject></foreignobject>或外部 CSS，转图前必须内联样式，否则渲染为空白 - 某些浏览器（如 Safari）对非同源 SVG 转 canvas 会触发
SecurityError
Canvas 导出为 SVG 只能近似还原，且仅适用于简单路径
没有标准 API 能把 Canvas 绘制内容“反编译”成 SVG。可行路径只有两种：
