SVG和Canvas对比

位图和矢量图

	1.位图
    传统的 jpg / png / gif图都是位图
    位图是一个个很小的颜色小方块组合在一起的图片。一个小方块代表1px
    优点: 色彩丰富逼真
    缺点: 放大后会失真, 体积大
    2.矢量图
    矢量图是用XML格式定义, 通过各种「路径」和「填充颜色」来描述渲染的的图片
    优点: 放大后不会失真, 体积小
    缺点: 不易制作色彩变化太多的图象

SVG和Canvas对比

Canvas是H5新增的一个标签
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序（比如谷歌地图）
能够以 .png 或 .jpg 格式保存结果图像	复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用