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:

And what this looks like inline:

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

We put the entire source of the 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:

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

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:

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

---