iOS Safari 的 SVG 文件大小限制答案

【问题标题】：SVG file size limits for iOS SafariiOS Safari 的 SVG 文件大小限制
【发布时间】：2013-06-07 13:15:01
【问题描述】：

我正在开发一个使用 IMG 标签来显示 SVG 文件的移动网站。 SVG 文件大约 500 kB。该图像在 Firefox 和 Chrome 的 Android 版本中呈现正常。然而，在 iOS Safari 中，我只能看到一个可怕的蓝色小盒子，里面有一个问号。

我知道 iOS 中图像文件的大小是有限制的。根据苹果的Safari Web Content Guide：

对于 RAM 小于 256 MB 的设备，解码的 GIF、PNG 和 TIFF 图像的最大大小为 3 兆像素，对于 RAM 大于或等于 256 MB 的设备，最大大小为 5 兆像素。

也就是说，对于 RAM 小于 256 MB 的设备，确保宽度 * 高度 ≤ 3 * 1024 * 1024。请注意，图像的解码大小远大于编码大小。

我认为 SVG 文件的大小有一些限制，但由于它们是矢量化的，因此用解码像素来描述它们的大小并没有什么意义。有谁知道 SVG 文件的限制是如何确定的？

附：当我直接浏览 SVG 文件而不是通过 HTML 页面时，我可以查看图像。我还可以在 IFRAME 中查看 SVG 文件。但不使用IMG标签。

【问题讨论】：

在幕后，浏览器仍将渲染矢量并将其视为带有图像标签的位图，因此适用相同的约束。您的 SVG 的尺寸是多少？您的 SVG 中是否嵌入了 data-uris？
在我的例子中，渲染的 SVG 文件的大小是由视口的尺寸决定的。在 iPhone 上，它会是 600x600 之类的东西。在 iPad 上，它更像是 1500x1500。根据我的计算，这些尺寸仍然符合我上面发布的限制。
是的，这些尺寸不应该给你带来麻烦，所以你可以放弃它。但是，500 KB 的矢量图像太大了，您是否嵌入了位图图像？
我同意 500 KB 很大。没有位图，但它是一个非常复杂的图像。有很多细节，但大部分只有在用户放大时才能看到。
这些限制是否仍然适用于更新版本的 iOS Safari？

标签： ios svg mobile-safari

【解决方案1】：

我制作了一些不同大小的测试 SVG 文件。它们看起来像这样：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">
    <text x="100" y="100" font-size="50">2000x2000</text>
</svg>

使用 BrowserStack 模拟 iPhone 5 和第三代 iPad，我发现故障点介于 2200x2200 和 2400x2400 像素之间。 5 兆像素的限制对应于 2289x2289 的图像，因此这与 Duopixel's comment 表示渲染大小是最重要的一致。

【讨论】：

值得注意的是，它必须是总面积，而不仅仅是宽度/高度，因为我有一个 400 像素高的 SVG 精灵图，宽度为 12,000 像素就可以了，但是一旦超过12,000px 它坏了。我将其重新格式化为方形格式，最终为 2886px x 2405px，产生与 400px x 12,000px SVG 相同的结果。