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