Inline SVG breaks in Safari and Mobile Safari

Question

I recently launched a site which used a bit of inline SVG.

<svg class="divider-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 55.221 58.079" enable-background="new 0 0 55.221 58.079" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
     <path d="[...]"/>
</svg>

Everything was perfect in Chrome and Firefox, but when I tested on an iPhone or in desktop Safari, the layout was completely broken and many of the SVGs were missing. I ran the source through the W3C validator and everything was fine. I work with SVG a lot, so this was very confusing...

Es

Answer 1

It turns out that Safari and Mobile Safari freak out if you omit the height and width attributes I was setting the dimensions with CSS, which worked fine in other browsers. But I had to add those attributes back in to make it behave consistently:

<svg class="divider-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="55.221px" height="58.079px" viewBox="0 0 55.221 58.079" enable-background="new 0 0 55.221 58.079" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
     <path d="[...]"/>
</svg>

Notice the width and height attributes that were missing above.

Also, it's interesting to point out that the value of preserveAspectRatio matters. I had a couple other inline SVG elements that had preserveAspectRatio="none meet" and they were unaffected by this issue.

Es

I was having problems in IE9 until I added the width/height attributes as well. Thanks – Reorganization

I encountered the same problem today, and this suggestion helped. SVGs with just the "viewBox" value worked fine on multiple Windows desktop browsers, but the images wouldn't show up in iOS 14.8 (iPhone 13) browsers (Chrome and Firefox) without including the "width" and "height" properties. Also, since my original images didn't have the "preserveAspectRatio" property, and they started working fine is iOS, I just continued without that property. I'm not sure it's necessary. – Tourmaline

I had a similar problem where the inline svg simply did not show up in Safari on an iPad (though working on firefox/chrome on linux/android). It was sufficient to apply a width and height CSS rule to the svg element to get it rendered. It was not necessary to add width and height attributes. – Barrator

Answer 2

Another scenario / fix for this is if you're scaling your SVG via CSS, to make sure that you have both max-width and max-height declared.

.whatever svg {
  vertical-align: middle;
  max-height: 1rem;
  max-width: 1rem;
}

Eutherian

Answer 3

I ran into this issue as well, where only the first SVG out of many duplicated would show in a list display. This was because the SVG had a clipPath with an ID in the element.

Solution was to either remove the <clipPath> in <defs> for every SVG but the first one, or just remove it alltogether.

Haema

Answer 4

In my case the issue was caused by testing on an iOS device with an old webkit version which contained a render bug. Updating to latest iOS (and hence updating webkit used) fixed my issue. Try to always test on an iOS device with latest webkit version and different devices in general.

Milone

Answer 5

I caught an issue when I tried to render the same SVG file multiple as an inline element. It happened only on Safari. I had the same #id in into . When I made IDs different it fixed the issue. The solution by IgnWombat fixed this issue for me.

Effective

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review – Chromolithography