Inline SVG breaks in Safari and Mobile Safari

Question

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

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:

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.