title: SVG with width/height doesn't scale on IE9/10/11
body: <p>There's a known issue with IE 9/10/11 where if you have an SVG file where the <code>&lt;svg&gt;</code> element specifies a width and height, and then you scale the SVG image using the <code>width</code> and <code>height</code> attributes of an <code>&lt;img&gt;</code> tag, IE doesn't properly scale the image.</p>
  
  <p>I've run into this issue.  I have a series of SVG flag icons.  For the US flag icon, the SVG object is written as:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640"&gt;
  
  &lt;!-- elements to draw flag .. --&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/9pt8ze73/">And here's the full source for the SVG.</a></p>
  
  <p>I insert the SVG into an HTML document with an <code>&lt;img&gt;</code> tag, and down-scale it to 20x15:</p>
  
  <p></p>
  
  <p>On Chrome 39, the SVG is rendered properly like so:</p>
  
  <p><img src="https://i.stack.imgur.com/fNFvi.png" alt="enter image description here"></p>
  
  <p>But on IE10, it renders as follows:</p>
  
  <p><img src="https://i.stack.imgur.com/ORtMb.png" alt="enter image description here"></p>
  
  <p>So, what seems to be happening here is that even though IE10 sizes the <code>&lt;img&gt;</code> element to 20x15, it doesn't downscale the SVG - so we end up seeing just the top-left corner of the flag icon, which appears as a plain blue box.</p>
  
  <p>Okay... so this seems to be a known issue with <a href="https://gist.github.com/larrybotha/7881691"><strong>documented solutions</strong></a>.  One solution is to simply remove all the <code>width</code> and <code>height</code> attributes in the SVG file.  This seems a bit dangerous as I don't want to screw up the actual designs.  It's also a bit cumbersome to do if you have a lot of SVG files - requiring more scripts to process the files.</p>
  
  <p>A nicer solution is to use CSS to specifically target SVG elements in IE10, which apparently is possible using a vendor specific media query:</p>
  
  <pre><code>@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    img[src*=".svg"] {
      width: 100%; 
    }
  }
  </code></pre>
  
  <p>Okay, but I don't understand this solution.  When I try the above, IE10 simply expands the size of the SVG to fill the entire parent container, which isn't what I want.  Okay, so maybe I can force IE to scale the SVG by setting the SVG width to 100%, but then constraining the size of the parent container.  So I wrapped the <code>&lt;img&gt;</code> in a DIV with a width and height of 20x15.  But... that just resulted in the same problem as before: the container DIV is fixed at 20x15, but the SVG doesn't shrink - so all we end up with is the top-left blue corner of the flag as before:</p>
  
  <p><img src="https://i.stack.imgur.com/ORtMb.png" alt="enter image description here"></p>
  
  <p>... so, I'm probably just not understanding something about this solution.  How can I get IE10/11 to scale the flag icon down to 20x15?</p>