Skip to main content

Media Queries in SVG images

By Jason Grigsby

Published on April 3rd, 2013

Topics

“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>
Code language: HTML, XML (xml)

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.

Comments

Remi Grumeau said:

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.