title: SVG in img element proportions not respected in ie9
body: <p>CSS:</p>
  
  <pre><code>img{
      max-height:30px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;img src="foo.svg" /&gt;
  </code></pre>
  
  <p>I am looking for this svg image to scale proportionately to a max height of 30 pixels high. The natural dimensions of the svg are 200px by 200px. Works great in FF and Chrome (30x30) but in IE9 the image is 30x200. Now here is the kicker. It only happens with certain SVG files, other svgs scale correctly.</p>
  
  <p>It seems the difference is one is made of polygons, and the other is made of paths.</p>
  
  <p>does not scale correctly:</p>
  
  <p><a href="http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg" rel="nofollow noreferrer">http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg</a></p>
  
  <p>does scale correctly:</p>
  
  <p><a href="https://web.archive.org/web/20130621015854/http://www.radiantinteractive.com:80/rs/images/allies/technologyLogos/groovy.svg" rel="nofollow noreferrer"><img src="https://web.archive.org/web/20130621015854/http://www.radiantinteractive.com:80/rs/images/allies/technologyLogos/groovy.svg" alt=""></a></p>
  
  <p>any idea on why this happens, or how I can get the first one to scale proportionately in ie9?</p>