如何处理缓慢渲染的 SVG 图像？答案

【问题标题】：How to handle slow rendering SVG images?如何处理缓慢渲染的 SVG 图像？
【发布时间】：2018-11-09 08:00:08
【问题描述】：

我们正在构建一个移动应用程序，该应用程序使用嵌入式 Web 视图来显示包含大量技术插图的操作员手册。插图来自 EPS 矢量文件，我们将其转换为 SVG 以获得清晰且可缩放的图像。

不幸的是，我们遇到了一些图像变得非常大且速度慢的情况。例如，我们有一个 4.5MB 的 SVG 图像，由 23000 个单独的路径组成。此图像在 iOS 上几乎可以立即显示，但在现代 Android 手机上渲染大约需要 4 秒，这严重降低了用户体验。

我们拥有数十种语言的数千本操作员手册，因此我们无法对单个图像进行任何手动调整。有了这个约束，处理缓慢渲染 SVG 图像的最佳策略是什么？

【问题讨论】：

少画线。这些线条中的每一条都对图像至关重要吗？它们是否都需要同时显示，或者只有在用户放大到较小区域时才能显示，即它们是否是通常可以省略的细节？
如果问题出现在 Chrome 上，请将错误报告发布到 bugs.chromium.org/p/chromium/issues，并附上您的一个示例，解释显着的性能差异。根据我的经验，性能具有非常高的优先级，您很有可能会在未来的版本中对此进行改进。
我在过去看到过这些大数字，主要用于包含颜色渐变的图形。据我了解，Postscript 中的某些渐变模型与 SVG 中的渐变模型不兼容，因此在导入时它们会转换为大量分层的纯色形状（或 even to raster images）。您可以尝试使用不同的库（poppler、Cairo、Inkscape 甚至 dvisgm，这是我第一次在 Google 搜索中找到的）进行转换。

标签： html performance svg rendering freeze

【解决方案1】：

如果 SVG 仅由具有单一纯色的路径和形状组成，那么您唯一的选择就是尝试以某种方式简化 SVG。合并形状、展平组等。

例如，如果两条路径具有相同的颜色、变换、不透明度等，您可以合并它们的路径数据。这是通过删除其中一条路径并简单地连接两条路径的路径数据来完成的。

这是一个包含两个路径的示例，每个路径都嵌套在一个组中：

<g fill="#1b8f00">
    <path d="M80 80 A45 45,0,0,0,125 125L125 80Z" />
</g>
<g fill="#1b8f00">
    <path d="M30 20 A25 25,0,1,0,45 25L45 30Z" />
</g>

通过将fill 属性移动到路径中并将两条路径的路径数据d 连接起来，可以简化为：

<path color="#1b8f00" d="M80 80 A45 45,0,0,0,125 125L125 80ZM30 20 A25 25,0,1,0,45 25L45 30Z" />

如果您的 SVG 使用过滤器和蒙版，您可以尝试其他一些方法。但在这些情况下，通常 iOS 比 Android 慢得多，所以看起来这不适用于您的图像。

【讨论】：