SVG和HTML5 Canvas有什么区别？
SVG和HTML5 Canvas有什么区别？ 他们两人似乎对我也一样。 基本上，他们都使用坐标点绘制vector图稿。
我错过了什么？ SVG和HTML5 Canvas之间的主要区别是什么？ 为什么我应该select一个呢？
参见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的高级总结
帆布
- 基于像素（dynamic.png）
- 单个HTML元素（在Developer工具中检查元素，只能看到canvas标签）
- 仅通过脚本进行修改
- 事件模型/用户交互是粒度（x，y）
- 对于较小的表面，较大数量的对象（> 10k）或两者，性能会更好
SVG
- 基于形状
- 多个graphics元素，成为DOM的一部分
- 通过脚本和CSS修改
- 事件模型/用户交互被抽象（rect，path）
- 对于较小数量的对象（<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的同时也不会失去质量。
