r - SVG和Canvas在ggvis和amp;之间的实际差异闪亮的语境

答案简短：

SVG对你来说会更容易，因为已经内置了选择和移动它.SVG对象是DOM对象，所以他们有＆＃34;点击＆＃34;处理程序等。

DIV很好，但很笨重，并且在大数情况下加载了糟糕的性能。

Canvas具有最佳性能，但您必须自己实现托管状态（对象选择等）的所有概念，或者使用库。

答案很长：

HTML5 Canvas只是位图的绘图表面。你设置绘制（用颜色和线条粗细说），绘制那个东西，然后画布不知道那个东西：它不知道它在哪里或者你是什么刚绘制，它只是像素。如果你想绘制矩形并让它们四处移动或者可以选择，那么你必须从头开始编写所有这些代码，包括记住你绘制它们的代码。

另一方面，SVG必须维护对它呈现的每个对象的引用。您创建的每个SVG / VML元素都是DOM中的真实元素。默认情况下，这允许您更好地跟踪您创建的元素，并且默认情况下更容易处理鼠标事件等事件，但是当存在大量对象时，它会显着减慢

那些SVG DOM引用意味着处理你绘制的东西的一些步法是为你完成的。渲染非常大的对象时SVG速度更快，渲染许多对象时速度更慢。

Canvas游戏可能会更快。在SVG中，一个巨大的地图程序可能会更快。如果你想使用Canvas，我有一些关于在这里启动和运行可移动对象的教程。

Canvas对于更快的事物和繁重的位图操作（如动画）会更好，但如果你想要很多交互性，它会占用更多的代码。

我在HTML DIV制作的绘图和Canvas制作的绘图上运行了一堆数字。我可以发表一篇关于每个问题的好处的帖子，但是我会根据你的具体应用给出我的测试的一些相关结果：

我制作了Canvas和HTML DIV测试页面，两者都有可移动的节点。＆＃34; Canvas节点是我创建的对象，并在Javascript中跟踪。 HTML节点是可移动的Div。

我在两次测试中都添加了100,000个节点。他们表现完全不同：

HTML测试选项卡需要永久加载（时间略短于5分钟，Chrome要求首次终止该页面）。 Chrome的任务经理表示该标签占用了168MB。当我看着它时占用12-13％的CPU时间，当我不看时它占用0％。

“画布”标签在一秒钟内加载，占用30MB。它总是占用CPU时间的13％，无论是否正在查看它。（2013年编辑：他们主要修复了这个问题）

在HTML页面上拖动更加平滑，这是设计所期望的，因为当前设置是在Canvas测试中每30毫秒重绘一次。 Canvas有很多优化可供选择。（画布失效是最简单的，也是裁剪区域，选择性重绘等等。只取决于你实现的感觉）

毫无疑问，你可以让Canvas在对象操作中更快地成为那个简单测试中的div，当然在加载时间里要快得多。 Canvas中的绘图/加载速度更快，并且具有更大的优化空间（即，排除屏幕外的内容非常容易）。

结论：

SVG可能更适用于少量项目的应用程序和应用程序（少于1000个？真的取决于）对于成千上万的对象和仔细操作，Canvas更好，但需要更多的代码（或库）来实现它。 HTML Divs很笨重，不能缩放，只能使用圆角来制作圆形，这使得复杂的形状成为可能，但涉及数百个微小的像素范围的div。疯狂随之而来。

我已经过了以下链接的内容。

请参阅此链接了解更多详情 HTML5 Canvas vs. SVG vs. div