CANVAS画布与SVG的区别

CANVAS是html5提供的新元素<canvas>，而svg存在的历史要比canvas久远，svg并非html5专有的标签，最初svg是用xml技术（超文本扩展语言，能够自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，可是，他们有巨大的差异。

CANVAS

• 　　Canvas 是经过 JavaScript 来绘制 2D 图形。
• 　　Canvas 是逐像素进行渲染的。
•        在Canvas中，一旦图形被绘制完成，他就不会继续获得浏览器的关注，若是他的位置发生变化，那么就须要从新来绘制图形，其中包括任何或已经被图形覆盖的对象。

SVG

•        Svg 是使用 XML 描述的 2D 图形。
•        Svg 是基于 XML 的，这也就是说 SVG DOM 中的每一个元素都是可用的。能够为某个元素附加 JavaScript 事件处理器。
•        在 SVG 中，每一个被绘制过的图形均视为对象，若是 SVG 对象的属性发生变化，那么浏览器能够自行重现图形。

     比较

Canvas

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

SVG

1. 不依赖分辨率
2. 支持事件处理器
3. 最合适带有大型渲染区域的应用程序（如，百度地图、谷歌地图等等）
4. 不适合游戏的应用
5. 复杂度高会减慢渲染的速度
6. 以单个文件的形式独立存在，后缀名为.svg，能够在html文件中以img标签的src，元素背景，框架等引入 或者 直接在html文件中引入SVG标签

 从功能上来讲

CANVAS能够看作是一个画布。，其绘制出来的图形为标量图，所以，能够在canvas中引入jpg或png这类格式的图片，在实际开发中，大型的网络游戏都是用canvas画布作出来的，而且canvas的技术如今已经至关的成熟。另外，咱们喜欢用canvas来作一些统计用的图表，如柱状图曲线图或饼状图等。而svg，所绘制的图形为矢量图，因此其用法上受到了限制。由于只能绘制矢量图，因此svg中不能引入普通的图片，由于矢量图的不会失真的效果，在项目中咱们会用来作一些动态的小图标。可是因为其本质为矢量图，能够被无限放大而不会失真，因此就很适合来作地图。

从操做上来讲

咱们要让canvas里面的一个图片跟随鼠标事件：canvas.onmouseover=function(){}。而svg支持事件的绑定。另外canvas中咱们绘制图形一般是经过javascript来实现，svg更多的是经过标签来来实现，如在svg中绘制正矩形形就要用<rect>，这里咱们不能用属性style="width:XXX;height:XXX;"来定义。