SVG和HTML5 Canvas有什么区别？

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

我想念什么？SVG和HTML5 Canvas之间的主要区别是什么？为什么我要选择一个？

参见维基百科：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中可能是可行的，但我怀疑这要困难得多。

SVG就像一个“绘制”程序。将图形指定为每种形状的图形说明，并且可以更改任何形状的任何部分。图纸是面向形状的。

画布就像一个“绘画”程序。像素到达屏幕后，即为您的绘图。您不能更改形状，除非用其他像素覆盖它们。绘画是面向像素的。

对于某些程序来说，能够更改图纸非常重要。例如草拟应用程序，图表工具等。因此SVG在这里具有优势。

对于某些艺术程序而言，能够控制单个像素很重要。

与SVG相比，使用Canvas通过鼠标拖动获得出色的动画性能以进行用户操纵更为容易。

计算机屏幕上的单个像素通常会消耗4字节的信息，而如今的计算机屏幕需要几兆字节。因此，如果要让用户编辑图像然后再次上载，则Canvas可能会带来不便。

相比之下，使用SVG绘制覆盖整个屏幕的少数形状需要占用几个字节，下载速度很快，并且可以轻松地再次上传，并且在该方向上的优势与在另一个方向上的优势相同。因此，SVG可以比Canvas更快。

Google使用SVG实施了Google Maps。这使Web应用程序具有扎实的性能和流畅的滚动。

画布与SVG的高级摘要

帆布

1. 基于像素（动态.png）
2. 单个HTML元素。（在Developer工具中检查元素。您只能看到canvas标记）
3. 仅通过脚本修改
4. 事件模型/用户交互是粒度（x，y）
5. 较小的表面，较多的对象（> 10k）或同时使用这两种方法时，性能会更好

SVG

1. 基于形状
2. 多个图形元素，它们成为DOM的一部分
3. 通过脚本和CSS修改
4. 事件模型/用户交互是抽象的（矩形，路径）
5. 使用较少的对象（<10k），较大的表面或同时使用这两者时，性能会更好

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

它们是什么，以及它们为您提供的服务有所不同。

• SVG是可缩放矢量图形的文档格式。
• Canvas是一个JavaScript API，用于将矢量图形绘制为特定大小的位图。

详细说明一下格式与API：

使用svg，您可以使用许多不同的工具查看，保存和编辑文件。使用画布，您只需绘制，除了屏幕上生成的图像以外，您所做的一切都没有保留。您可以同时设置动画，SVG只需查看指定的元素和属性即可为您处理重绘，而使用canvas则必须使用API​​自己重绘每个帧。您可以缩放两者，但是SVG会自动缩放，而再次使用画布时，您必须重新发出给定尺寸的绘图命令。

SVG和Canvas对我影响最大的两件事是，

能够在不使用DOM的情况下使用Canvas的能力，因为SVG在很大程度上取决于DOM，并且随着复杂性的增加，性能会降低。就像在游戏设计中一样。

使用SVG的优势在于，在各个平台上，分辨率保持不变，而Canvas则缺乏。

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

这完全取决于您的需要/要求。

• 如果您只想在屏幕上显示图像/图表，则建议使用画布。（例如PNG，GIF，BMP等）

• 如果要扩展图形的功能，例如，如果您将鼠标悬停在图表上以缩放某些区域而不损害显示质量，则可以选择SVG。（很好的例子是AutoCAD，Visio，GIS文件）。

如果要构建带有形状连接器的动态流程图创建器工具，最好选择SVG而不是CANVAS。

• 当屏幕尺寸增加时，画布将开始退化，因为需要绘制更多的像素。

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

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

SVG

基于用例，SVG用于徽标和图表，因为您绘制并忘记了其矢量图形。当视口改变时，如调整大小（或缩放），它将自动调整并且无需重新绘制。

帆布

画布是位图（或栅格），它是通过在屏幕上绘制像素来完成的。它用于开发游戏或图形体验（https://www.chromeexperiments.com/webgl在给定区域中绘制像素并通过重新绘制像素来进行更改的特定区域中）。由于它是栅格类型，因此我们需要在视口更改时完全重绘。

参考

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

