html5 canvas元素和svg

35

SVG和canvas并非真正可互换的技术。 SVG是一种保留模式图形，其中的一切都来自相当抽象的模型（SVG文档）。另一方面帆布是一种即时模式图形，没有模型和客户端（JavaScript）必须照顾重绘，动画等。

2009-10-30 17:18:16 foolip

+7

Jennifer Yu说SVG非常适合高分辨率，Canvas适用于快速动画。她建议在另一个上面的这段视频从11混合使用这两种，其一：http://media.ch9.ms/ch9/FDB1/595AD4A8-9399-439C-840A-9EAF0092FDB1/MIX11HTM15_high_ch9.mp4 – 2011-05-14 17:39:42

+0

技术上你是对的由于矢量和光栅图形之间的差异，它们不可互换。但是，你能告诉我一件事，我可以向最终用户展示一个我无法与另一个展示的产品？我认为就最终用户而言，它们实际上是完全可以互换的。 – 2013-07-18 23:34:00

0

因为我们再不需要担心什么支持这种嵌入;-)

在这种方式中的重点应用developpers是要坚持标准，让客户端设计师这样做。并因此让所有人都担心插件，版本，安全设置等......

来源

2009-10-30 15:26:13 mjv

+0

浏览器是否能支持SVG命名空间，像壁虎呢，你不应该担心或者，用另外的事实是，在SVG你确实有一个DOM操作。 – 2009-10-30 15:31:30

+1

如果浏览器支持HTML5而不是SVG命名空间，就像IE可能会？ – ceejayoz 2009-10-30 15:40:52

+0

只需使用SVGWeb for IE，这真的很容易。 http://code.google.com/p/svgweb/ – 2009-10-30 16:56:42

6

http://people.mozilla.com/~vladimir/xtech2006/有很好的比较。

使用画布，您不必处理DOM，从而更快，更容易编写代码。 SVG也是一个混乱的规范，...

来源

2009-10-31 05:48:30 Nickolay

+4

你在这里有一些链接腐烂..有没有替代的链接？ – 2011-11-02 09:27:50

+0

@TimPost：不，但有人在mozilla可能有。本次介绍与https://developer.mozilla.org/en/XTech_2006_Presentations ... – Nickolay 2011-11-04 13:28:18

17

SVG是矢量图形的标记语言，并具有DOM。这使得创建后的内容变得非常容易。

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

来源

2009-10-31 19:50:19

3

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

来源

2009-12-05 20:37:11 Pierre

1

下面是如何分析一个简单的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的画布-Y-SVG-II/

进一步帖子

SVG的解析器将透明胶片和梯度

来源

2010-11-04 21:17:32 iker

+0

联系我忘了说，职位是在西班牙，但你可以在这里得到完整的示例代码：HTTP：//www.ikeralbeniz。净/可湿性粉剂内容/上传/ 2010/11/test.html中 – iker 2010-11-04 21:28:05

1

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

来源

2012-06-13 01:54:08 Luis

0

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

底线是我们不需要两个。是的，我知道矢量和光栅图形和两种控制路径，对象，动画等不同方式之间存在差异，但对于最终用户来说，它们都是一样的。是的，SVG现在稍微强大一些，因为它的存在时间更长，但只需要更多的工作，您可以使用Canvas做同样的事情。

我相信现实是Canvas是Web开发中反对XML本身的压倒性反弹的一部分。我相信大多数Web开发人员，尤其是那些在“企业”环境之外使用有限时间和资源的开发人员，不喜欢XML的复杂性。 Canvas是一组首选的只做一件事技术的一部分，就像HTML5比XHTML更受青睐，JSON优于XML，甚至YAML优于XML。

我认为这个想法与* nix哲学相似，即有许多特定的工具正确而有效地完成一件事，而不是一件做很多事情的大型工具。（这也类似于许多固定齿轮自行车骑手的理念，他们通过简单的一个直接驱动装置避开令人难以置信的精确和先进的拨链器技术。）

不要误解我的意思，我相信XML是一个令人难以置信的强大以及由辉煌人士精心研发的卓越技术，成为网络，编程，配置，数据存储等终极瑞士军刀;但这并不意味着更容易管理和设计一系列复杂的路径，而不是仅仅在a上绘制像素。

我知道我的答案是自以为是，我不打算这是火焰。我喜欢SVG，我希望这些年来能够得到更多的支持（尤其是来自IE），但是我感受到了标准制定者和影响他们的网络开发人员的心理。

长期我想看到SVG使XML可选，并移动到一个更JSON状结构这就是简单的用JavaScript来操纵，甚至可能成为基于矢量的画布背景。在我看来，这将是网络的最佳解决方案。

来源

2013-07-18 23:30:50

html5 canvas元素和svg

回答

相关问题