SVG in img element proportions not respected in ie9

Question

CSS:

img{
    max-height:30px;
}

HTML:

<img src="foo.svg" />

I am looking for this svg image to scale proportionately to a max height of 30 pixels high. The natural dimensions of the svg are 200px by 200px. Works great in FF and Chrome (30x30) but in IE9 the image is 30x200. Now here is the kicker. It only happens with certain SVG files, other svgs scale correctly.

It seems the difference is one is made of polygons, and the other is made of paths.

does not scale correctly:

http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg

does scale correctly:

any idea on why this happens, or how I can get the first one to scale proportionately in ie9?

Linguini

Your images have disappeared. – Windproof

There a bunch of caveats depending on whether you're setting the img to 100% or not for IE. I've put together a test page, partly so the IE team may fix it, but also to understand what happens when different attributes are used: codepen.io/larrybotha/full/hmlAs – Catechist

This article might be helpful: css-tricks.com/scale-svg – Endorsed

Answer 1

To get more consistent scaling across browsers always ensure you specify a viewBox but leave off the width and height attributes on your svg element. I've created a test page for comparing the effect of specifying the different SVG attributes in combination with widths and heights specified in CSS. Compare it side by side in a few different browsers and you'll see a lot of differences in the handling.

Windproof

the question now is, that the problem occurs with 'Height constrained'. And looking at your testing page, no option in ie9 matches chrome. Does this mean I need to serve separate svgs just of ie9? – Linguini

@Linguini Either that, or find a way to make it work with width constrained instead of height. Might also be worth investigating the preserveAspectRatio attribute to see if setting it explicitly improves the situation. – Windproof

Yeah, currently I am specifying: height, width, veiwbox and preserveAspectRatio. And I am constraining both height and width, but in instances where the image would be constrained by the height alone, it distorts. from your example ie9 will behave if I remove the height and width specifications, but chrome wont. – Linguini

Here are another bunch of helpful tips: blogs.msdn.com/b/ie/archive/2011/10/27/… – Stelu

You can use $ find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*"//' -e 's/height="[0-9]*"//' to recursively remove width and height attributes from all svg's on Mac (remove the empty "" after -i for linux) in the current folder – Catechist

i had the same issue.so we opened the svg with an editor. also we detected, illustrator generate svg´s without the width, height properties in <svg> tag. Your can recreate your SVG here – Townscape

@stephanfried FYI your linked SVG editor seems to be broken as of 2016-05-01 (bunch of 404's and JS errors). – Paragraph

@jay-taylor, in my case the Link works fine and i can work with these googles svg-editor. But i get also some Network errors. – Townscape

Also note, IE is pickier about the presence of xmlns="http://www.w3.org/2000/svg" in the svg element. – Aquanaut

This stopped my svgs from scaling disproportionally but without width and height but viewbox defined, the viewbox will not scale and instead the image will resize within the viewbox resulting in wrong positioning of the image. – Rainier

Adding width and height 100% to the svg while leaving viewport untouched finally fixed it for me. – Rainier

Answer 2

To fix it in ie9 and not to stuck with this. I don't know why, but you should set width:100% through css-rule, but not in img-tag. Aspect ratio will work by magic)) It helped me, hope this post will help other.

Inspectorate

Ridiculous that this is not fixed in 3 versions of IE. – Catechist

You can add the following to target only SVGs in IE9, IE10, IE11: img[src*=svg] { width/*\**/: 100%\9;} – Catechist

This fixed an annoying issue I was having on IE11 specifically. Thanks. – Altimetry

Answer 3

You can also look here: https://gist.github.com/larrybotha/7881691 - this is the continuation of this "story".

---

Fix SVG in <img> tags not scaling in IE9, IE10, IE11

IE9, IE10, and IE11 don't properly scale SVG files added with img tags when viewBox, width and height attributes are specified. View this codepen on the different browsers.

Image heights will not scale when the images are inside containers narrower than image widths. This can be resolved in 2 ways.

Use sed in bash to remove width and height attributes in SVG files

As per this answer on Stackoverflow, the issue can be resolved by removing just the width and height attributes.

This little script will recursively search your current working directory for SVG files, and remove the attributes for cross browser compatibility:

find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*" //' -e 's/height="[0-9]*\.*\[0-9]*" //'

Caveats

Removing width and height attributes will force the image to occupy the full width of its container in non-IE browsers.

IE10 (other browsers require testing) will scale the images down to some arbitrary size - meaning you will need to add width: 100% to your CSS for those images to fit their containers.

Target IE with CSS

Since the above solution requires CSS anyways, we might as well use a hack to get IE to behave, and not worry about having to manage every individual SVG file.

The following will target all img tags containing an SVG file, in IE6+ (only IE9+ support SVG files, however).

/*
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 *
 * [1] IE9
 * [2] IE10+
 */
/* 1 */
.ie9 img[src*=".svg"] {
  width: 100%; 
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    width: 100%; 
  }
}

Caveats

This targets every img tag containing ".svg" in IE9, IE10, and IE11 - if you do not want this behaviour on a particular image, you will have to add a class to override this behaviour for that image.

Wet

Answer 4

I have spent weeks trying all kinds of solutions to be able to use SVG's in a size-adaptable website that works for major modern browsers.

The SVG's need to be scaled using CSS percentages and include embedded bitmapped images.

The only solution that I have found for percentage resizing in IE is to embed external SVG's in an <object> tag.

There are various solutions for resizing SVG's in IE to strict pixel sizes, but none of them work for percentage resizing.

I have created a non-exhaustive test suite here.

Husbandman

Can you demonstrate that with an example? – Linguini

I added a link to a simple test suite to my answer. – Husbandman

Answer 5

Somehow this scss fixed my issue.

ul {
  li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
    img {
      height: 20px;
      margin: 0 10px;
      display: inline-block;
    }
  }
}

I was actually making a centered list of logos for my footer and was having width issues. Normally I create an inline-block with a block element inside of it. Creating an inline element with an inline-block element worked for me. This is a specific implementation that the bug showed up for me and doesn't really resolve every bug but hopefully it helps someone reading this.

Leila

Answer 6

Probably a rare case for that issue could be using image-webpack-loader in webpack. The loader might be removing the viewBox attribute for some of your svgs. You would need to disable that option through webpack.config.js

loader: 'image-webpack-loader',
    options: {
        svgo: {
            plugins: [{
                removeViewBox: false,
            }],
        },
    },

Hemotherapy