SVG是文件格式之类的图形规范。SVG是文档。您可以交换SVG文件（如HTML文件）。另外，由于SVG元素和HTML元素共享相同的DOM API，因此可以使用JavaScript生成SVG DOM的方式与创建HTML DOM的方式相同。但是您不需要JavaScript即可生成SVG文件。一个简单的文本编辑器足以编写SVG。但是您至少需要一个计算器来计算图形中形状的坐标。

CANVAS只是一个绘图区域。必须使用JavaScript生成画布的内容。您不能交换画布。这不是文件。画布的元素也不是DOM树的一部分。您不能使用DOM API来操纵画布的内容。相反，您必须使用专用的canvas API将形状绘制到画布中。

a的优点SVG是，您可以将工程图作为文档交换。的优点CANVAS是，它具有较少的冗长的JavaScript API来生成内容。

这是一个示例，它表明您可以实现类似的结果，但是在JavaScript中的实现方式却大不相同。

// Italic S in SVG

(function () {

  const ns='http://www.w3.org/2000/svg';
  let s = document.querySelector('svg');
  let p = document.createElementNS (ns, 'path');
  p.setAttribute ('id', 'arc');
  p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
  s.appendChild (p);
  let u = document.createElementNS (ns, 'use');
  u.setAttribute ('href', '#arc');
  u.setAttribute ('transform', 'rotate(180)');
  s.appendChild (u);

})();

// Italic S in CANVAS

(function () {

  let c = document.querySelector('canvas');
  let w = c.width = c.clientWidth;
  let h = c.height = c.clientHeight;
  let x = c.getContext('2d');
  x.lineWidth = 0.05 * w;
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*0.02, h*0.4,
                   w*0.4, -h*0.02,
                   w*0.95, h*0.05);
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
                   w*(1-0.4), h*(1+0.02),
                   w*(1-0.95), h*(1-0.05));
  x.stroke();

})();

svg, canvas {
  width: 3em;
  height: 3em;
}

svg {
  vertical-align: text-top;
  stroke: black;
  stroke-width: 0.1;
  fill: none;
}

canvas {
  vertical-align: text-bottom;
}

div {
  float: left;
}

<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>

如您所见，结果几乎相同，但是JavaScript代码完全不同。

SVG是使用与DOM API创建createElement，setAttribute和appendChild。所有图形都在属性字符串中。SVG具有更强大的原语。例如，CANVAS的功能与SVG弧路径完全不同。CANVAS示例尝试使用贝塞尔曲线模拟SVG弧。在SVG中，您可以重用元素以对其进行转换。在CANVAS中，您不能重复使用元素。相反，您必须编写一个JavaScript函数才能调用两次。SVG具有viewBox允许使用归一化坐标的坐标，从而简化了旋转。在CANVAS中，您必须根据clientWidth和自己计算坐标clientHeight。您可以使用CSS设置所有SVG元素的样式。在CANVAS中，您无法使用CSS设置样式。由于SVG是DOM，因此可以将事件处理程序分配给所有SVG元素。CANVAS中的元素没有DOM，也没有DOM事件处理程序。

但是另一方面，CANVAS代码更容易阅读。您不需要关心XML名称空间。您可以直接调用图形函数，因为您不需要构建DOM。

课程很明确：如果您想快速绘制一些图形，请使用CANVAS。如果您需要共享图形（例如，使用CSS设置样式）或要在图形中使用DOM事件处理程序，请构建SVG。

添加到以上几点：

与JPEG，GIF等相比，SVG轻巧，可以通过Web传输，并且在调整大小时可以极大地缩放，而不会降低质量。

SVG
基于对象模型。
适用于使用较大的渲染区域。
SVG为事件处理程序提供任何支持。
允许通过脚本和CSS进行修改。
SVG具有更好的可伸缩性
SVG基于矢量（由形状组成）。
SVG不适合游戏图形。SVG不依赖于分辨率。
SVG具有API动画功能。
SVG适用于高质量和任何分辨率的打印。

画布元素

它基于像素。

适合使用小渲染

Canvas不为事件处理程序提供任何资源。

仅允许通过脚本进行修改。

画布的可伸缩性较差。

画布基于栅格（由像素组成）。

画布适用于游戏图形。

画布完全取决于分辨率。

Canvas没有任何动画API。

画布不适合打印高质量和高分辨率。