1

This should be simple:

I want to use SVG images in a responsive layout. It all appears to work fine, including in IE 9+ when I've tested in Browser Stack. However, on the Can I Use website it says "IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround." I've spent hours looking into workarounds given on the internet, but being a newbie I don't understand them. And it appears to work without any workarounds! Is this code okay?

Here is my HTML:

    <div class="content">
        <img src="resources/test.svg">
    </div>

Here is my CSS

    img {width:100%;}
    .content {max-width:700px; margin:0 auto;}

Thank you ever-so-much

user2991837
  • 626
  • 1
  • 8
  • 17
  • Have you tested in an actual IE browser? That's your best bet. – Matt Busche May 13 '15 at 17:47
  • I've tested in BrowserStack cross-browser testing tool and check the fluid width in IE. It works fine. So why does Can I Use website say there are problems in IE? – user2991837 May 13 '15 at 18:29

1 Answers1

1

It depends on the contents of your SVG. It should work okay as long as your SVG has a viewBox but does not specify a width or height.

See: SVG in img element proportions not respected in ie9

Community
  • 1
  • 1
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Different people are providing different answers; some use viewbox (I need to read up on what that is) and some suggest "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))". I've done this because it is easy to do and on my tests in BrowserStack it works. – user2991837 May 14 '15 at 09:25
  • I've just read an article by Dudley Storey in .Net magazine. He states that "if you're adding an SVG image to a page as an inline image, it can be made responsive in exactly the same way as a bitmap: Presumably the styling can be removed from the HTML file and placed in the CSS stylesheet and it will still work? – user2991837 May 14 '15 at 09:29
  • This suggest is to open the SVG files in a text editor and manually change some of the code inside the SVG file. For a website with a lot of images that is going to be a big pain. – user2991837 May 14 '15 at 09:49