SVG 和 HTML5 Canvas 有什么区别? [英] What is the difference between SVG and HTML5 Canvas?

问题描述

SVG 和 HTML5 Canvas 有什么区别?他们似乎都对我做同样的事情.基本上，他们都使用坐标点绘制矢量图.

What are the differences between SVG and HTML5 Canvas? They both seem to do the same to me. Basically, they both draw vector artwork using coordinate points.

我错过了什么?SVG 和 HTML5 Canvas 之间的主要区别是什么?为什么我应该选择一个?

What am I missing? What are the major differences between SVG and HTML5 Canvas? Why should I choose one over the other?

推荐答案

参见维基百科:http://en.wikipedia.org/wiki/Canvas_element

SVG 是较早的绘图标准浏览器中的形状.然而，SVG在一个根本更高的水平，因为每个绘制的形状都被记住场景图或 DOM 中的对象，其中随后呈现为位图.这意味着如果一个属性的SVG 对象被改变，浏览器可以自动重新渲染场景.

SVG is an earlier standard for drawing shapes in browsers. However, SVG is at a fundamentally higher level because each drawn shape is remembered as an object in a scene graph or DOM, which is subsequently rendered to a bit map. This means that if attributes of an SVG object are changed, the browser can automatically re-render the scene.

在上面的例子中，一旦矩形被绘制，事实上它被系统遗忘了.如果要改变它的位置，整个场景都需要重绘，包括任何对象可能已被覆盖长方形.但是在等效的 SVG 中在这种情况下，人们可以简单地改变矩形的位置属性浏览器将决定如何重新粉刷它.也可以分层绘制画布，然后重新创建特定图层.

In the example above, once the rectangle is drawn, the fact that it was drawn is forgotten by the system. If its position were to be changed, the entire scene would need to be redrawn, including any objects that might have been covered by the rectangle. But in the equivalent SVG case, one could simply change the position attributes of the rectangle and the browser would determine how to repaint it. It is also possible to paint a canvas in layers and then recreate specific layers.

SVG 图像以 XML 表示，并且可以创建和创建复杂的场景使用 XML 编辑工具进行维护.

SVG images are represented in XML, and complex scenes can be created and maintained with XML editing tools.

SVG 场景图启用事件要关联的处理程序对象，所以矩形可能会响应一个 onClick 事件.为了得到相同的具有画布的功能，必须手动匹配坐标鼠标点击坐标绘制的矩形来确定是否被点击.

The SVG scene graph enables event handlers to be associated with objects, so a rectangle may respond to an onClick event. To get the same functionality with canvas, one must manually match the coordinates of the mouse click with the coordinates of the drawn rectangle to determine whether it was clicked.

从概念上来说，canvas 是一个较低的层次SVG 可能基于的协议建成. [需要引用] 然而，这不是(通常)情况 - 他们是独立标准.情况很复杂，因为有场景Canvas 和 SVG 的图形库有一些位图操作功能.

Conceptually, canvas is a lower level protocol upon which SVG might be built.[citation needed] However, this is not (normally) the case—they are independent standards. The situation is complicated because there are scene graph libraries for Canvas, and SVG has some bit map manipulation functionality.

更新:我使用 SVG 是因为它的标记语言能力 - 它可以由 XSLT 处理并且可以在其节点中保存其他标记.同样，我可以在我的标记(化学)中保存 SVG.这允许我通过标记组合来操作 SVG 属性(例如渲染).这在 Canvas 中可能是可能的，但我怀疑它要困难得多.

UPDATE: I use SVG because of its markup language abilities - it can be processed by XSLT and can hold other markup in its nodes. Similarly I can hold SVG in my markup (chemistry). This allows me to manipulate SVG attributes (e.g. rendering) by combinations of markup. This may be possible in Canvas but I suspect that it's a lot harder.

这篇关于SVG 和 HTML5 Canvas 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！