Responsive SVGs

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