title: Cross browser SVG preserveAspectRatio
body: <p>I'm trying to have a <strong>SVG</strong> graphic inside an <code>&lt;img /&gt;</code> tag that would fit (without crop) inside the tag with preserved aspect ratio. I created the <strong>SVG</strong> in Inkscape. It worked as expected on all browsers except for <strong>Internet Explorer 9</strong>.</p>
  
  <p>To make it work on <strong>IE 9</strong> I had to add the <code>viewBox="0 0 580 220"</code> and <code>preserveAspectRatio="xMidYMid meet"</code> and remove the <code>width="580"</code> and <code>height="220"</code> <strong>SVG</strong> properties.</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet"&gt;...&lt;/svg&gt;
  </code></pre>
  
  <p>This seemed to work everywhere, just until I tried it on <strong>Webkit</strong>, where the <code>&lt;img /&gt;</code> tag gets stretched vertically although the aspect ratio of the <strong>SVG</strong> is indeed preserved.</p>
  
  <p>When I put back the <code>width="580"</code> and <code>height="220"</code> properties, it works on <strong>Webkit</strong> but on <strong>IE 9</strong> the aspectr ratio is lost.</p>
  
  <p>Is there a cross browser solution for this behavior?</p>