前端绘图 svg和canvas

前端绘图的技术到目前为止有很多种：canvas、SVG、VML、Flash、Java Applet等。这么多方式，他们之间有什么区别，选择的时候该在什么情形下选择什么方式 比较合适？看了很多文章，简单总结一下。

大体思路：先逐一介绍一下各种绘图方式，然后比较一下各种绘图方式，最后给出一个取舍的原则或者建议。本文是在参考了多篇文章之后，根据自己的理解整理的，如有不对的地方欢迎指正。

一、各种前端绘图方式

       由于HTML语言的功能十分有限，无法达到人们的预期设计，以实现一些动态的、与用户友好交互的效果。在这样的情况下，前端的一些绘图技术应用而生，包括Java Applet，Flash，VML，SVG和canvas等。Flash最早的版本是1995年开发的，当时叫“Future Splash Animator”，仅由简单的工具和时间线组成；而VML在1998年的时候，由微软、Macromedia等向W3C提出审核该建议，但是被W3C拒绝了，原因是Adobe、Sun等提出了PGML计划书，这两套标准后来合并成更具潜力的SVG；canvas则是HTML5标准当中的一个新的元素，最开始由苹果推出，浏览器safari率先支持，这项技术的出现是在SVG之后了。

1、Flash

     Flash在前端绘图需要安装插件，而且使 Flash中的元素与网页中其他元素进行交互是要消耗大量时间和资源的，另外在编程上也相当不方便。

     2012年8月15日，Adobe公司宣布停止为移动设备开发Flash player，Flash在退出移动终端过之前，微软官方博客发布消息：Windows 8 的 Metro 版 IE 10 浏览器将不再支持Flash插件。

2、VML

     VML的全称是Vector Markup Language（矢量标记语言）。VML是一种XML语言，用于绘制矢量图形。VML规格尽管被W3C所拒绝，但是微软公司开发的IE浏览器，从5.0版本之后都实现了对VML的支持，也只有IE对VML支持。VML支持动态脚本的调用，即可以在VML中嵌套JavaScript。

3、SVG

     可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。

     SVG有DOM接口，每个图元都会对应DOM对象，这些对象都是可以单独操作的，而且还能绑定onclick这类事件。

     SVG图形是矢量的，无需任何图像处理工具，通过XML文本生成，正是因为通过文本、指令生成的图像，才是矢量的。

4、canvas

     canvas是HTML5标准中的一个元素，javascript为其提供了一些绘图API，通过canvas生成的图像是栅格形式的，即像素图像，与VML和SVG生成的矢量图像不同。
     canvas是一个HTML中的元素，所以它能够与浏览器渲染引擎紧密结合、节约资源，简化了图形和网页中其他元素的交互过程。 而且可以像操作普通 HTML 元素一样操作canvas。开发人员可以将所有的代码整齐的写在一个文件里，降低了维护与更新的难度。

二、绘图方式的比较

       从上面的介绍当中，我们可以看出flash和VML的局限性，Flash需要插件的安装，而且退出手机终端插件的开发，苹果和微软都开始废弃Flash了。而对于VML，在五大浏览器中只有IE支持，所以若是在前端绘图，考虑到推广和各个浏览器的兼容性，也不易采用VML。那么余下的就只有SVG和Canvas了，确实是这两种方式目前都得到了浏览器广泛的支持，但是在图像生成、渲染的原理和性能以及用户交互方面有很大的不同。

       canvas生成图像的原理是基于像素，而SVg则是基于形状，SVG通过XML语言描述图形的形状，无论放大或缩小都保持文本描述的形状，所以是矢量的，而canvas基于像素的，当把图像放大的话就会变模糊。

       canvas就是一个HTML元素，其中可以绘制很多图形，都是在这一个canvas中，而SVG所绘制的各个图形都是单独的一个元素，是DOM的一部分。

       canvas无法对已绘制的图像进行操作、修改，也就是说获取不到canvas中的某一个图像，但是SVG可以，因为在SVG所渲染的图像中，单个的图像都是一个DOM元素，我们就可以通过CSS和js脚本进行修改和操作。不过，在canvas中我们可以记录其中各个对象的位置，想要的修改某一对象，我们只能是把原来的对象擦除，重新绘制。

       canvas中的某一图像“对象”无法像DOM中元素一样来添加事件，只能是通过判断当前事件的坐标是否落在该对象中来进行模拟事件模型；SVG就可以跟为DOM元素添加事件一样，为其中的每一个图像添加事件。

       canvas与SVG的性能比较，如下图所示，渲染时间随着所绘制的对象增加而变化的曲线。我们可以看到当绘制的对象数目较少时，canvas和SVG的性能差不多，但是当数量增加之后，canvas的性能要远远优于SVG。具体可以参考这篇文章：Performance of Canvas versus SVG（http://smus.com/canvas-vs-svg-performance/）

