title: Inline SVG breaks in Safari and Mobile Safari
body: <p>I recently launched a site which used a bit of inline SVG. </p>
  
  <pre><code>&lt;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"&gt;
       &lt;path d="[...]"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>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...</p>