Cloud Four Blog

Technical notes, War stories and anecdotes

Media Queries in SVG images

“Wait? What was that Bruce Lawson just said?”

That was my reaction last week as I listened to the audio from Bruce’s presentation at Responsive Day Out conference.

What had Bruce said that blew my mind? It was the fact that you can embed media queries inside SVG images.

Maybe this is common knowledge for everyone else, but I was stunned by the news. Today I finally got a moment to research this further and found this fantastic video from Andreas Bovens showing off media queries in SVG.

I recommend starting the video at the 3 minute 25 second mark.

The really cool thing about the way media queries work inside SVG is that they react to the viewport of the image itself, not the viewport of the browser. This means you can make decisions about how an image should look at different sizes without needing to know how that image will be used in a given page.

Here is the source from one of the example images that Andreas uses:

 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
 <g>
  <title>Simple SVG + mediaqueries</title>
  <defs>
  <style type="text/css">
	#circle {
		fill: #fce57e;
		stroke: #fff;
		stroke-width: 100px;
		stroke-opacity: 0.5;
		fill-opacity: 1;
	}
	@media screen and (max-width: 350px) {
	#circle {
		fill:  #879758;
	}
	}
	@media screen and (max-width: 200px) {
	#circle {
		fill: #3b9557;
	}
	}
	@media screen and (max-width: 100px) {
	#circle {
		fill: #d8f935;
	}
	}
	@media screen and (max-width: 50px) {
	#circle {
		fill: #a8c45f;
	}
	}
	@media screen and (max-width: 25px) {
	#circle {
		fill: #2c3c0c;
	}
	}
  </style>
  </defs>
  <circle cx="200" cy="200" r="150" id="circle" />
 </g>
</svg>

SVG images with media queries embedded in them seem perfect for the responsive images art direction use case.

The examples that Andreas shows in the video can be found at:

And I would be remiss if I didn’t also share his post from 2009(!) where I found the examples and the video. Andreas was so far ahead of us on this.

Finally, I highly recommend listening to all of the audio from Responsive Day Out. There’s a ton of good stuff in there.

9 Comments on “Media Queries in SVG images”

  1. Vadim Makeev says:

    Did Bruce mentioned my MQ+SVG demos? See vector logo and bitmap icon. Latter doesn’t work in WebKit.

    • Jason Grigsby says:

      I don’t think he mentioned your examples, but I don’t know for sure because I was just listening to the audio and couldn’t see what he was showing people in the audience.

  2. stoikerty says:

    Holy cow that’s amazing. Someone call chris coyer to ring the alarm!

  3. Mike Ott says:

    I have to say this is pretty cool.

  4. Remi Grumeau says:

    Well, as you said, inline SVG is nothing new, and kinda well supported (as usual, forget about IE and Android < 3) http://caniuse.com/#search=inline%20svg

    See inline SVG as a DIV with elements in it. Each elements/path is kind of a DOM element, so they can have a class, id & attributes. Then you can target them via CSS, but also interact with Javascript/JQuery. SInce everything is in the DOM, it's also a lot better than bitmap on a SEO pov if you have text in it.

    Definitely cool, but SVG is not supported in IE7, IE8 and Android 2.2 & 2.3 :( So a fallback is still (as always) to provide.

  5. This is excellent. It could also be easily used to create context specific icons, making SVG even better solution for scalable icons.

  6. Pete Jelliffe says:

    Does this require text editing of the SVG file, or are programs like Illustrator and Fireworks able to save multiple images as a single file with media queries?

  7. Scott Kellum says:

    Oh man this is great! I just tried hacking together element queries out of this but inline SVG seems to only query the global context, not the SVG tag context :(

  8. I agree, with SVG we are coming close to the perfect adaptive image solution, see here: http://litesite.org/holygrail/stage2/