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

Question

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?

Answer 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">