需要加速我的 SVG.我可以转换为 WebGL 或画布吗? [英] Need to speed up my SVG. Could I convert to WebGL or canvas?

问题描述

我有一个包含 10138 个部分的 SVG 绘图，所以它运行缓慢.
我想让它运行起来更像

解决方案

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

• SVG 与要绘制的对象数量成反比
• 画布与分辨率成反比.

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

您也可以尝试混合使用它们(参见 这里了解更多详情).
以下是一些有用的资源:

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

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

解决方案

As a simplified rule of thumb:

• SVG scales reciprocally with number of objects to be drawn
• Canvas scales reciprocally with resolution.

So I 10138 objects to be kept in memory with SVG will slow down things (though I can't say what the hard limits are). If you get into this range of objects I believe that canvas and WebGL might provide better performances. Most modern browser already support hardware accelerated canvas rendering.
However doing user interaction is more involved with Canvas compared to SVG.

You can also try to mix them (see here for more details).
Here are some useful resources:

• SVG swarm vs Canvas swarm (using D3.js)
• Stackoverflow thread with useful infos

这篇关于需要加速我的 SVG.我可以转换为 WebGL 或画布吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！