SVG file size limits for iOS Safari

Question

I am developing a mobile website which uses an IMG tag to display an SVG file. The SVG file is about 500 kB. The image renders OK in Android versions of Firefox and Chrome. However, in iOS Safari, I get only the dreaded tiny blue box with a question mark in it.

I am aware that there is a limit on the size of image files in iOS. According to Apple's Safari Web Content Guide:

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.

I imagine that there is some limit on the size of SVG files, but since they are vectorized, it doesn't really make sense to describe their size in terms of decoded pixels. Does anyone know how the limit on SVG files is determined?

P.S. When I put browse the SVG file directly instead of through an HTML page, I am able to view the image. I am also able to view the SVG file inside of an IFRAME. But not using the IMG tag.

Answer 1

I made some test SVG files of varying sizes. They look like this:

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

Using BrowserStack to emulate iPhone 5 and the 3rd Gen iPad, I found that the breakdown point is somewhere between 2200x2200 and 2400x2400 pixels. The 5 megapixel limit corresponds to an image that is 2289x2289, so this is consistent with Duopixel's comment stating that the rendered size is what matters.