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

<强>帆布

基于像素（动态.png）
单个HTML元素。（在Developer工具中检查元素。您只能看到canvas标记）
仅通过脚本修改
事件模型/用户交互是粒度（x，y）
表面较小，对象数量较多（> 10k）或两者兼而有之，性能更佳

<强> SVG

基于形状
多个图形元素，它们成为DOM的一部分
通过脚本和CSS修改
抽象事件模型/用户交互（rect，path）
使用较少数量的对象（<10k），较大的表面或两者兼而有之，性能更佳

有关详细信息，请阅读http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

Answer 4

它们是什么以及它们为你做了什么是不同的。

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

详细说明格式与API：

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

Answer 5

对于SVG和Canvas来说，最让我感到震惊的是，

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

使用SVG的好处是，在Canvas中缺少的平台上，分辨率保持不变。

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

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用于徽标，图表因为它绘制的矢量图形并且忘记了它。当视图端口改变像重新调整大小（或缩放）时，它将自行调整，无需重绘。

<强>帆布

Canvas是通过在屏幕上绘制像素来完成的位图（或光栅）。它用于在给定区域中开发游戏或图形体验（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以与创建HTML DOM相同的方式生成SVG 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代码完全不同。

使用createElement，setAttribute和appendChild使用DOM API创建SVG。所有图形都在属性字符串中。 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。

Answer 9

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

画布元素

它是基于像素的。

适合使用小型渲染

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

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

画布的可伸缩性较差。

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

画布适合游戏图形。

画布完全取决于分辨率。

画布没有任何动画API。

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

SVG和HTML5 Canvas有什么区别？

9 个答案: