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

Question

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

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

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

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

这是一个截图

Answer 1

作为简化的经验法则:

• SVG与要绘制的对象的数量相互缩放
• 帆布与分辨率相互作用.

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

您也可以尝试混合它们(有关详细信息,请参阅此处).
以下是一些有用的资源:

• SVG swarm vs Canvas swarm(使用D3.js)
• Stackoverflow线程与有用的信息

Answer 2

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

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

• 如果您的图形具有大量重复部分,则使用带<use>元素的SVG 可能会减少内存占用并提高性能.