Responsive SVGs8:41 with Nick Pettit
When working with embedded SVGs and styling them with CSS, it's possible to add media queries and create responsive images. This is helpful for SVGs that contain lots of fine detail that might not look good at smaller sizes. In a mobile-first approach, the detail is first removed, and then added back in along the spectrum of larger screen sizes.
Browser support for SVGs is generally good. However, there are a few issues to be aware of in Internet Explorer, particularly that SVGs are only supported in IE 9+. Read more about SVG browser support at caniuse.com.
SVG and Illustrator Files
Here are the SVG and Adobe Illustrator files used in this course. If you're using Workspaces with this course, there is no need to download these files; they are just listed here in case you prefer to use another text editor.
Free Vector Drawing Tools
If you're looking for an alternative to Adobe Illustrator, here are some free vector drawing tools that work in a web browser. All of them should be able to export to the SVG format.
We've already seen how an SVG can play a role in responsive design. 0:00 They always look sharp regardless of screen size or resolution. 0:06 However, if we embed an SVG into our HTML, 0:10 it's possible to apply some additional styling at different resolutions. 0:14 When an SVG is at a small size, we may want to increase the width of strokes and 0:19 show less detail so it looks more like an icon. 0:25 When an SVG is shown on a larger screen, 0:29 we should show more detail and allow the stroke widths to relax a little bit. 0:32 So, let's try it out. 0:38 Here I have my workspace open, and there's a path here that is 0:41 actually going to be the star itself in our graphic. 0:46 So, I'm going to change this class from star to graphic. 0:50 And we already have our outer-circle selected. 0:59 Now, this next circle is actually the inner-circle. 1:02 So, if we switch back to our SVG, we have our outer circle here and 1:12 that has a stroke on it. 1:17 But then we also have this inner circle that sort of surrounds this star, and 1:19 that has a stroke on it as well. 1:24 So, next we have a path and then we have another path. 1:26 Now, this second path is our star, so I'm going to say class star. 1:31 But what is this first path? 1:39 Well, if we switch over to our graphic, we have this star and that's one path. 1:41 But we also have these two little lines on each side, 1:48 and that's actually the first path in our SVG. 1:52 So, let's style that. 1:57 By saying class outer-circle, so 2:00 we'll use the same class that we used previously, and even though it's not quite 2:04 the same thing, we'll still be using it in a similar fashion in our style sheet. 2:10 Now we have a bunch of circles here, and we can sort of 2:16 figure out which part is what in our SVG by counting them. 2:21 So, there's one, two, three, four, five, six, seven, eight, 2:26 nine, ten circles here, all in succession. 2:31 And if we look at our star here, there's ten circles there as well. 2:37 So that gives a clue that oh, those circles must be the ones here, or 2:43 at least it's very likely. 2:48 And that's sort of one way that you can figure out which parts of 2:50 your SVG correspond to what part of the image. 2:53 So, let's go back here, and 2:57 we're just gonna style all of these circles with the class star-point. 2:59 [BLANK_AUDIO] 3:05 So, let me copy that to my clipboard with a space, and 3:07 I'm just going to paste it into each one of these circles here. 3:11 So let's just go down the list. 3:16 [BLANK_AUDIO] 3:18 And paste those in. 3:22 And now we're ready to jump over to our CSS. 3:24 I'm just gonna make some room to work here, so let me scroll down. 3:28 There we go. 3:34 And we've created that first class, graphic, and 3:36 that's selecting our SVG element. 3:39 And I'm going to give that very similar styles to what we had previously, 3:43 margin 1em on the top and bottom, and auto on the left and right sides. 3:48 I'm actually gonna give this a width of 30%. 3:54 And we need to set this to display block because, by default, 3:58 it should be an inline element and we want it to be a block-level element. 4:02 So let's save that out, and switch over to our workspace and refresh. 4:08 And as you could see, it's now taking up 30% of the width of its parent element. 4:12 So now, we need to style some of those individual components. 4:19 We're going to use a mobile first approach. 4:25 And at the smallest size, I want these star points and 4:28 the outer circle to just disappear entirely, so we'll say opacity 0. 4:34 I also want the inner circle to 4:42 have a stroke-opacity of 0. 4:47 [BLANK_AUDIO] 4:53 And then i want the star to 4:56 have a stroke-width of 8. 5:01 And you'll see here that I'm using some properties that even Workspaces doesn't 5:08 recognize, but these are CSS properties that will be applied to our SVG. 5:14 And you can learn more about these by looking at some of 5:21 the attributes in the SVG specification. 5:24 So, let's save that out, and we'll switch over to our preview, and 5:29 let's see what this looks like now. 5:34 So you'll notice that our graphic is much more like an icon now. 5:37 A lot of the detail has sort of gone away. 5:41 And if I come out of full screen here and resize the browser, you'll see 5:45 that at a small size, this actually looks pretty good, and that's what we want. 5:51 However, when we get back up to these larger sizes, we want more detail, so 5:57 let's try to add some of that detail back in. 6:02 So to do that, I'm going to scroll down here and I'm going to write a media query. 6:06 I'll say at media only screen and 6:13 I'll set the minimum width to 30 ems. 6:18 And in general, that will target large phones and small tablets. 6:23 And we'll say inner-circle. 6:31 [BLANK_AUDIO] 6:33 And remember we set that to an opacity of 0, so we're gonna bring that back in. 6:36 We'll say stroke-opacity 1. 6:40 Then I'm going to create another media query here. 6:44 And I'm just going to copy and 6:48 paste the one that I had previously, and just change the size. 6:49 So we'll say maybe 40 ems here, and that will be roughly tablet-sized. 6:54 And we'll say outer-circle. 7:00 [BLANK_AUDIO] 7:01 And on that outer-circle, we'll set the opacity to 1, 7:04 and we'll give the star its original stroke width of 4. 7:12 And then finally, we will add one more media query here, and 7:19 this would be for larger screens like, say, laptops or 7:25 desktops, and we will put that at about 64 ems. 7:29 And then we will bring back in the star points at this larger size, 7:34 and for that, we'll say opacity 1. 7:42 So, if we save all of that out, and 7:47 I'll start out with the browser at a small size here, we can refresh that page. 7:50 And at first, we won't see anything happen, but when we resize the browser, 7:55 we'll hit that first media query and start bringing back in some of that detail. 8:01 And then we'll hit the next one and bring back in the star points. 8:07 So you can see how this sort of evolves at different sizes. 8:12 Making an SVG responsive is a fairly advanced technique, and 8:20 in most cases, it's not necessary. 8:24 However, it's a great idea to use it on a website logo or 8:27 other very important images. 8:31 As with anything technical, there's always more to learn, so 8:33 be sure to read the documentation and experiment. 8:37
You need to sign up for Treehouse in order to download course files.Sign up