假设您想使用浏览器原生技术在网页上绘制一些内容。它可能是某种动画场景，它可能是一个技术图表，它可能是某种自定义信息图表。你应该用什么？正如文章的标题所暗示的，有几个明显的答案: 画布元素或可缩放矢量图形 (SVG)。在某些情况下，SVG或canvas可能工作得相当好，你可以选择你喜欢的工作。在其他情况下，实际的考虑将使您几乎不可避免地偏爱其中一个。
向量与像素
顾名思义，SVG图像是一种矢量图像格式。顾名思义，它们通常可以无限缩放而不会变得模糊或像素化。相比之下，HTML canvas元素由像素组成。如果您放大或放大在画布元素上绘制的图像，您将能够看到像素化。
但事情并不像说 “如果你想要一个矢量图形和画布，如果你想要一个光栅图形，使用SVG” 那么简单。首先，通过数据URI或通过链接到文件，SVG图像可以包括一个或多个光栅图形。嵌入的图像不会被神奇地矢量化，所以如果你放大你的 “矢量图形” 将看起来像素化。虽然最终， 画布元素的外观只是各种颜色的像素的集合，但如果你以编程方式从头开始绘制一些东西，你可以根据屏幕大小调整绘制的内容。虽然您可以更改单个画布像素的颜色，但大部分时间您将绘制路径。
有状态与无状态
SVG是有状态的。也就是说，一旦你添加了元素-一条线，一个圆圈，一个矩形等，你可以回去改变它们 (移动它们，改变它们的大小或颜色…)。相反，一旦你在画布上画了一些东西，你得到的唯一免费记录就是结果像素的颜色 (和透明度)。如果你想改变画布的外观，你可能需要从头开始重新绘制整个东西!在许多情况下，我认为这个事实在比较SVG和画布时比你实际绘制的是矢量图形要重要得多。接下来的两个小节将解释原因。
易于事件监控
使用SVG，将图形元素与单击，鼠标悬停和触摸等事件相关联非常容易。为什么？因为您添加到SVG的元素成为页面的一部分。因此，您可以以与其他DOM元素 (如div，img，span和section) 相同的方式添加事件处理程序。如果你移动一个元素周围的事件处理程序不会消失 (除非你告诉它)。使用canvas，页面上唯一的元素是canvas元素本身。你画的矩形不是一个元素。没有记录你甚至画了一个矩形，一旦它被绘制，除非你自己保存它。所有你有一些 (大概) 彩色像素。唯一可以触发的事件是整个canvas元素。
这并不是说，一切都失去了画布。您可以保留自己的图形元素放置位置的记录，并使用与画布上的事件关联的坐标来计算光标或手指的位置。如果你没有一个好的图书馆来帮助你，这只是一个更多的工作。
应对大量的图形元素
SVG图像自然地在DOM中创建了所有绘制元素，它们的位置和其他属性的记录，这一事实似乎使其对任何类型的复杂交互式图形都有利。在许多情况下，这是真的。但是svg也有一个很大的缺陷: 它们在DOM中创建了绘制的所有元素，它们的位置和其他属性的记录。如果你的SVG包含很多元素，那么你的DOM也是如此。这可能会使事情变慢。非常慢。如果你想在你的SVG中绘制几千个元素，你可能会有问题。如果你想绘制它们，然后将它们移动大约60次，以创建一个流畅的动画，你就有大麻烦了。画布几乎肯定是一个更好的主意。
第三种选择
最后，我将指出，SVG和canvas并不是使用web原生技术进行绘图和动画的唯一选择。这是惊人的什么可以在一个现代的浏览器，只有大块的CSS，一点点的JavaScript和一些常规的HTML div元素做。
尝试我们的jQuery HTML5控件为您的web应用程序，并立即利用其惊人的数据可视化功能。下载免费试用版今天。
</p