SVG image not rendering properly in IE11 / Edge unless container has fixed width

Question

Both Edge and Internet Explorer 11 seem to scale SVG images rather differently than regular raster images.

Take a look at the following example:

.container {
  display: flex;
  flex-flow: row nowrap;
}

.box {
  flex: 0 1 auto;
  background: red;
}

.fill {
  flex: 1 0 auto;
  background: green;
}

.box img {
  display: block;
  width: auto;
  height: 150px;
  background: blue;
}

<div class="container">
  <div class="box">
    <img src="http://s33.postimg.org/hbl2jy69b/logo_light.png" alt="" />
  </div>
  <div class="fill">fill</div>
</div>
<div class="container">
  <div class="box">
    <img src="http://imgh.us/logo-light_1.svg" alt="" />
  </div>
  <div class="fill">fill</div>
</div>

Both images are identical, the first is a PNG, the other is an SVG. Both images reside in a .box which is set to flex-shrink but not flex-grow. Next to the box is a .fill which is set to flex-grow, but not flex-shrink.

So, the idea is really simple. We set each image's height to some fixed value, the width gets calculated automatically keeping the aspect ratio of the image, which respectfully sets the width of the .box container. .fill occupies the rest of the available space.

The example works just fine both in Chrome and Firefox, and two identical images are being displayed:

In Edge however, the image is cropped:

Where in IE it's even weirder:

You can view the source of the SVG here: http://imgh.us/logo-light_1.svg

I've also tried a couple of different values for the preserveAspectRatio attribute of the SVG all with different results, but still not the one I'm actually looking for.

Am I missing something? Is this just a matter of a proper preserveAspectRatio attribute or is it a bug?

score 2 · Accepted Answer · edited May 23 '17 at 12:24

2

As you've noted, a fixed width on the image container gets this to work on IE11.

This worked for me:

.box {
    flex: 0 1 461px;   /* changed flex-basis from auto */
    background: red;
}

If that's not an option, and you simply want PNG and SVG to match, then a positive z-index value will shift the blue background to the surface.

.box {
    flex: 0 1 auto;
    background: red;
    z-index: 1;        /* new */
}

Note that z-index does not need to be positioned when applied to flex items (reference).

Another possible solution would be placing the image in a flex container, then defining the width (as opposed to the height) of the image:

.box {
  flex: 0 1 auto;
  background: red;
  display: flex;      /* new */
}

.box img {
  /* display: block; */
  /* width: auto; */
  /* height: 150px; */
  background: blue;
  width: 332px;     /* new; value can be anything, PNG and SVG will match */
}

edited May 23 '17 at 12:24

Community

1
1

answered May 26 '16 at 15:48

Michael Benjamin

346,931
104
581
701

Setting a fixed width value defeats the entire purpose of it all. I'm not getting any issues by using PNG, so that'll probably be the solution, I'm just curious as to why this happens with SVG.. – Tony Bogdanov May 26 '16 at 18:20
Clearly it appears to be a bug in IE 11 / Edge, as they render the SVG image incorrectly and inconsistently. IE11 in particular is notorious for [**flexbugs**](http://caniuse.com/#search=flex) (see *Known Issues* tab). I was under the impression you needed both to work, which is why I was testing alternatives. If the goal was simply to know why, the answer would have been just three words: *It's a bug*. – Michael Benjamin May 26 '16 at 18:23
1

Yup, that's what I feared. PNG it is then.. Thanks! – Tony Bogdanov May 26 '16 at 19:15

SVG image not rendering properly in IE11 / Edge unless container has fixed width

1 Answers1