Intro to Foundation | Lesson #138
This week you’ll learn how to make an SVG image responsive with media queries
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:
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
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
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.