Question

我正在开发一个使用IMG标签显示SVG文件的移动网站。 SVG文件大约为500 kB。该图像在Android版本的Firefox和Chrome中呈现正常。但是，在iOS Safari中，我只会看到带有问号的可怕的小蓝框。

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

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

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

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

P.S。当我直接浏览SVG文件而不是通过HTML页面时，我能够查看图像。我也可以在IFRAME中查看SVG文件。但不使用IMG标签。

Answer 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像素之间。 500万像素的限制对应于2289x2289的图像，因此这与Duopixel's comment一致，表明渲染的大小是最重要的。

iOS Safari的SVG文件大小限制

1 个答案: