需要加速我的SVG。我可以转换为WebGL或canvas吗？

我有一个包含10138个部分的SVG图形，所以运行速度很慢。
我想让它跑得更像

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

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

我只是想快点。。想法

这是一个截图

---

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

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

• 如果图形中有大量重复的部分，那么将SVG与
  元素一起使用可能会减少内存占用并提高性能

---

作为简化的经验法则：

• SVG根据要绘制的对象数量进行交互缩放
• 画布以分辨率进行交互缩放

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

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

• vs（使用D3.js）
• 提供有用信息的线程

---

有很多方法可以做到这一点，但如果您不展示示例，就无法解释为什么您的示例运行缓慢。您可以尝试使用浏览器提供的性能工具，看看哪些操作比较昂贵。我发布了一个屏幕截图，也许这会更有帮助。我希望这个问题与图形无关：）--我遇到了SVG复杂性问题，导致浏览器动画变慢。我们还没有真正使用SVG，但是，应该可以使用Famo.us进行SVG的保留模式渲染。如果您或这里的任何其他人是SVG大师，那么这是一条值得探索的道路。（免责声明：我为名人工作。我只是在寻找其他东西时偶然发现了这个问题）。归根结底，基于XML的标记语言只有两种类型：子类和字符串。编组类型是一个巨大的瓶颈。若要为尝试此操作的任何人添加更多内容，请查看core中的Surface.js模块是如何实现的。您可能需要制作一个类似的SVGSurface.js模块。然后，将你正在制作的东西分解成可组合的部分，从中继承。我在这里猜测。您可以向我们的首席架构师mark lu（mark@famo.us）询问具体问题。