Responsive SVG Images

I know what you’re thinking, “we’ve heard all about SVG being a nice vector format for making resolution independent, scalable graphics”. And yes, you’d be right, but this is something else. This is media queries working WITH the SVG itself.

During his talk at Responsive Day Out last week Bruce Lawson mentioned that you could use media queries on SVG elements and then Chris Coyier reminded me about it again today.

I instantly thought a great use for this would be for logos. They could change in complexity as they get larger. That is, you could change the look of the logo with media queries as it has more space to work with.

I know this is a very rough but check out this pen. If you do your magic RWD test and make your browser less than 500px wide, you get a different design in the logo.

Now this is very rough, and the change to the design is HUGE, but I imagine that with a little finesse (I have almost none) one could really make use of this technique.

Please send any ideas or comments along to me on Twitter!

UPDATE:  Owen Gregory kindly reminded me that it was in fact  Bruce Lawson who had mentioned this technique. Bruce then very kindly let me know that Andres Bovens had in fact done something similar back in 2009. Check out the post where Andres explains this technique really nicely.

While hunting for that post by Andreas it me to the Dev.Opera website and there is a goldmine of info there that I never knew. Specifically on SVG there are articles on Advanced SVG Animation Techniques, Applying color tints to web pages with SVG filters and JavaScript and more!

Thanks Bruce!