用于移动 safari 的 SVG 太多？答案

【问题标题】：Too many SVG's for mobile safari?用于移动 safari 的 SVG 太多？
【发布时间】：2023-03-07 16:51:01
【问题描述】：

我正在为我的作品集网站制作一个照片滑动图库，使用 Hugo 构建。代码不是最干净的，但它是我当前使用 HarpJS 构建的一个巨大升级。在这个过程中，我也学到了很多关于 AWS 和 GCP 的知识。

一切都在桌面上运行，直到昨天，一切都在移动设备上运行。

我在所有缩略图上运行Primitive，并输出 2500 个形状的 SVG。这可能是主要的矫枉过正，但我喜欢这种细节层次的视觉效果。它变得非常绘画。

现在页面在 Mobile Safari 中不断崩溃，这会愚蠢地关闭我 Mac 上的移动网络检查器 - 所以我不确定故障发生在哪里。

每个 SVG 大约为 150kb。当我交换 SVG 并再次使用 JPG 时，一切正常，即使这会使页面变大。我怀疑我的延迟加载插件不起作用，但我不确定。（我正在使用 Unveil - luis-almeida.github.io/unveil。）

这是我的暂存桶上画廊页面的链接：staging.iammatthias.com

任何帮助/建议将不胜感激！

【问题讨论】：

标签： javascript svg google-cloud-platform photoswipe hugo

【解决方案1】：

这无疑是一个内存限制问题。 Safari 移动版因在渲染 svg 时存在内存限制而闻名。可以找到解释该问题的文章 - 但归结为严格限制您在页面上一次性渲染的 SVG 数量（您的网站甚至在桌面 safari 上都遇到了所有这些 SVG）。使用 iOS 解决此问题的唯一方法是一次从服务器延迟加载几个图像，或者切换到不使用 SVG 来处理此用例。

附加阅读的几个链接：

https://www.richdynamix.com/blog/svg-vs-png-in-sprites-an-ios-issue

https://discussions.apple.com/thread/7530327?start=0&tstart=0

【讨论】：

谢谢，我担心是这种情况。我会考虑将 SVG 转换回 JPG
我喜欢绘画般的外观。您不能只获取 svg，在 illustrator 中打开它们，然后将它们重新导出为 jpg 或 png，从而保持外观 - 没有内存开销？
这是一个选项，但由于数量太多而有点站不住脚！但我认为 Primitive 有一个 PNG 输出 - 我将在今晚晚些时候使用它。