SVG width in IE9

Question

I have a SVG. In Firefox and Chrome the width:100% and height:100% is working well. But in Internet Explorer 9 is not.

Somebody knows how to fix it?

Thanks.

UPDATE:

My really problem is putting this SVG into a table (the width is awful in IE9). The <td>'s are dynamic, I can't set width for the container of the SVG.

Answer 1

It's because the html, body, and div elements are collapsing down to the intrinsic height of the SVG.

To work around that, you can set the html, body, and div elements to 100% height:

html, body, div { width: 100%; height: 100%; }

See http://jsfiddle.net/7Z8kg/2/

---

Update:

OK, as far as I can tell IE9 is failing to calculate a width and height on the SVG element, so it's falling back to the default for replaced elements (300×150px). You're setting a height but not a width on the parent (.ic3-svg-arrow) so the SVG is still defaulting to 300px wide.

I've worked around it here using the Intrinsic Ratio trick: Essentially give the parent element an aspect ratio (in this case 1:1) and using absolute positioning to make the SVG fit that size. This relies upon you knowing the aspect ratio in advance, but seems to work well for this problem:

/* Use padding to create a 1:1 aspect ratio */
.ic3-svg-arrow {
    height: 0;
    padding-bottom: 100%;
    position: relative;
}
/* Use positioning to make the SVG fit the ratio */
.ic3-svg-arrow svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

See http://jsfiddle.net/7Z8kg/15/ which looks the same to me across IE9, IE11, Firefox and Chrome.

I took inspiration from this article, which has lots of useful SVG sizing tips.