Siler Siler - 3 years ago 238
HTML Question

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:

enter image description here

But on IE10, it renders as follows:

enter image description here

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:

enter image description here

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

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">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download