Question

思考什么时候使用Canvas 和SVG

Answer 1

　　SVG 作为一种在内存模型中持久保存的保留模式图形模型而著称。类似于 HTML，SVG 构建一个包含元素、特性和样式的对象模型。当 <svg> 元素出现在 HTML5 文档中时，它的行为类似于一个内联块，是 HTML 文档树的一部分。

　　Canvas 是一个位图，包含一个即时模式图形应用程序编程接口 (API) 来在它之上进行绘制。Canvas 是一种“即发即弃”模型，直接向它的位图呈现它的图形，然后对所绘制的形状没有任何认知，只会得到最终的位图。

　　可以这么认为，Canvas 类似于 Windows GDI API，其中您以编程方式向窗口绘制图形，而 SVG 类似于包含元素、样式、事件和基于 DOM 的可编程性的 HTML 标记。Canvas 是过程性的，而 SVG 是声明性的。

　　所以当考虑到观察大型示意图的适用性，但需要下钻到详细信息或出于工程用途打印整个文档时，可缩放的矢量图形中的“可缩放”特征会变得非常清晰。出于这些原因，我们将高保真度复杂矢量文档放在范围的 SVG 端。