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

来自：https://www.gxlcms.com/htmldaima-283044.html 侵删

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这是个设备和需求的二维表 偷懒了。 个人的经验 有误请拍 

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Byme/p/14662807.html