iOS Safari SVG in HTML img element not working?

Question

According to Can I Use the ability to reference a SVG in an <img/> element is well supported in iOS Safari. However in my site I am having a problem getting the image to render:

The HTML is rather simple:

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

And (according to curl) the SVG is being served with the 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

Also it is valid SVG. Any ideas?

Answer 1

It turns out the image size inside the SVG is bound by the same limitations as a raster image in Mobile Safari. In the original SVG the root node looked like this:

<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">

This gave the image a total size of 12,146,148. According to Apple's Mobile Safari Documentation (source)

Because of the memory available on iOS, there are limits on the number of resources it can process:

• The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.
• That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image.

It appears this applies to SVG as well. The Solution is to add a viewBox and then set the height and width to a value lower than the limit. Because the SVG is a vector image it will render at the maximum resolution for the display but the image will be treated as acceptable in Mobile Safari.

The root node now looks like this:

<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">

And the site now looks like this: