需要加快我的SVG。我可以转换为WebGL或画布吗？

Question

我有一个带有10138个零件的SVG图纸，因此运行缓慢 我想让它更像http://workshop.chromeexperiments.com/globe

以下是我正在考虑的解决方案/问题

• 有没有办法让SVG部件以较少处理器密集的方式呈现？
• 我可以将SVG转换为WebGL或画布吗？
• 我可以让它作为SVG运行但是通过WebGL或画布渲染吗？

我只是想让它更快......想法？

这是截图

Answer 1

作为简单的经验法则：

• SVG与要绘制的对象数量相互缩放
• Canvas在分辨率上相互缩放。

所以我用SVG保存在内存中的10138个对象会减慢速度（虽然我不能说硬限制是什么）。如果你进入这一系列的对象，我相信canvas和WebGL可能会提供更好的性能。大多数现代浏览器已经支持硬件加速画布渲染 然而，与SVG相比，Canvas更多地涉及用户交互。

您也可以尝试混合它们（有关详细信息，请参阅here） 以下是一些有用的资源：

• SVG swarm vs Canvas swarm（使用D3.js）
• Stackoverflow主题与有用的信息

Answer 2

具有大量碎片的SVG的减速来自SVG的非保留模式。如果没有关于SVG外观和行为方式的更多细节，很难提出具体的建议。所以一般来说：

• 如果您的图形通常是静态的（您不需要跟踪每个图形对象的鼠标事件），则可以使用HTML5画布（其中绘图命令将像素点亮为图像，此后您基本上具有静态图像图像）。

• 如果您的图形有很多重复部分，则使用带有<use>元素的SVG可能会减少内存占用并提高性能。

Answer 3

使用http://sigmajs.org/

sigma.js是一个开源的轻量级JavaScript库，用于使用HTML canvas元素绘制图形。它专门设计用于：

显示从图形可视化软件（如Gephi）导出的交互式静态图形 动态显示动态生成的图形