即时模式和保留模式

区分即时模式和保留模式至关重要。HTML5 Canvas是前者的示例，SVG是后者的示例。

即时模式意味着，一旦您的绘图在画布上，画布就会停止跟踪它。换句话说，作为开发人员，您需要制定绘制对象的命令，创建和维护最终输出应是什么样子的模型或场景，并指定需要更新的内容。浏览器的图形API只是将您的绘图命令传达给浏览器，然后浏览器执行这些命令。

SVG使用保留模式，您只需发出要在屏幕上显示的内容的绘图指令，浏览器的图形API就会创建最终输出的内存中模型或场景，并将其转换为浏览器的绘图命令。

作为即时图形系统，Canvas没有DOM或文档对象模型。使用Canvas，您绘制像素，系统会忘记所有这些像素，从而减少了维护绘图内部模型所需的额外内存。使用SVG，您绘制的每个对象都会添加到浏览器的内部模型中，这使得您作为开发人员的生活更容易一些，但在性能方面会付出一些代价。

基于即时模式和保留模式之间的区别，以及Canvas和SVG各自的其他特定特性，可以概述一些使用一种技术而不是另一种技术可能更好地服务于项目目标的情况。

HTML5 Canvas：优点和缺点

HTML5 Canvas规范明确建议作者不应在有其他更合适的方法可用时使用元素。

例如，对于图形丰富的元素，最好的工具是HTML和CSS，而不是（顺便说一句，SVG也不是）。Zim JS画布框架的创建者和创始人Dr Abstract证实了这种观点，他写道：

DOM和DOM框架擅长显示信息，特别是文本信息。相比之下，画布是一张图片。文本可以添加到画布中，并且可以使其具有响应性，但文本不能像在DOM上那样轻松地被选择或搜索。长滚动文本页面或文本和图像页面是DOM的绝佳用途。DOM非常适合社交媒体网站、论坛、购物以及我们习惯使用的所有信息应用程序。——“何时使用JavaScript画布库或框架”

因此，这是一个关于何时不使用的明确示例。但是，何时是一个不错的选择呢？

（此处应嵌入Sarah Drasner的推文截图）

HTML5 Canvas擅长什么？

Alvin Wan根据绘制的对象数量和对象或画布本身的大小，对Canvas和SVG的性能进行了基准测试。他将结果总结如下：

总之，当处理数百甚至数千个对象时，DOM渲染的开销更为明显；在这种情况下，Canvas是明显的赢家。但是，画布和SVG都不受对象大小的影响。鉴于最终统计数据，画布在性能方面提供了明显的优势。

根据我们对Canvas的了解，特别是它在绘制大量对象方面的出色性能，以下是一些可能适合甚至优于SVG的场景。

游戏和生成式艺术

对于图形密集型、高度交互式游戏，以及生成式艺术，Canvas通常是最佳选择。

光线追踪

光线追踪是一种创建3D图形的技术。

光线追踪可用于通过追踪图像平面中像素的光线路径并模拟其与虚拟对象的相遇效果来填充图像……光线追踪实现的效果……范围从……从简单的矢量图形创建逼真的图像到应用类似照片的滤镜以去除红眼。——SVG与Canvas：如何选择，Microsoft Docs。

如果您好奇，这是Mark Webster正在运行的光线追踪应用程序。

但是，尽管HTML5 Canvas肯定比SVG更适合这项任务，但这并不一定意味着光线追踪最好在元素上执行。事实上，对CPU的压力可能相当大，以至于浏览器可能会停止响应。

在小表面上绘制大量对象

另一个示例是应用程序需要在相对较小的表面上绘制大量对象的场景——例如非交互式实时数据可视化，例如天气模式的图形表示。

视频中的像素替换

如这篇HTML5 Doctor文章所示，另一个适合使用Canvas的示例是将视频背景颜色替换为不同的颜色、另一个场景或图像。

HTML5 Canvas不擅长什么？

另一方面，在许多情况下，与SVG相比，Canvas可能不是最佳选择。

可缩放性

大多数可缩放性是优势的场景都将更好地使用SVG而不是Canvas。高保真、复杂的图形，如建筑和工程图、组织结构图、生物图等，就是这种情况的例子。

使用SVG绘制时，放大图像或打印图像会保留所有细节，达到很高的质量水平。您还可以从数据库生成这些文档，这使得SVG的XML格式非常适合这项任务。

此外，这些图形通常是交互式的。例如，当您在线预订机票时，请考虑座位图，这使其成为SVG等保留图形系统的绝佳用例。

也就是说，借助CreateJS和Zim（扩展CreateJS）等一些优秀的库，开发人员可以相对快速地将其鼠标事件、命中测试、多点触控手势、拖放功能、控件等等集成到基于Canvas的创作中。

可访问性

尽管您可以采取一些步骤来提高Canvas图形的可访问性——一个好的Canvas库（如Zim）可以帮助您加快此过程——但在可访问性方面，Canvas并不出色。您在画布表面上绘制的内容只是一堆像素，辅助技术或搜索引擎机器人无法读取或解释这些像素。这是SVG更可取的另一个领域：SVG只是XML，这使得人和机器都可以读取它。

不依赖于JavaScript

如果您不想在应用程序中使用JavaScript，那么Canvas就不是您的最佳选择。事实上，您使用元素的唯一方法是使用JavaScript。相反，您可以使用Adobe Illustrator或Inkscape等标准矢量编辑程序绘制SVG图形，并且可以使用纯CSS来控制其外观并执行引人注目的、细微的动画和微交互。

将HTML5 Canvas和SVG结合用于高级场景

在某些情况下，您的应用程序可以通过结合HTML5 Canvas和SVG来获得两全其美。例如，基于Canvas的游戏可以使用矢量编辑程序生成的SVG图像作为精灵，以利用其可缩放性和与PNG图像相比更小的下载大小。或者，绘图程序可以使用SVG设计其用户界面，并嵌入元素用于绘图。

最后，像Paper.js这样功能强大的库可以使您能够在HTML5 Canvas之上编写矢量图形脚本，从而为开发人员提供了一种方便的方式来同时使用这两种技术。

结论

在本文中，我探讨了HTML5 Canvas和SVG的一些关键特性，以帮助您确定哪种技术最适合特定任务。

答案是什么？

Chris Coyier同意Benjamin De Cock的观点，后者在推特上写道：

回答这个问题的一种极其基本的方法是“当您无法使用svg时使用canvas”（其中“无法”可能意味着动画化数千个对象、单独操作每个像素等）。换句话说，SVG应该是您的默认选择，canvas是您的备用方案。

— Benjamin De Cock (@bdc) 2019年10月2日

Dr Abstract提供了许多最适合使用Canvas构建的事物清单，包括交互式徽标和广告、交互式信息图表、电子学习应用程序等等。

在我看来，对于何时最好使用Canvas而不是SVG，并没有什么硬性规定。即时模式和保留模式之间的区别表明，在构建图形密集型游戏等方面，HTML5 Canvas是无可争议的赢家，而对于平面图像、图标和UI元素等，SVG则更可取。但是，在这两者之间，HTML5 Canvas还有扩展其应用范围的空间，特别是考虑到各种强大的Canvas库可以提供什么。它们不仅使在同一图形工作中更容易同时使用这两种技术，而且还使Canvas原生项目中一些难以实现的功能（如交互式控件和事件、响应能力、可访问性功能等等）现在可以为大多数开发人员所用，这为HTML5 Canvas更有趣的用途打开了大门。

Canvas与SVG的常见问题解答 (FAQs)

（此处应包含FAQ部分，根据原文内容进行改写，保持简洁明了，并使用更自然的语言表达。）