Menu
The following SVG renders well in Firefox and Chrome, on both Windows and Linux. In IE11, however, the overall size of the rendered drawing is tiny - roughly 170 pixels wide - and does not respond at all to changes in browser window size, as it does (and should) in other browsers:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<svg width="65%" viewBox="0 0 700 620" style="margin-left:auto; margin-right:auto;display:block;">
<svg width="700" height="20" style="margin-left:auto; margin-right:auto;display:block;">
<rect width="100%" height="100%" style="fill:rgb(128,128,255);stroke-width:1px;stroke:rgb(0,0,0);" />
</svg>
<svg width="700" height="600" y="20" viewBox="0 0 700 600" style="margin-left:auto; margin-right:auto;display:block;">
<rect width="100%" height="100%" style="fill:rgb(255,200,255);stroke-width:1px;stroke:rgb(0,0,0);" />
<rect width="100" height="100" x="0" y="0" style="fill:rgb(255,255,200);stroke-width:1px;stroke:rgb(0,0,0);" />
</svg>
</svg>
</body>
</html>
(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
654
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:
<!DOCTYPE html>
<body>
<svg width="65%" viewBox="0 0 700 600">
<rect width="100%" height="100%" style="fill:rgb(255,100,255);stroke-width:1px;stroke:rgb(0,0,0);" />
</svg>
</body>
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
<svg width="700mm" height="600mm"...>
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.
138
Instead of setting a % width on the SVG element itself, wrap your SVG within two nested div tags with css classes "svg-flex" and "svg-flex-inner" respectively. Set the width of the outer element with the percentage you want for your graphic instead of setting it on the SVG element directly. Make sure you give your SVG element a width of 100%.
<div class="svg-flex" style="width: 50%;">
<div class="svg-flex-inner" style="width: 50%; position: relative; padding-top: 100%;">
<svg style="width: 100%; height: 100%; position: absolute; margin-top: -100%;">
<!-- Whatever you want here -->
</svg>
</div>
</div>
Instead of inline css you could just add these styles to your page
.svg-flex-inner {
position: relative;
padding-top: 100%;
}
.svg-flex svg {
position: absolute;
margin-top: -100%;
width: 100%;
height: 100%;
}
Now you can control the width of your SVG by modifying the width on the outer "svg-flex" element.
If you have an element that is not a perfect square then you will need to tweak the the padding-top and margin-top values using the following formula:
(100 * height / width) %.
so, for a 16:9 graphic, the ratio would be 100 * 9 / 16 = 56.25%
padding-top: 56.25%;
...
margin-top: -56.25%
Here's the fiddle
23
this percentage svg does works on IE 11
If you do test it on http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
<!DOCTYPE html>
<HTML style="width:100%; height: 100%">
<body style="width:100%; height: 100%">
<svg width="65%" viewBox="0 0 700 600" height ="100%">
<rect width="100%" height="100%" style="fill:rgb(255,100,255);stroke-width:1px;stroke:rgb(0,0,0);" />
</svg>
</body>
</HTML>
I should test it also on older versions, the most curious change is setting the <html> and the <body> to "width:100%; height: 100%"
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
