SVG vs Canvas的“风”图表

Question

我遇到this question，我知道没有银弹，但我希望按照this NYTimes interactive

的方式制作一张图表。

我通过检查员看到它是用画布制作的。我想知道，这有一个令人信服的理由吗？ SVG中相同的图表+动画会有效吗？或者是画布应该用于动画这个复杂的一般规则吗？

Answer 1

我不了解表现，但是有多种理由可以选择一个人而不是另一个人。这是一个让您了解差异的页面。这可以解释他们的决定：

http://www.htmlgoodies.com/html5/other/html5-canvas-vs.-svg-choose-the-best-tool-for-the-job.html#fbid=uWFouE4ztEY

当然，其他因素也会发挥作用，例如数据源等......例如，如果您从服务器获取大量数据，SVG似乎很诱人，因为您可以将其格式化为XML和提供它。

此外，这个决定可能会更加平庸;它可能只是他们所知道的，拥有工具或者他们能够最快找到文档的东西。

可悲的是，并非所有软件决策都是基于优点做出的。决定往往更加机会主义和匆忙。

Answer 2

我的个人经历基本上坚持以下几点：

当有形状元素（圆形，直线，椭圆，路径，多边形）可以获取附加的单个事件（onclick，mouseover等）时使用SVG

当您可以访问像素以显示图形时，请使用CANVAS。像素控制允许使用SVG无法实现复杂的图形，并且在许多情况下更加省力。

只是我的意见......

Answer 3

是的，请<canvas>。

SVG vs canvas：如何选择：

• SVG ：用于查看和打印静态图像的高保真复杂矢量文档
• <canvas> ：复杂的场景和实时动画，高性能（滤镜，光线追踪器），视频处理。

访问SVG vs canvas: how to choose了解详情。