SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？

回复内容：

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 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

总结来w3shool. 手机上可能还是SVG更合适一些。 我是这样理解的：浏览器就是一个自动化的canvas 实时渲染svg格式图形
以canvas为基础开发的图表插件 也是对内部矢量图形格式进行渲染
做图表
想要折腾就用canvas
简单美观
就用svg
另外svg当然不适合做游戏
万一哪天 浏览器直接进化为3d渲染引擎 直接拖个3d格式文件进来就能看 也未尝不可
现阶段只是用canvas来做渲染引擎 我觉得SVG在"遥远"的将来更有前途 SVG跟Canvas的关系就像几何与美术
So，你觉得哪个更有前途？