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.

UPDATE：
我使用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屋！