Html html5 画布元素和 svg

html5 canvas element and svg

提问by Stefano Borini

Why do we need the html5 canvas element, when the same can be achieved through embedded svg?

为什么我们需要 html5 canvas 元素，当同样可以通过嵌入式 svg 实现时？

回答by foolip

SVG and canvas aren't really interchangeable technologies. SVG is a type of retained mode graphics where everything is drawn from a rather abstract model (the SVG document). Canvas on the other hand is a kind of immediate mode graphics, where there is no model and the client (JavaScript) must take care of redrawing, animations etc.

SVG 和画布并不是真正可以互换的技术。SVG 是一种保留模式图形，其中所有内容都来自一个相当抽象的模型（SVG 文档）。另一方面，画布是一种即时模式图形，其中没有模型，客户端（JavaScript）必须负责重绘、动画等。

回答by Gregor Müllegger

SVG is a markup language for vector graphics and has DOM. This makes it very easy to alter the content after its creation.

SVG 是一种用于矢量图形的标记语言，并且具有 DOM。这使得在创建内容后更改内容变得非常容易。

Canvas is a painting surface just like MS Paint without an undo button. You cannot alter the content. You only can overpaint it. It is very performant because the browser does not need to handle a complete DOM for the image. And there is a possibility that canvas can handle 3D drawing in the future.

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

回答by Nickolay

http://people.mozilla.com/~vladimir/xtech2006/has nice comparison.

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

With canvas you don't have to deal with the DOM, which leads to faster and easier to write code. SVG is a mess as a specification, too...

使用画布，您不必处理 DOM，从而可以更快、更轻松地编写代码。SVG 作为规范也是一团糟......

回答by Pierre

an illustration: My blog engine (blogger) doesn't support SVG (it's not a XHTML document). I wrote a tool converting SVG to the canvas element: http://plindenbaum.blogspot.com/2009/11/tool-converting-svg-to-canvas_22.html

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

回答by iker

Here is an explanation of how to parse a simple svg and draw it on a canvas..

这里解释了如何解析一个简单的 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/

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/

in further posts the svg parser will be completed with transparencies and gradients

在进一步的帖子中，svg 解析器将完成透明度和渐变

回答by Luis

you might also find this comparison useful: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

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

回答by Luis

This isn't really a technical answer but I think it's the correct answer.

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

The bottom line is we don't need both. Yes I know there are differences between vector and raster graphics and different ways to control paths, objects, animations, etc. between the two, but to the end-user it's all the same. Yes, SVG is a little more powerful right now because of its longer existence but with a little more work you can do the same things with Canvas.

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

I believe the reality is Canvas is part of an overwhelming backlash against XML itself in web development. I believe most web developers, especially those working with limited time and resources, outside "enterprise" environments, dislike the complexity of XML. Canvas is part of a set of preferred just-do-one-thing technologies just like HTML5 is preferred over XHTML, JSON is preferred over XML, and even YAML is preferred over XML.

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

I think the idea is similar to the *nix philosophy of having many specific tools doing one thing right and efficiently rather than one mega tool doing many things. (It's also similar to the philosophy held by many fixed gear bicycle riders who shun incredibly precise and advanced derailleur technology for the simplicity of one direct drive gear.)

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

Don't get me wrong, I believe XML is an incredibly powerful and brilliant technology thought up and developed by brilliant people to be the ultimate Swiss army-knife of the web, programming, configuration, data storage, etc; but that doesn't mean it's easier to manage and style a series of complex paths than it is to just draw pixels on a .

不要误会我的意思，我相信 XML 是一种令人难以置信的强大和出色的技术，由杰出的人设计和开发，是网络、编程、配置、数据存储等方面的终极瑞士军刀；但这并不意味着管理和设置一系列复杂路径的样式比仅在 .

I know my answer is opinionated and I don't intend this to be a flame. I love SVG and I wish it would have gotten more support over the years (especially from IE), but I feel the tide turning towards Canvas simply due to the psychology of standards setters and the web developers that influence them.

我知道我的回答是固执己见的，我不希望这成为火焰。我喜欢 SVG，我希望它多年来得到更多支持（尤其是来自 IE），但我觉得趋势转向 Canvas 仅仅是由于标准制定者和影响他们的 Web 开发人员的心理。

Long term I'd like to see SVG make XML optional and move to a more JSON-like structure that's simpler to manipulate with JavaScript, perhaps even becoming a vector-based Canvas context. That would be the best solution for the web in my opinion.

从长远来看，我希望 SVG 使 XML 成为可选，并转向更类似于 JSON 的结构，使用 JavaScript 更易于操作，甚至可能成为基于矢量的 Canvas 上下文。在我看来，这将是网络的最佳解决方案。

回答by mjv

Because we then do not need to worry about what support such embedding ;-)

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

In this fashion the focus for application developpers is to adhere to standards and let the client designers do the same. and hence spare everyone to worry about plug-ins, versions, security setups, etc...

在这种方式下，应用程序开发人员的重点是遵守标准并让客户端设计人员也这样做。从而让每个人都不必担心插件、版本、安全设置等...