iOS Safari中的HTML img元素中的SVG不起作用？

Question

根据Can I Use的数据，iOS Safari已经很好地支持在<img/>元素中引用SVG。然而，在我的网站上，我遇到了一个渲染图像的问题：

HTML代码非常简单：

<img src='E1M1.svg' class='img-responsive'/>

根据curl的显示，SVG以Content-Type image/svg+xml的形式被提供：

HTTP/1.1 200 OK
x-amz-id-2: R7QpUKqnC7vYY/60mGfkkpk528vUlwwaMf8QS00Jvgg5H1EZk7NP6rkFdfvZsC3lLKX1HJXfqj8=
x-amz-request-id: 9D47859B55E37B45
Date: Thu, 22 May 2014 21:36:59 GMT
x-amz-meta-s3cmd-attrs: uid:501/gname:staff/uname:jasonsperske/gid:20/mode:33188/mtime:1400783207/atime:1400783431/ctime:1400783207
Last-Modified: Thu, 22 May 2014 18:39:44 GMT
ETag: "3d7db47140e0f7e34e33ae8cbefaf022"
Content-Type: image/svg+xml
Content-Length: 41276
Server: AmazonS3

此外，它是有效的SVG。有什么想法吗？

- Jason Sperske

Answer 1

原来，在SVG中，图片大小的限制与移动版Safari中光栅图像的限制相同。在原始的SVG文件中，根节点如下：

<svg baseProfile="tiny"
     version="1.2"
     height="4298px"
     width="2826px"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     xmlns:xlink="http://www.w3.org/1999/xlink">

这导致该图像的总大小为12,146,148。根据苹果的移动Safari文档 (来源)

由于iOS可用的内存有限，对可以处理的资源数量有限制:

• 对于RAM小于256 MB的设备，解码后GIF、PNG和TIFF图像的最大大小为3兆像素，而对于RAM大于等于256 MB的设备，则为5兆像素。
• 也就是说，确保宽度 * 高度 ≤ 3 * 1024 * 1024，对于RAM小于256 MB的设备而言。请注意，解码后的大小远大于图像的编码大小。

看起来这也适用于SVG。解决方案是添加viewBox，然后将高度和宽度设置为低于限制的值。因为SVG是矢量图像，所以它将以显示器的最大分辨率呈现，但在移动Safari中，该图像将被视为可接受。

根节点现在是这样的:

<svg baseProfile="tiny"
     version="1.2"
     height="1024"
     width="1024"
     viewBox="0 0 4298 2826"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     xmlns:xlink="http://www.w3.org/1999/xlink">

现在这个网站看起来是这样的：

- Jason Sperske