我已经看过了
What is the difference between SVG and HTML5 Canvas?
&& https://en.wikipedia.org/wiki/Canvas_element#Canvas_versus_Scalable_Vector_Graphics_.28SVG.29
所以我知道基本的区别，但我想知道除了 SVG 无法处理数据中的 NA 之外，是否有人在 ggvis 和闪亮的上下文中遇到过两者之间的任何实际区别
【问题讨论】：
简短的回答：
SVG 对您来说会更容易，因为已经内置了选择和移动它。SVG 对象是 DOM 对象，因此它们具有“点击”处理程序等。
DIV 还可以，但很笨重，并且在大量加载时性能很差。
Canvas 具有最好的性能，但您必须自己实现托管状态（对象选择等）的所有概念，或者使用库。
长答案：
HTML5 Canvas 只是位图的绘图表面。您设置绘制（例如用颜色和线条粗细），绘制那个东西，然后 Canvas 不知道那个东西：它不知道它在哪里，也不知道你刚刚画的是什么，它是只是像素。如果您想绘制矩形并让它们四处移动或可选择，那么您必须从头开始编写所有这些代码，包括记住您绘制它们的代码。
另一方面，SVG 必须维护对其呈现的每个对象的引用。您创建的每个 SVG/VML 元素都是 DOM 中的真实元素。默认情况下，这可以让您更好地跟踪您创建的元素，并且默认情况下更容易处理鼠标事件等事情，但是当有大量对象时它会显着减慢
那些 SVG DOM 引用意味着处理您绘制的东西的一些步骤是为您完成的。并且 SVG 在渲染非常大的对象时速度更快，但在渲染许多对象时速度较慢。
在 Canvas 中游戏可能会更快。一个巨大的地图程序在 SVG 中可能会更快。如果您确实想使用 Canvas，我有一些关于启动和运行可移动对象的教程。
Canvas 更适合更快的事情和繁重的位图操作（如动画），但如果您想要大量的交互性，则需要更多的代码。
我在 HTML DIV 制作的绘图与 Canvas 制作的绘图上运行了一堆数字。我可以发表一篇关于每种方法的好处的大文章，但我会给出一些相关的测试结果，以供您针对您的特定应用考虑：
我制作了 Canvas 和 HTML DIV 测试页面，它们都有可移动的“节点”。画布节点是我在 Javascript 中创建并跟踪的对象。 HTML 节点是可移动的 Div。
我为我的两个测试中的每一个添加了 100,000 个节点。他们的表现截然不同：
HTML 测试选项卡需要很长时间才能加载（时间略低于 5 分钟，Chrome 首次要求终止该页面）。 Chrome 的任务管理器说该选项卡占用了 168MB。看的时候占 CPU 时间的 12-13%，不看的时候占 0%。
Canvas 选项卡在一秒钟内加载完毕，占用 30MB。它也一直占用 13% 的 CPU 时间，无论是否有人在看它。 （2013 年编辑：他们已经修复了这个问题）
在 HTML 页面上拖动更流畅，这是设计所期望的，因为当前设置是在 Canvas 测试中每 30 毫秒重绘所有内容。为此，Canvas 有很多优化。 （画布失效是最简单的，还有裁剪区域、选择性重绘等。只是取决于你想要实现的程度）
毫无疑问，您可以让 Canvas 在对象操作方面更快，就像在那个简单测试中的 div 一样，当然在加载时间上也快得多。 Canvas 中的绘图/加载速度更快，并且还有更多的优化空间（即，排除屏幕外的内容非常容易）。
结论：
SVG 可能更适合项目很少的应用程序和应用程序（少于 1000 个？真的取决于） Canvas 更适合数千个对象和仔细的操作，但需要更多的代码（或库）才能让它落地。 HTML div 很笨重且无法缩放，只能用圆角制作圆形，制作复杂的形状是可能的，但涉及数百个微小的像素宽 div。疯狂随之而来。
我有来自以下链接的过去内容。
请查看此链接了解更多详情 HTML5 Canvas vs. SVG vs. div
【讨论】：