浅谈Canvas与SVG

1、SVG

SVG 可缩放矢量图形（Scalable Vector Graphics），是一种使用可扩展标记语言（XML）描述2D图形的语言。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。

SVG基于XML，意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加 JavaScript 事件处理器。

在SVG中，每个被绘制的图形均被视为对象，如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。也就是说，SVG绘图很容易编辑，只需要增加或移除相应的元素就可以了。

SVG是基于矢量的，它能够很好的处理图形大小的改变。SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。

SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景。

 

2、Canvas

Canvas 通过 JavaScript 来绘制2D图形（动态生成）。

Canvas 是逐像素进行渲染的。

在Canvas中，一旦图形被绘制完成，就不会继续得到浏览器的关注，如果其位置发生变化，整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas是基于位图的，它不能够改变大小，只能缩放显示。

Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制。

 

3、Canvas与SVG

Canvas	SVG
位图	矢量图
依赖分辨率	不依赖分辨率
逐像素进行渲染	逐元素（DOM元素）进行渲染
通过JavaScript 绘制图形	基于XML，用文本格式的描述性语言来描述图像内容
不支持事件处理器。Canvas输出的是一整幅画布，能够以 .png 或 .jpg 格式保存结果图像	支持事件处理器。SVG绘制出的每个图形元素都是独立的DOM节点，能够方便的绑定事件
不能够改变大小，只能缩放显示	能够很好的处理图形大小的改变
放大或缩小时图形质量会有所损失	放大或缩小时图形质量不会有所损失
适合像素处理，动态渲染和大数据量绘制，最适合图像密集型的游戏（频繁重绘对象）	适合静态图片展示，高保真文档查看和打印的应用场景，不适合游戏应用
如果图形位置发生变化，整个场景需要重新绘制，包括任何或许已被图形覆盖的对象	如果对象属性发生变化，浏览器能自动重现图形。也就是说，SVG绘图很容易编辑，只需要增加或移除相应的元素即可

4、Canvas与SVG绘制地图的选择

当绘制的对象数目较少时，Canvas和SVG的性能差不多，但是当数量增加之后，canvas的性能要远远优于SVG。

当需要动态渲染地图，频繁重绘时，选择Canvas更好。