Internet Explorer Not Honoring SVG Percentage Width

(Sorry about the inline styles; just experimenting, and it was quicker that way)

I'm somewhat new to SVG, and I'm not seeing anything particularly wrong here. Is this just another IE-specific failure, or have I missed something?

Note: added jsfiddle link

Answer by Francis Hemsher for Internet Explorer Not Honoring SVG Percentage Width

Use HTML5 and place svg in a DIV as shown below. OK for all browers

Answer by SixDegrees for Internet Explorer Not Honoring SVG Percentage Width

So, it turns out this is yet another in the seemingly endless parade of Internet Explorer failures to comply with simple, widespread standards. I can boil this down to a dirt-simple example:

In any real browser, this will correctly draw a pink rectangle whose width is 65% of the browser window width, with an aspect ratio of 700w x 600h; changing the window size will change the rectangle size.

In Internet Explorer, this simply fails, and draws a tiny rectangle - albeit with the proper aspect ratio - that is about 170 pixels wide. Who knows where it is coming up with this size? Wherever it comes from, it is fixed, and unaffected by browser resizing. This is a failure regarding the SVG docs, which Firefox, Chrome, and probably every other browser on the planet manages to honor.

The workaround, as usual, is going to be to define a degraded, fixed-size SVG tag when IE is encountered, something like

and lose the much-desired resizing capability. And, I suppose, as long as I'm bothering with discerning which browser is in play - something I should never have to do in 2014 - I can also drop a nasty note on the page telling users to steer clear of Microsoft and get a real browser.

Answer by j.fernando.go for Internet Explorer Not Honoring SVG Percentage Width

this percentage svg does works on IE 11
If you do test it on http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic