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 地图。这使得网络应用程序具有快速的性能和平滑的滚动。

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 的高级摘要

Canvas

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/en-us/library/ie/gg193983(v=vs.85) .aspx

Answer 4

它们的本质以及为您做的事情是有区别的。

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

详细说明一下格式与 API：

使用 svg，您可以在许多不同的工具中查看、保存和编辑文件。使用画布，您只需进行绘制，除了屏幕上生成的图像之外，不会保留您刚刚所做的任何内容。您可以对两者进行动画处理，SVG 只需查看指定的元素和属性即可为您处理重绘，而使用 canvas 时，您必须使用 API 自己重绘每个帧。您可以缩放两者，但 SVG 会自动执行此操作，而再次使用画布时，您必须重新发出给定尺寸的绘图命令。

Answer 5

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

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

使用 SVG 的优点是跨平台分辨率保持不变，这是 Canvas 所缺乏的。

该网站提供了更多详细信息。 http://dev.opera.com/articles/view/svg -或画布在两者之间选择/

Answer 6

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

• 如果您只想在屏幕上显示图像/图表，那么推荐
  方法是画布。 （例如 PNG、GIF、BMP 等）

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

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

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

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

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

Answer 7

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

Answer 8

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

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

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。

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

Answer 9

添加以上几点：

与 JPEG、GIF 等相比，SVG 是轻量级的，适合通过网络传输，并且在调整大小时可以极大地缩放而不会损失质量。

Answer 10

SVG

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

画布元素

• 它是基于像素的。
• 适合使用小型渲染
• Canvas 不提供任何事件处理程序的资源。
• 仅允许通过脚本进行修改。
• Canvas的可扩展性较差。
• 画布是基于光栅的（由像素组成）。
• Canvas 适用于游戏图形。
• 画布完全取决于分辨率。
• Canvas 没有任何动画 API。
• 画布不适合打印高质量和高分辨率。