问SVG和HTML5画布有什么区别？

EN

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

Canvas就像一个“画图”程序。一旦像素出现在屏幕上，这就是你的图画。您不能更改形状，除非使用其他像素覆盖它们。绘画是面向像素的。

能够改变绘图对于一些程序来说是非常重要的；例如绘图应用程序，绘图工具等。所以SVG在这方面有优势。

对于一些艺术节目来说，能够控制单个像素非常重要。

使用Canvas比使用SVG更容易获得通过鼠标拖动进行用户操作的出色动画性能。

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

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

Google使用SVG实现了Google Maps。这使得这款web应用程序的性能更快，滚动也更流畅。

SVG和Canvas给我的印象最深的两件事是，

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

使用SVG的好处是分辨率在不同平台上保持相同，这在Canvas中是不存在的。

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

SVG是图形的规范，类似于文件格式。SVG是一种文档。您可以像交换HTML文件一样交换SVG文件。此外，因为SVG元素和HTML元素共享相同的DOM，所以可以使用JavaScript以与创建HTML DOM相同的方式生成SVG DOM。但是你不需要JavaScript来生成SVG文件。一个简单的文本编辑器就足以编写SVG。但您至少需要一个计算器来计算绘图中形状的坐标。

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

SVG的优点是，您可以将图形作为文档进行交换。CANVAS的优点是，生成内容的JavaScript应用编程接口不太冗长。

下面是一个示例，它表明您可以实现类似的结果，但在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使用createElement、setAttribute和appendChild创建的。所有图形都在属性字符串中。SVG有更强大的原语。例如，画布没有任何等同于SVG圆弧路径的东西。画布示例尝试使用Bezier曲线模拟SVG圆弧。在SVG中，您可以重用元素以对其进行转换。在画布中，您不能重用元素。相反，您必须编写一个JavaScript函数才能调用它两次。SVG有一个viewBox，它允许使用标准化的坐标，这简化了旋转。在画布中，您必须根据clientWidth和clientHeight自己计算坐标。您可以使用CSS设置所有SVG元素的样式。在画布中，您不能使用CSS设置任何样式。因为SVG是一个DOM，所以您可以将事件处理程序分配给所有SVG元素。画布中的元素没有DOM和DOM事件处理程序。

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

教训很清楚:如果您想快速绘制一些图形，请使用画布。如果需要共享图形，比如使用CSS设置样式，或者希望在图形中使用DOM事件处理程序，则构建一个SVG。