canvas - Need to speed up my SVG. Could I convert to WebGL or canvas?

Question

I have an SVG drawing with 10138 parts, so it runs slowly.
I want to make it run more like http://workshop.chromeexperiments.com/globe

Here are the solutions/questions I'm considering

• Is there any way to have the SVG parts render in a less processor-intensive way?
• Can I convert the SVG to WebGL or canvas?
• Can I have it run as SVG but render thru WebGL or canvas?

I just want to make it faster .. thoughts?

Here is a screenshot

Answer 1

作为一个简化的经验法则：

• SVG 与要绘制的对象数量成反比
• 画布与分辨率相互缩放。

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

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

• SVG swarm vs Canvas swarm（使用 D3.js）
• 具有有用信息的Stackoverflow线程

Answer 2

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

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

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