SVG与基于HTML5 Canvas的图表技术比较

Question

我需要使用Python后端在浏览器上绘制图表（这可能并不重要）。有许多库可用，如JQPlot、D3、Google Charts。

但是，如果你分类它们，它们要么基于HTML5 Canvas，要么基于SVG。它们都是各自领域中重要的技术。

for charting as a subject, shall I go with SVG based libraries or 
HTML5 Canvas based libraries. What are downside and benefits of 
both approaches. 

我没有绘制图表的经验，不想在开始项目后遇到困难。

- Vivek Jha

---

请查看MSDN的这篇文章：https://msdn.microsoft.com/zh-cn/library/ie/gg193983(v=vs.85).aspx - Adi

Answer 1

拥有大量数据的项目可能更适合使用canvas。SVG方法通常会为每个点创建一个DOM节点（除非您创建路径），这可能会导致以下问题：

1. DOM树大小激增

2. 性能问题

使用路径，您可以解决这个问题，但这样会失去交互性。

比如你正在构建一个股票图表。如果你只需要展示最多5年和交易结束后的数据样本，我认为答案很明显是SVG。如果你要查看沃尔玛从第一天开始的历史数据或者每分钟的完整交易信息，你必须仔细考虑SVG。可能需要采用高级内存管理和按需获取的方法，因为SVG将崩溃，特别是如果您将一个样本对应一个SVG节点。

如果需要交互性，SVG很容易胜出，因为它具有以下优势：

• 它是保留模式API
• 您可以使用典型的事件处理程序
• 您可以轻松添加/删除节点等

当然，您会发现如果需要完全的交互性，可能会违背允许SVG缩放的机制，例如路径折叠，因此这里存在固有的张力。

在极端情况下将会有一种平衡。如果尺寸很小，那么答案就是SVG。如果尺寸很大且没有交互性，那么答案就是仅使用路径绘制的SVG或Canvas。如果尺寸很大并且需要交互性，则必须使用Canvas或复杂的SVG，在任何情况下都很复杂。

一些库提供了Canvas和SVG渲染，例如ZingChart和Dojo。其他人则倾向于只使用其中的一种选项。

- Jailbot

---

点赞！我正在尝试制作实时蜡烛图，我读了微软的一篇文章https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg193983(v=vs.85)，其中提到实时图表应该使用Canvas来完成，在我的情况下，我需要通过websocket每秒更新50次蜡烛图，并且在大多数情况下不到1000个蜡烛图，你认为Canvas对于相同的问题是否有意义，还是你会选择SVG？ - PirateApp

使用类似 https://www.chartjs.org 这样的库，您可以拥有一个基于画布的解决方案，并通过事件处理程序获得交互的好处。一些流行的现有插件，如 https://github.com/chartjs/chartjs-plugin-annotation，允许进行精细的交互，例如 onMouseEnter、onMouseLeave、onClick 等。 - A. Masson

Answer 2

由于SVG是基于向量的，因此它可以自由缩放，这也导致它在高分辨率显示器上非常清晰，并且打印时也很清晰。使用canvas可以通过以2倍分辨率渲染并缩放画布来解决这个问题，但这只是一种半成品解决方案。

我认为SVG是现代化的方式，也是未来的发展方向。

如果您担心渲染速度，如果您有许多节点，请考虑使用canvas，因为您基本上正在使用自己的基于JavaScript的渲染代码来渲染这些相同的节点。您确实可以预测仅需要渲染一次，但如果您仅渲染一次，这也意味着您失去了在缩放或执行各种交互操作时重新渲染的能力。如果性能是一个问题，您可以通过对数据进行子采样，取移动平均值并仅绘制每x行一次等简化SVG，具体取决于您要做什么。但是，我们正在谈论几乎没有影响的数千个节点。

如果您正在构建基于Web的光栅图形编辑器或某些本质上是光栅图形的东西，则Canvas仍然有其用处，但如果我们正在查看图表，则我们正在谈论本质上是基于向量的东西。

- thomasrutter