Product Design Lessons

Intro to Foundation  |   Lesson #138

Responsive SVGs

This week you’ll learn how to make an SVG image responsive with media queries



As designers and engineers, we’re all accustomed to putting images into our websites and treating them as static lumps that are outside of our control. However, the SVG image format is actually an XML-based document very similar to HTML, and if you put it straight into your page rather than referencing it in an image tag, you can target parts of that document using CSS and Javascript.

There’s tons of possibilities for this, enabling you to change elements of your image based on state, containing element, or even animating them based on a user action. Today, we’ll be looking at a straightforward application - using media queries to hide and reveal parts of an image by screen size. We’re used to being able to do this for HTML, but being able to do it with images opens a whole new world of possibilities.

Let’s dig into the basics of targeting SVGs with CSS.

At a high level, an SVG is an XML document that can be treated as an image (e.g. as a src in an image) or embedded directly into HTML. Here’s a simple example:

image of circle svg

And what this looks like inline:

image of circle svg

Looking at this, you’ll notice a few things. First is that in this case the XML markup is pretty descriptive - a circle uses a circle tag, for example. Second, you’ll notice that the tag can have an id and class - just like HTML.

Those tag names, classes, and ids are exactly what we’re going to use to target our CSS. There’s just one gotcha we need to address first.

Inlining your SVG

Commonly we use SVGs as our src attributes on image tags. This is great, because it lets us treat them just like images, but the browser won’t bridge the “gap” between the document and the image content, so when we load SVGs in this way, we can’t target them with CSS from our page. How do we fix this? Simple! We put the content of our SVG directly in our page. So instead of

image of circle svg as img tag

We put the entire source of the SVG:

image of circle svg

Making an Image Responsive

Add targeting ids and classes to your SVG.

As mentioned above, you’ll need to put the content of your SVG directly in your page. Often if you’re working from an SVG generated by a graphics program, it won’t have ids or classes in quite the right ways, so you’ll need to add them. For our lesson, we’ll be using the following SVG image:

Devices

[Source]

This image contains three main subimages: a desktop, tablet, and mobile phone. Each of these is a group within the SVG, and labeled with an appropriate id:

image of device svg code

2. Add CSS targeting the elements

In order to make this image “feature responsive”, we simply need to add css targeting these sub-elements within the image. For purposes of illustration, let’s simply hide elements that correspond to screens bigger than the one the user is on. We’ll hide the desktop when screen size is below 1024px, and hide the iPad when we’re below 768px:

css example

Check Out the Demo: http://codepen.io/kball/pen/NRgAom


Next Steps

Next Steps:
That’s all you need to know! There’s a ton of resources on SVGs out there, for a good place to start check out our recent Responsive Reading newsletter: http://createsend.com/t/y-6FB2414C9302B6A1

This lesson is just a taste of the amazing topics you can learn in our University Courses. Check out our next Introduction to Foundation Class. If you're looking to be a Foundation expert, enroll in our Advanced Foundation Class and we'll help you achieve your goals.

-

About the instructor

Kevin

Kevin is an engineering lead here at ZURB, and spearheads Foundation development. He’s known for being a JavaScript ninja and getting overly excited about obscure technological details