何时使用SVG与何时使用帆布

SVG和画布都是可以在网络浏览器中绘制东西的技术，因此它们值得比较和理解一个何时比另一种更合适。即使是对它们的深刻理解也可以选择选择一个非常清楚。

• 有点平淡的图标？这显然是SVG领土。
• 类似游戏机的游戏？这显然是帆布领土。

我知道我们还没有涵盖为什么，但是我希望当我们挖掘它时会变得清晰。

SVG是向量和声明性的

如果您知道自己需要矢量艺术，那么SVG就是选择。矢量艺术在视觉上酥脆，并且比JPG（例如JPG）的栅格图形往往更小的文件大小。

这使徽标成为非常常见的SVG用例。 SVG代码可以在HTML中直接进行，就像声明的图纸说明一样：

 <svg viewbox="“">
  <circle cx="“" cy="“" r="“"></circle>
</svg>

如果您非常关心图形的灵活性和响应能力，那么SVG就是这样。

画布是一个JavaScript图纸API

您将元素放在HTML中，然后在JavaScript中进行绘图。换句话说，您发出命令来告诉它如何绘制（这比声明性更重要）。

 <canvas width="“"> </canvas>
<script>
  var canvas = document.getElementById（&#39;mycanvas&#39;）;
  var context = canvas.getContext（&#39;2d&#39;）;
  var centerx = canvas.width / 2;
  var Centery = canvas.height / 2;
  var半径= 70;

  context.beginath（）;
  context.arc（centrx，Centery，Radius，0，2 * Math.pi，false）;
  context.fillstyle =&#39;green&#39;;
  context.fill（）;
</script>

SVG在DOM中

如果您熟悉Click和Mousedown等DOM事件，那么这些事件也可以在SVG中提供。在这方面，与

并没有大不相同。

 <svg viewbox="“">
  
  <circle cx="“" cy="“" r="“"></circle>
  
  <script>
    document.queryselector（&#39;circle&#39;）。addeventListener（&#39;click&#39;，e => {
      e.target.Style.fill =“ red”;
    }）;
  </script>
  
</svg>

SVG可访问性

您可以为画布提供文字替代方案：

 <canvas aria-label="“" hello aria world img> </canvas>

您也可以在SVG中执行此操作，但是由于SVG及其胆量可以在DOM中，因此我们通常认为SVG是您尝试建立可访问的体验时所使用的。在换句话说，您可以构建一个SVG，辅助技术可以访问并找到具有自己的听觉解释等的链接和子元素。

文字也牢固地在SVG领域。 SVG的字面意思具有元素，该元素可访问且视觉上清晰 - 与文字通常模糊的画布不同。

像素的画布

正如您在下面的Sarah Dranser的比较中看到的那样，画布是一种说跳舞，像素，舞蹈的方式！ 。这是一种有趣的方式来解释该概念比任何干燥的技术情绪都能做得更好。

高度互动的作品具有很多复杂的细节和梯度，是画布的领域。因此，您会看到用画布构建的游戏比SVG更多的原因，尽管总是有例外（请注意，该游戏的简单矢量y-）。

CSS可以与SVG一起玩

我们上面看到SVG可以在DOM中，JavaScript可以进入那里并做事。这个故事与CSS相似。

 <svg viewbox="“">
  
  <circle cx="“" cy="“" r="“"></circle>
  
  
    圆{填充：蓝色； }
  
  
</svg>

请注意，对于这些示例，我如何将<script>和<syter>块放在<svg>中，这是有效的。但是，假设您已经将SVG从字面上的HTML中放入，则可以将其移出，或者让其他外部CSS和JavaScript做同样的事情。</script>

我们有大量的SVG性质和CSS指南。但是，很高兴知道，SVG仍然可以使用CSS很棒的东西，例如：Hover State和Animation！

组合

从技术上讲，它们并非完全相互排斥。可以将

正如布莱克·鲍恩（Blake Bowen）所证明的那样，您甚至可以将SVG放在帆布上非常清脆！

露丝·约翰的比较

莎拉·德拉斯纳（Sarah Drasner）的比较

从此推文中提出。

	DOM/虚拟DOM	帆布
优点
	非常适合UI/UX动画	舞蹈，像素，跳舞！
	非常适合SVG，这是独立的解决方案	非常适合真正令人印象深刻的3D或身临其境的东西
	更容易调试	吨物品的运动
缺点
	带很多物体的坦克	更难使访问
	因为您必须关心昏迷的方式	开箱即用的分辨率不是独立的
		一无所有

Shirley Wu的比较

从此推文中提出。

	SVG	帆布
优点	容易开始	非常表现
	更容易注册用户交互	易于更新
	容易动画
缺点	潜在复杂的DOM	更多工作要开始
	不适合大量元素的表现	处理互动的更多工作
		必须编写自定义动画

许多人认为场景具有许多物体（如雪莉所说的1,000个）是画布的领土。

SVG是默认选择；画布是备份

强烈的看法，但对我来说感觉很正确：

回答它的一种极为基本的方法是“当您无法使用SVG时使用帆布”（“不能”可能意味着动画数千个对象，单独操纵每个像素等）。换句话说，SVG应该是您的默认选择，可以使用您的备份计划。

- 本杰明·德克（Benjamin de Cock）（@bdc）2019年10月2日

包起来

因此，如果我们重新审视前两个要点……

• 有点平淡的图标？ SVG进入DOM，因此类似于按钮内的图标对SVG很有意义 - 更不用说它可以由CSS控制，并具有常规的JavaScript事件处理程序和其他东西
• 类似游戏机的游戏？这将有很多动人的元素，复杂的动画和互动，性能注意事项。这些是画布擅长的东西。

但是这里有很多中间立场。作为日常的网页设计师/开发人员，我发现SVG在实际级别上更有用。我不确定我在画布上做过任何生产工作。部分原因是我不知道帆布。我写了一本关于SVG的书，所以我在那方面做了更多的研究，但是我足够知道SVG正在为我的需求做正确的事情。

以上是何时使用SVG与何时使用帆布的详细内容。更多信息请关注PHP中文网其他相关文章！