到目前为止，SVG与Canvas的主要特性均已经总结完毕了。它们都是HTML5中支持的2D图形展示技术，而且均支持向量图形。现在，我们就来比对一下这两种技术，分析一下它们的长处和适用场景。
首先分析一下两种技术的显著特点，看下面的表格：
| Canvas | SVG |
|---|---|
| 基于像素（动态 .png） | 基于形状 |
| 单个 HTML 元素 | 多个图形元素，这些元素成为 DOM 的一部分 |
| 仅通过脚本修改 | 通过脚本和 CSS 修改 |
| 事件模型/用户交互颗粒化 (x,y) | 事件模型/用户交互抽象化 (rect, path) |
| 图面较小时、对象数量较大 (>10k)（或同时满足这二者）时性能更佳 | 对象数量较小 (<10k)、图面更大（或同时满足这二者）时性能更佳 |
从上面的对比中可以看出：Canvas在像素操作方面有着强大的优势；而SVG的最大优势在于便捷的交互性和可操作性。使用Canvas受画布的尺寸(其实就是像素数目)影响很大，使用SVG受对象的数目(元素的数目)影响比较大。Canvas 和 SVG 在修改方式上还存在着不同。绘制 Canvas 对象后，不能使用脚本和 CSS 对它进行修改。而 SVG 对象是文档对象模型的一部分，所以可以随时使用脚本和 CSS 修改它们。
实际上Canvas 是基于像素的即时模式图形系统，绘制完对象后不保存对象到内存中，当再次需要这个对象时想，需要重新绘制；SVG 是基于形状的保留模式图形系统，绘制完对象后会将其保存在内存中，当需要修改这个对象信息时，直接修改就可以了。这种根本的区别导致了很多应用场景的不同。
在下面的几个常见应用中，我们也可以体会到这一点。
高保真的文档
这个方面很好理解，为了浏览文档时，缩放时不失真，或需要打印高质量的文档，通常会优先选择SVG，例如地图服务。
静态的图片资源
SVG常常用于简单图像，无论是应用程序还是网页中的图像，大图像还是小图像。由于SVG要加载到DOM中，或者创建图像前至少要进行解析，所以性能会稍微有所下降，但相比于呈现网页的成本（大约几毫秒），这种效率损失是极其微小。
在文件大小方面（为了评估网络流量的目的），SVG图片与png图片大小相差也不大。但是因为SVG作为图像格式是可缩放的，所以如果开发人员想要以更大的比例使用该图像，或者用户使用高 DPI的屏幕，则使用SVG是相当不错的选择。
