100% inline svg width not working in IE11

Question

I have a basic inline svg setup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.51 25.51">
    <rect id="a1" x="0.5" y="0.5" width="25.51" height="25.51"/>
</svg>

JSFIDDLE

In any browser the svg takes the full width, except IE11. The css looks like

svg {
    stroke: #000;
    stroke-width: 2px;
}

svg rect {
    fill: red;
}

I've tried adding width: 100% and display: block to the svg but that didn't help. Any suggestion how I can make the svg 100% in width in IE11?

Have you tried `width: inherit, max-width: 100%` proposed at https://stackoverflow.com/questions/8610077/height-auto-in-internet-explorer-8-and-below ? — myf, Nov 13 '17 at 14:56
I've added the css properties [DEMO](https://jsfiddle.net/ahsnurwf/10/) but the result is still the same — Jeanluca Scaljeri, Nov 13 '17 at 15:15
Example workaround using linked dup solution: https://jsfiddle.net/ahsnurwf/13/ — Paul LeBeau, Nov 14 '17 at 04:56

Alexandr_TT · Answer 1 · 2017-11-13T23:02:56.140

2

By default, the attribute preserveAspectRatio = "xMinYMin meet"

Set the value of this attribute none

svg {
    stroke: #000;
    stroke-width: 2px;
}

svg rect {
    fill: red;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" preserveAspectRatio = "none">
    <rect id="a1" x="0.5" y="0.5" width="25.51" height="25.51"/>
</svg>

Now the width of svg is 100% in IE11.

But the proportions are not respected and the square is stretched to a rectangle in consultation with the proportions of the browser window. To have a rectangle, you need to set the viewport SVG for example:

width="900" height="900"

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="900" viewBox="0 0 30 30" >
    <rect id="a1" x="0.5" y="0.5" width="25" height="25" stroke-width="2px" stroke="#000" fill="red"/>
</svg>

edited Nov 13 '17 at 23:02

answered Nov 13 '17 at 22:03

Alexandr_TT

13,635
3
27
54

As far as I understand your solution, it will not work in a responsive setting, meaning you don't know the width, so you need to set it to `100%`, is that correct? – Jeanluca Scaljeri Nov 14 '17 at 19:51
@JeanlucaScaljeri https://caniuse.com/#search=svg "IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround." This is a known IE bug and installing a 100% viewport will not help – Alexandr_TT Nov 14 '17 at 20:00

100% inline svg width not working in IE11

1 Answers1