42

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?

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Fresheyeball
  • 29,567
  • 20
  • 102
  • 164
  • 6
    Your images have disappeared. – robertc Mar 20 '12 at 17:43
  • 1
    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: http://codepen.io/larrybotha/full/hmlAs – Larry Jan 31 '14 at 13:37
  • This article might be helpful: https://css-tricks.com/scale-svg/ – Paul D. Waite Apr 15 '16 at 16:19

6 Answers6

115

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.

robertc
  • 74,533
  • 18
  • 193
  • 177
  • 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? – Fresheyeball Mar 21 '12 at 18:26
  • @Fresheyeball Either that, or find a way to make it work with width constrained instead of height. Might also be worth investigating the [preserveAspectRatio](https://developer.mozilla.org/en/SVG/Attribute/preserveAspectRatio) attribute to see if setting it explicitly improves the situation. – robertc Mar 21 '12 at 18:33
  • 1
    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. – Fresheyeball Mar 21 '12 at 18:39
  • 1
    Here are another bunch of helpful tips: http://blogs.msdn.com/b/ie/archive/2011/10/27/best-practices-for-getting-started-with-svg.aspx – oberstet Oct 20 '13 at 17:39
  • 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 – Larry Dec 09 '13 at 21:40
  • 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 tag. Your can recreate your SVG [here](http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html) – stephanfriedrich Sep 17 '14 at 12:50
  • @stephanfried FYI your linked SVG editor seems to be broken as of 2016-05-01 (bunch of 404's and JS errors). – Jay Taylor May 01 '16 at 18:50
  • @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. – stephanfriedrich May 11 '16 at 11:33
  • Also note, IE is pickier about the presence of `xmlns="http://www.w3.org/2000/svg"` in the svg element. – Jesse Chisholm Aug 30 '16 at 00:55
  • 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. – loeffel Nov 22 '16 at 10:38
  • Adding width and height 100% to the svg while leaving viewport untouched finally fixed it for me. – loeffel Nov 22 '16 at 10:53
23

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.

Able
  • 366
  • 2
  • 4
11

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.

Community
  • 1
  • 1
Martenti
  • 141
  • 1
  • 3
1

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.

Andy Swift
  • 2,179
  • 3
  • 32
  • 53
0

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.

Buttars
  • 395
  • 3
  • 5
0

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,
            }],
        },
    },
Jason Vasilev
  • 300
  • 1
  • 3
  • 12