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

Question

根据Can I Use，iOS Safari中支持在<img/>元素中引用SVG的功能。但是在my site中，我在渲染图像时出现问题：

HTML非常简单：

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

并且（根据卷曲）SVG与内容类型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

也是valid SVG。有什么想法吗？

Answer 1

事实证明，SVG内部的图像大小受到与Safari 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。根据Apple的Mobile Safari文档（source）

  

由于iOS上可用的内存，它可以处理的资源数量有限制：

     

  
• 对于RAM小于256 MB的设备，解码的GIF，PNG和TIFF图像的最大尺寸为3百万像素，对于RAM大于或等于256 MB的设备，最大尺寸为5百万像素。
  
• 即，对于RAM小于256 MB的设备，请确保宽度*高度≤3* 1024 * 1024。注意，解码的尺寸远大于图像的编码尺寸。
  

这似乎也适用于SVG。解决方案是添加viewBox，然后将高度和宽度设置为低于限制的值。由于SVG是矢量图像，因此它将以最大分辨率显示，但在Mobile 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">

该网站现在看起来像这样：