三、前端绘图的建议

根据前面的描述，我们在前端绘图一般在SVG和canvas之间选择，二者的选择策略如下图所示。

具体参考：

1、如何在 SVG 和 Canvas 之间进行选择（http://msdn.microsoft.com/zh-cn/library/gg193983）

2、突袭HTML5之SVG 2D入门13 - svg对决canvas（http://www.cnblogs.com/dxy1982/archive/2012/07/25/2409234.html）

高保真的文档
      这个方面很好理解，为了浏览文档时，缩放时不失真，或需要打印高质量的文档，通常会优先选择SVG，例如地图服务。
静态的图片资源
      SVG常常用于简单图像，无论是应用程序还是网页中的图像，大图像还是小图像。由于SVG要加载到DOM中，或者创建图像前至少要进行解析，所以性能会稍微有所下降，但相比于呈现网页的成本（大约几毫秒），这种效率损失是极其微小。
      在文件大小方面（为了评估网络流量的目的），SVG图片与png图片大小相差也不大。但是因为SVG作为图像格式是可缩放的，所以如果开发人员想要以更大的比例使用该图像，或者用户使用高 DPI的屏幕，则使用SVG是相当不错的选择。

像素操作
      使用Canvas时可以获得快速的绘图速度，且不需要保留元素的相应信息。特别是当需要处理像素操作时，性能较好。这种类型的应用基本都选择Canvas技术。
实时数据
      Canvas非常适合非交互的实时数据可视化。比如实时天气数据。
图表和图形
      使用SVG或者Canvas均可以绘制相关图形和图表，但是如果要强调可操作性，则SVG无疑是最好选择，如果不需要交互性，强调性能，则Canvas比较适合。
二维游戏
      因为游戏大多数是使用低级的API开发，所以Canvas比较容易让人接受。但是实际上，绘制游戏的场景的时候，Canvas需要重复绘制和定位形状，而SVG是维护在内存中，修改相关的属性非常容易，所以SVG也是一种不错的选择。
      在小游戏板上使用几个对象创建游戏时，Canvas 和 SVG 之间在性能上几乎没有差异。但是，随着创建更多的对象，Canvas 代码将会增大许多。由于每次进行游戏循环时都必须重新绘制 Canvas 对象，因此 Canvas 游戏的速度会减慢。
用户界面设计
       由于良好的交互性，无疑SVG更胜一筹。利用 SVG 的保留模式图形显示，你可以在正文的类似 HTML  的标记中创建所有用户界面详细信息。因为每个 SVG 元素和子元素都可以响应单独的事件，所以你可以非常轻松地创建复杂的用户界面。而 Canvas  需要你按照更复杂的代码顺序来指定如何创建用户界面的每个部分。你需要遵照的顺序是： 
      •获取上下文。
      •开始绘制。
      •指定每根线条和每个填充的颜色。
      •定义形状。
      •完成绘制。
      此外，Canvas 只能处理整个画布的事件。如果有更复杂的用户界面，则必须确定在画布上单击的位置的坐标。SVG 可以单独处理每个子元素的事件。