Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inline SVG breaks in Safari and Mobile Safari

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 find. I work with SVG a lot, so this was very confusing...

like image 988
emersonthis Avatar asked Aug 02 '14 00:08

emersonthis


People also ask

Does mobile Safari support SVG?

The mobile safari browser supports some features of HTML5, but not others. Inline SVG is part of the HTML5 draft specification, but is not yet included in the mobile safari browser.

What are inline svgs?

Inline SVG simply refers to SVG markup that is included in the markup for a webpage.


1 Answers

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.

like image 60
emersonthis Avatar answered Oct 07 '22 06:10

emersonthis