《JavaScript高效图形编程（修订版）》——6.4 画布与SVG的对比

本节书摘来自异步社区《JavaScript高效图形编程（修订版）》一书中的第6章，第6.4节，作者：【美】Raffaele Cecco著，更多章节内容可以访问云栖社区“异步社区”公众号查看

6.4 画布与SVG的对比

有些人最初对苹果创建另一个浏览器图形标准持保留意见，他们可能认为SVG已经足够了。从表面上看SVG和画布提供类似的图形能力，但它们有一个根本的区别：SVG是一个高层的、基于XML的标记语言，可以通过创建XML元素属性来定义图像；而画布则提供了可以直接从JavaScript访问的绘图API。

你可以使用任何文本编辑器手动创建SVG XML，或将它从Adobe Illustrator或Inkscape等绘图软件中导出。以下的SVG例子显示了一个蓝色矩形：

要通过JavaScript操纵这个矩形，你需要访问a_rectangle元素并适当调整其属性。听起来很熟悉吗？就像HTML中那样，我们通过一个类似DOM的结构去定义视觉效果。试想假如我们需要1000个矩形？没错，我们必须插入1000 矩形元素到XML中。这种方式对需要更多编程的动态图形来说，不是特别有效或直观。

不过，SVG不用JavaScript就能带给你绘制和动画功能，而且有大量设计工具供你编辑SVG图形。由于现在IE9中也提供了基本的支持，当需要矢量图时，SVG是一个不错的解决方案。维基百科等网站就广泛使用SVG作为插图。