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

• Colored Circle
• One SVG image, with media queries triggering different colors
• Logo, turning into a simplified logo when smaller
• Gold trend chart, turning into a sparkline when smaller

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.