title: scale embedded svg without white space in chrome
body: <p>I need to embed an svg into html and style it in a responsive way. For regular images this worked nicely for me:</p>
  
  <pre><code>img {
    max-width: 100%;
  }
  
  img[height] { 
    height: auto; /* if the &lt;img&gt; tag provides a width keep aspect ratio */
  }
  </code></pre>
  
  <p>unfortunately this doesn't work for embedded svgs. Here is an example how it works for both an embedded svg and a svg within an img tag.</p>
  
  <p>Here is an example markup: </p>
  
  <pre><code>&lt;div&gt;Embedded SVG:
    &lt;svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"&gt;&lt;circle cx="50" cy="50" r="50" /&gt;&lt;/svg&gt;
  &lt;/div&gt;
  
   &lt;div&gt;SVG as image tag:  
     &lt;img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDBweCIgaGVpZ2h0PSIzMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIiAvPjwvc3ZnPg0K" /&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>div {
      resize: both;
      outline: 1px solid red;
      margin-bottom: 3em;
      padding: 1em;
  }
  
  svg,
  img {
    display: block;
    outline: 1px solid blue;
    max-width: 100%;
    height: auto;
  }
  </code></pre>
  
  <p>scaled down both images preserve aspect their ratio but the embedded svg keeps its original height (the blue outline)</p>
  
  <p>How can I avoid the embedded svg creating a white space?</p>
  
  <p><strong>You can find an example on <a href="http://jsfiddle.net/78cpD/1/" rel="nofollow">jsfiddle</a>.</strong></p>
  
  <p>I'd love to post screenshots but I have not enough reputation for that :/</p>
  
  <p><strong>Edit:</strong> the bug appears only in chrome. changed the title accordingly </p>