SVG responsive

Freeway
1

I have an SVG file (made in Illustrator) and want to use it in a responsive layout. I’ve treated the SVG file just as you would a bitmap file. I’ve tested the following code in IE9 live in Browser Stack and it appears to work fine.

CSS:

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

However I am unnerved because lots of people on the internet appear to suggest to make the SVG responsive, I would have to open the SVG file in a text editor and change the height and width of the viewBox. Is this really the case? To have to do that to lots of SVG for a website would be a big pain in the ass.

Anyone used SVG files inside img tags, within a responsive layout?

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

No such thing, just import the svg file as a pass through image, in the inspector change the width to fixed (%) and your done. The svg will scale automatically.

Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Look at the logo at ontwerpzaam.nl … it scales down up to a certain minimal width.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

It works for me as well. However there appears to be plenty of people saying that this won’t work in IE9–11. See Can I use... Support tables for HTML5, CSS3, etc and the work arounds it gives here http://codepen.io/tomByrer/pen/qEBbzw?editors=110

I’m confused. When I test in IE9 it all works fine, so why are some people suggesting we have to edit the actual SVG file in a text editor…

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options