SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？
程序员文章站
2022-05-04 21:21:45
...
回复内容：
Canvas是使用JavaScript程序绘图(动态生成)，SVG是使用XML文档描述来绘图。从这点来看：SVG更适合用来做动态交互，而且SVG绘图很容易编辑，只需要增加或移除相应的元素就可以了。
同时SVG是基于矢量的，所有它能够很好的处理图形大小的改变。Canvas是基于位图的图像，它不能够改变大小，只能缩放显示；所以说Canvas更适合用来实现类似于Flash能做的事情(当然现在Canvas与Flash相比还有一些不够完善的地方)。
关于最后一点二者谁更有前途：从上面我们可以知道二者是有不同用途的，作为一个开发者，你应该做的是理解应用程序的具体需求并选择正确的技术来实现它。
这两种技术都搞过，几年前写过SVG，最近研究Canvas，两者各有各的适用范围：
Canvas适用场景
Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制
SVG适用场景
SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景
下面的内容引自：HTML5之图形绘制技术（Canvas Vs SVG）
Canvas和SVG是HTML5中主要的2D图形技术，前者提供画布标签和绘制API，后者是一整套独立的矢量图形语言，成为W3C标准已经有十多年(2003.1至今)，总的来说，Canvas技术较新，从很小众发展到广泛接受，注重栅格图像处理，SVG则历史悠久，很早就成为国际标准，复杂，发展缓慢（Adobe SVG Viewer近十年没有大的更新）
Canvas vs SVG
SVG与Canvas主要特点
根据两者的不同特点，Canvas和SVG有各自的适用范围
Canvas适用场景
Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制
SVG适用场景
SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景
对于开发人员而言，最直观的区别在于：1.对于画在Canvas上的部件，你需要处理重绘。而SVG则不用，你修改svg dom则系统会自动帮你重绘
2.Hittest，即canvas不负责帮你侦测鼠标/触摸事件发生在哪一个图形元件上；而svg可以。
3.Canvas效率高得多
如果还不够直观，可以找一些类比：
canvas的工作方式就像传统的2d图形引擎比如GDI；而SVG的工作方式更像WPF(XAML)、HTML/CSS这类由标记控制的绘图引擎 存在意味着合理 不如问两者分别适合什么场景 canvas是个像素库 绘制完了基本不记录过程 更快 svg建立了一大堆可交互对象 本性长于交互 但性能会弱些 但这种界限也在被一些js库打破 如fabric.js 以及百度林峰的zRender 这些库在canvas上构建一层mvc层 可以如svg一样操作和交互 性能上往往比原生svg要好一些 正如此 在基于zRender的可视化库可以绘制数万个点 倘使用svg 早挂了。而webgl-canvas实时绘点是百万级的 所以看你的场景 如果pc端强交互少元素 svg胜出 | pc端弱交互而强性能 用canvas | pc端超强性能 webgl-canvas | 移动端弱交互 原生canvas挺好（木有ie的世界真好） | 移动端强交互 刚才提到的一些基于canvas的库不错（svg性能很挫） sorry这是个设备和需求的二维表 偷懒了。 个人的经验 有误请拍 http://msdn.microsoft.com/zh-cn/library/ie/gg193983(v=vs.85).aspx Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
以canvas为基础开发的图表插件 也是对内部矢量图形格式进行渲染
做图表
想要折腾就用canvas
简单美观
就用svg
另外svg当然不适合做游戏
万一哪天 浏览器直接进化为3d渲染引擎 直接拖个3d格式文件进来就能看 也未尝不可
现阶段只是用canvas来做渲染引擎 我觉得SVG在"遥远"的将来更有前途 SVG跟Canvas的关系就像几何与美术
So，你觉得哪个更有前途？