title: Resize an SVG to 100% of its parent width and keep its aspect ratio
body: <p>I'd like to have an SVG image that has the width of its parent div and the height should be 14% of its width.</p>
  
  <p>This code works in Firefox but not in Chrome:</p>
  
  <pre><code>&lt;svg 
      xml:space="preserve"
      preserveAspectRatio="xMinYMin meet"
      height="100%" width="100%"
      viewBox="-1 -10 242 33"&gt;
      ...
  &lt;/svg&gt;
  </code></pre>
  
  <p>In Chrome the aspect ratio is 1 so the svg content is at the top of the square with a lot of whitespace below it.
  I need the svg file to be inline so I can't use the <code>img</code> tag.</p>