HTML5画布元素和SVG

Question

为什么我们需要HTML5画布元素，而通过嵌入SVG可以实现相同的效果呢？

- Stefano Borini

Answer 1

SVG和canvas并不是可互换的技术。SVG是一种保留模式图形，其中所有内容都从一个相当抽象的模型（即SVG文档）绘制而来。而Canvas则是一种即时模式图形，在这种模式下，没有模型，客户端（JavaScript）必须负责重绘、动画等。

- foolip

---

Jennifer Yu表示SVG适用于高分辨率，Canvas适用于快速动画。她建议在Mix 11的这个视频中同时使用两者，一个叠加在另一个上面：http://media.ch9.ms/ch9/FDB1/595AD4A8-9399-439C-840A-9EAF0092FDB1/MIX11HTM15_high_ch9.mp4 - Zachary Scott

从技术上讲，你是正确的，它们不可互换，因为矢量图形和光栅图形之间存在差异。但是你能告诉我有什么一种可以展示给最终用户而另一种不能展示的东西吗？我认为就最终用户而言，它们实际上是完全可互换的。 - user636044

Answer 2

SVG是一种用于矢量图形的标记语言，具有DOM。这使得在其创建后很容易修改内容。

Canvas是一个绘画表面，就像MS Paint一样没有撤消按钮。您无法更改内容，只能覆盖它。它非常高效，因为浏览器不需要处理图像的完整DOM。未来Canvas可能有可能处理3D绘图。

- Gregor Müllegger

Answer 3

http://people.mozilla.com/~vladimir/xtech2006/有一个不错的比较。

使用canvas，您无需处理DOM，这导致编写代码更快，更容易。而SVG作为一种规范则相当混乱...

- Nickolay

---

这里有一些链接失效了，是否有备用链接？ - Tim Post

@TimPost：不，但 Mozilla 的某个人可能有。此演示文稿链接来自 https://developer.mozilla.org/en/XTech_2006_Presentations ... - Nickolay

Answer 4

举个例子：我的博客引擎（Blogger）不支持SVG（它不是一个XHTML文档）。我写了一个工具，将SVG转换为画布元素：http://plindenbaum.blogspot.com/2009/11/tool-converting-svg-to-canvas_22.html

- Pierre

Answer 5

你可能会发现这个比较有用： http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

- Luis

Answer 6

这里是如何解析简单的SVG并在画布上绘制它的解释。

http://www.ikeralbeniz.net/2010/11/03/jugando-con-html5-canvas-y-svg-i/ http://www.ikeralbeniz.net/2010/11/04/jugando-con-html5-canvas-y-svg-ii/

在接下来的帖子中，SVG解析器将完成透明和渐变的处理。

- iker

---

我忘了说这些文章是用西班牙语写的，但你可以在这里获取完整的示例代码：http://www.ikeralbeniz.net/wp-content/uploads/2010/11/test.html - iker

Answer 7

这并不是一个技术性的答案，但我认为这是正确的答案。

关键是我们不需要两者都有。是的，我知道矢量图和光栅图之间有差异，以及控制路径、对象、动画等的不同方式，但对于最终用户来说，它们都是一样的。是的，由于它存在更长时间，SVG现在略微更加强大，但是通过更多的工作，您可以使用Canvas完成相同的事情。

我相信现实情况是Canvas是对XML本身在Web开发中压倒性反对的一部分。我相信大多数Web开发人员，特别是那些在有限的时间和资源下工作的人，除了“企业”环境外，都不喜欢XML的复杂性。Canvas是首选仅做一件事情技术集合的一部分，就像HTML5比XHTML更受欢迎，JSON比XML更受欢迎，甚至YAML也比XML更受欢迎。

我认为这个想法类似于*nix哲学，即拥有许多专门的工具，可以正确高效地完成一件事情，而不是一个超级工具完成许多事情。（这也类似于许多固定齿轮自行车骑手持有的哲学，他们摒弃了非常精确和先进的变速器技术，而选择了一个直接传动齿轮的简单性。）

我相信XML是由聪明的人们想出和开发的一种非常强大和精妙的技术，旨在成为网络、编程、配置、数据存储等方面的终极瑞士军刀；但这并不意味着管理和样式化一系列复杂路径比在一个上绘制像素更容易。

我知道我的答案带有个人观点，我不打算引起争端。我喜欢SVG，希望它在这些年里能得到更多的支持（尤其是来自IE），但我感觉潮流正在转向Canvas，仅仅是因为标准制定者和影响他们的Web开发人员的心理。

从长远来看，我希望看到SVG将XML变为可选项，并转向更类似于JSON的结构，这样就更容易用JavaScript进行操作，甚至成为基于矢量的Canvas上下文。在我看来，这将是Web的最佳解决方案。

- user636044

Answer 8

因此，我们就不需要担心这种嵌入的支持问题了 ;-)

以此方式，应用程序开发人员的重点是遵守标准，让客户端设计师也这样做。因此，可以避免所有人担心插件、版本、安全设置等问题...

- mjv

---

如果浏览器支持SVG命名空间，例如Gecko，您就不必担心了。此外，在SVG中，您实际上有一个DOM可以操作。 - Stefano Borini

如果浏览器支持HTML5但不支持SVG命名空间，比如IE可能会怎么办？ - ceejayoz

最终，我们最终有了两种基本相同的技术，只是因为一个浏览器在创新竞赛中落后了吗？ - Stefano Borini