SVG和HTML5 Canvas有什么区别?

SVG和HTML5 Canvas有什么区别? 他们两人似乎对我也一样。 基本上,他们都使用坐标点绘制vector图稿。

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

8 Solutions collect form web for “SVG和HTML5 Canvas有什么区别?”

参见Wikipedia: http : //en.wikipedia.org/wiki/Canvas_element

SVG是在浏览器中绘制形状的早期标准。 但是,SVG处于更高的层次,因为每个绘制的形状都被记忆为场景图或DOM中的对象,随后将其呈现为位图。 这意味着如果一个SVG对象的属性被改变,浏览器可以自动重新渲染场景。

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

SVG图像以XML表示,可以使用XML编辑工具创build和维护复杂的场景。

SVG场景图可以使事件处理程序与对象相关联,所以矩形可以响应onClick事件。 为了获得与canvas相同的function,必须手动将鼠标点击的坐标与所绘制的矩形的坐标进行匹配,以确定是否被点击。

从概念上讲,canvas是SVG可能构build的较低级别的协议。但是,这不是(通常)情况 – 它们是独立的标准。 情况很复杂,因为Canvas有场景图库,而SVG有一些位图操作function。

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

SVG就像一个“绘图”程序。 绘图被指定为每个形状的绘图指令,任何形状的任何部分都可以被改变。 图纸是面向形状的。

canvas就像一个“绘画”程序。 一旦像素点击屏幕,那就是你的绘图。 除了用其他像素覆盖它们之外,您不能改变形状。 绘画是面向像素的。

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

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

Canvas比SVG更容易通过鼠标拖拽获得优秀的用户操作animation性能。

计算机屏幕上的单个像素通常会消耗4个字节的信息,并且这些天计算机屏幕需要几兆字节。 所以如果你想让用户编辑一个图像然后再上传,Canvas可能会很不方便。

相比之下,使用SVG绘制覆盖整个屏幕的一些形状需要几个字节,快速下载,并且可以轻松地再次上载,而沿着朝向这个方向的同样的优势,就像在另一个方向下降一样。 所以SVG可以比Canvas更快。

Google使用SVG实施Google地图。 这给了networking应用程序的活泼的performance和平滑的滚动。

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

  • SVG是可缩放vectorgraphics的文档格式。
  • Canvas是一个JavaScript API,用于将vectorgraphics绘制成特定大小的位图。

详细一点,格式与API:

使用svg,您可以在许多不同的工具中查看,保存和编辑文件。 用canvas画出来,没有任何东西保留在屏幕上的结果图像上。 您可以同时为这两个animation创buildanimation,SVG只需查看指定的元素和属性就可以处理重画,而使用canvas则必须自己重绘每个框架。 您可以缩放两者,但SVG自动执行此操作,而再次使用canvas时,必须重新为给定大小发出绘图命令。

Canvas与SVG的高级总结

帆布

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

SVG

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

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

SVG和Canvas最让我感到意外的是,

能够在不使用DOM的情况下使用Canvas,因为SVG严重依赖于DOM,而且复杂度越高,性能越慢。 就像在游戏devise中。

使用SVG的好处是在Canvas中缺less平台的解决scheme保持不变。

这个网站提供了更多的细节。 http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

这绝对取决于你的需求/要求。

  • 如果你只想在屏幕上显示图像/图表,那么推荐的方法是canvas。 (例如PNG,GIF,BMP等)

  • 如果要扩展graphics的function,例如,如果将鼠标hover在图表上想要放大某些区域而不损坏显示质量,则selectSVG。 (很好的例子是AutoCAD,Visio,GIS文件)。

如果要使用形状连接器构builddynamicstream程图创build器工具,最好selectSVG而不是CANVAS。

  • 当屏幕的大小增加时,canvas开始退化,因为需要绘制更多的像素。

  • 当屏幕上的对象数量增加时,SVG开始
    随着我们不断将其添加到DOM中而降低。

另请参阅: http : //msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx

SVG

根据使用情况SVG用于徽标,图表是因为它绘制的vectorgraphics而忘了它。 当查看端口改变像重新resize(或缩放)它将自行调整,不需要重绘。

帆布

canvas是通过在屏幕上绘制像素来完成的位图(或光栅)。 它用于开发游戏或graphics体验( https://www.chromeexperiments.com/webgl )在给定区域绘制像素,并通过重新绘制像素进行更改。 由于它的栅格types,我们需要完全重新绘制视图端口的变化。

参考

http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas

http://en.wikipedia.org/wiki/WebGL

http://vector-conversions.com/vectorizing/raster_vs_vector.html

除以上几点外:

与JPEG,GIF等相比,SVG在networking上的传输是轻量级的,而且在resize的同时也不会失去质量。

  • 用OpenGL(和OpenGL ES)渲染SVG
  • SVG到Android形状
  • 如何使用D3.js将图像添加到svg容器
  • d3添加文字圈
  • 使用C#将SVG转换为PNG
  • SVG是否支持embedded位图图像?
  • SVG图标与现代网站中的PNG图标
  • 如何添加一个工具提示到一个SVGgraphics?
  • 将SVGembedded到SVG中?
  • 如何创build一个SVG“工具提示”像框?
  • 如何缩放SVG图像以填充浏览器窗口?