SVG和HTML5 Canvas有什么区别？

Question

SVG和HTML5 Canvas有什么区别？他们似乎都对我这样做.基本上,他们都使用坐标点绘制矢量图稿.

我错过了什么？SVG和HTML5 Canvas有哪些主要区别？我为什么要选择一个而不是另一个？

Answer 1

SVG就像一个"平局"程序.图纸被指定为每个形状的绘图说明,任何形状的任何部分都可以更改.图纸是面向形状的.

Canvas就像一个"绘画"程序.一旦像素点击屏幕,那就是你的绘图.除非用其他像素覆盖形状,否则无法更改形状.绘画是以像素为导向的.

能够改变图纸对于某些程序非常重要; 例如,绘图应用程序,图表工具等.所以SVG在这里有一个优势.

能够控制单个像素对于一些艺术节目是重要的.

使用Canvas而不是SVG,通过鼠标拖动获得用户操作的出色动画性能.

计算机屏幕上的单个像素通常会消耗4个字节的信息,而现在计算机屏幕需要几兆字节.因此,如果您想让用户编辑图像然后再次上传,Canvas可能会很不方便.

相比之下,使用SVG绘制覆盖整个屏幕的少数形状占用几个字节,快速下载,并且可以轻松地再次上传,具有与朝向另一个方向时相同的优势.因此SVG可以比Canvas更快.

Google使用SVG实施了Google地图.这为Web应用程序提供了快速的性能和流畅的滚动.

Answer 2

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

SVG是在浏览器中绘制形状的早期标准.但是,SVG处于基本上更高的级别,因为每个绘制的形状都被记住为场景图或DOM中的对象,随后将其渲染为位图.这意味着如果更改SVG对象的属性,浏览器可以自动重新渲染场景.

在上面的示例中,一旦绘制了矩形,系统就会忘记绘制它的事实.如果要更改其位置,则需要重绘整个场景,包括可能已被矩形覆盖的任何对象.但在等效的SVG情况下,可以简单地改变矩形的位置属性,浏览器将决定如何重新绘制它.也可以在图层中绘制画布,然后重新创建特定图层.

SVG图像以XML格式表示,可以使用XML编辑工具创建和维护复杂场景.

SVG场景图使事件处理程序与对象关联,因此矩形可以响应onClick事件.要使用画布获得相同的功能,必须手动将鼠标单击的坐标与绘制的矩形的坐标进行匹配,以确定是否单击了它.

从概念上讲,canvas是一个可以构建SVG的低级协议.[引证需要]但是,这不是(通常)情况 - 它们是独立的标准.情况很复杂,因为Canvas有场景图库,而SVG有一些位图操作功能.

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

Answer 3

Canvas与SVG的高级摘要

帆布

1. 基于像素(动态.png)
2. 单个HTML元素.(在Developer工具中检查元素.你只能看到canvas标签)
3. 仅通过脚本修改
4. 事件模型/用户交互是粒度(x,y)
5. 较小的表面,较大数量的对象(> 10k)或两者兼有,性能更佳

SVG

1. 基于形状
2. 多个图形元素,它们成为DOM的一部分
3. 通过脚本和CSS修改
4. 抽象事件模型/用户交互(rect,path)
5. 对象数量较少(<10k),表面较大或两者兼而有之,性能更佳

有关详细信息,请阅读http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

Answer 4

他们是什么,他们为你做了什么是不同的.

• SVG是可缩放矢量图形的文档格式.
• Canvas是一个javascript API,用于将矢量图形绘制到特定大小的位图.

详细说明,格式与API:

使用svg,您可以在许多不同的工具中查看,保存和编辑文件.使用画布,您只需绘制,除了屏幕上生成的图像之外,您所做的一切都不会保留.您可以为两者设置动画,SVG只需查看指定的元素和属性即可为您处理重绘,而使用画布时,您必须使用API​​自行重绘每个帧.您可以对两者进行缩放,但SVG会自动进行缩放,而对于画布,您必须重新发出给定大小的绘图命令.

Answer 5

对于SVG和Canvas来说,最让我感到震惊的是,

能够在没有DOM的情况下使用Canvas,因为SVG在很大程度上依赖于DOM,并且随着复杂性的增加,性能会降低.喜欢在游戏设计中.

使用SVG的优势在于,在Canvas中缺少的平台上,分辨率保持不变.

本网站提供了更多详细信息.http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/