Media Queries in SVG images

Written by Jason Grigsby on

“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.


Never miss an article!

Get Weekly Digests


Comments

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

Vadim Makeev

Replies

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.

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

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.

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?

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 :(


Let’s discuss your project! Email Us