如何处理渲染速度较慢的SVG图像



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

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

我们有几十种语言的数千份操作员手册,所以我们无法对单个图像进行任何手动调整。有了这个限制,处理渲染缓慢的SVG图像的最佳策略是什么?

如果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慢得多,所以这似乎不适用于您的图像。

最新更新