SVG with width/height doesn't scale on IE9/10/11

There's a known issue with IE 9/10/11 where if you have an SVG file where the <svg> element specifies a width and height, and then you scale the SVG image using the width and height attributes of an <img> tag, IE doesn't properly scale the image.

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:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640">

<!-- elements to draw flag .. -->

</svg>

And here's the full source for the SVG.

I insert the SVG into an HTML document with an <img> tag, and down-scale it to 20x15:

On Chrome 39, the SVG is rendered properly like so:

But on IE10, it renders as follows:

So, what seems to be happening here is that even though IE10 sizes the <img> 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.

Okay... so this seems to be a known issue with documented solutions. One solution is to simply remove all the width and height 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.

A nicer solution is to use CSS to specifically target SVG elements in IE10, which apparently is possible using a vendor specific media query:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    width: 100%; 
  }
}

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 <img> 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:

... 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?

Solution 1:

This happens when your image is missing the viewBox attribute on the svg element.

Yours should be set to: 0 0 640 480. The zeros are X and Y offsets and the 640 and 480 correspond to the width and height. It defines a rectangle that represents the boundaries of the image.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480">

Solution 2:

Take the height and width out of the SVG tag line.

IE9, IE10, and IE11 don't properly scale SVG files added with img tags when viewBox, width and height attributes are specified.

The issue can be resolved by removing just the width and height attributes and manipulate them via CSS only.

img[src*=".svg"] {
  width: 100%; 
}

Note: If you are placing the SVG inline in IE11, then the width and height attributes are needed in the SVG tag, along with setting the width of the SVG tag to 100% using CSS, so that it scales correctly.