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

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

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

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