We've already seen how an SVG can play a role in responsive design.

They always look sharp regardless of screen size or resolution.

However, if we embed an SVG into our HTML,

it's possible to apply some additional styling at different resolutions.

When an SVG is at a small size, we may want to increase the width of strokes and

show less detail so it looks more like an icon.

When an SVG is shown on a larger screen,

we should show more detail and allow the stroke widths to relax a little bit.

So, let's try it out.

Here I have my workspace open, and there's a path here that is

actually going to be the star itself in our graphic.

So, I'm going to change this class from star to graphic.

And we already have our outer-circle selected.

Now, this next circle is actually the inner-circle.

So, if we switch back to our SVG, we have our outer circle here and

that has a stroke on it.

But then we also have this inner circle that sort of surrounds this star, and

that has a stroke on it as well.

So, next we have a path and then we have another path.

Now, this second path is our star, so I'm going to say class star.

But what is this first path?

Well, if we switch over to our graphic, we have this star and that's one path.

But we also have these two little lines on each side,

and that's actually the first path in our SVG.

So, let's style that.

By saying class outer-circle, so

we'll use the same class that we used previously, and even though it's not quite

the same thing, we'll still be using it in a similar fashion in our style sheet.

Now we have a bunch of circles here, and we can sort of

figure out which part is what in our SVG by counting them.

So, there's one, two, three, four, five, six, seven, eight,

nine, ten circles here, all in succession.

And if we look at our star here, there's ten circles there as well.

So that gives a clue that oh, those circles must be the ones here, or

at least it's very likely.

And that's sort of one way that you can figure out which parts of

your SVG correspond to what part of the image.

So, let's go back here, and

we're just gonna style all of these circles with the class star-point.

[BLANK_AUDIO]

So, let me copy that to my clipboard with a space, and

I'm just going to paste it into each one of these circles here.

So let's just go down the list.

[BLANK_AUDIO]

And paste those in.

And now we're ready to jump over to our CSS.

I'm just gonna make some room to work here, so let me scroll down.

There we go.

And we've created that first class, graphic, and

that's selecting our SVG element.

And I'm going to give that very similar styles to what we had previously,

margin 1em on the top and bottom, and auto on the left and right sides.

I'm actually gonna give this a width of 30%.

And we need to set this to display block because, by default,

it should be an inline element and we want it to be a block-level element.

So let's save that out, and switch over to our workspace and refresh.

And as you could see, it's now taking up 30% of the width of its parent element.

So now, we need to style some of those individual components.

We're going to use a mobile first approach.

And at the smallest size, I want these star points and

the outer circle to just disappear entirely, so we'll say opacity 0.

I also want the inner circle to

have a stroke-opacity of 0.

[BLANK_AUDIO]

And then i want the star to

have a stroke-width of 8.

And you'll see here that I'm using some properties that even Workspaces doesn't

recognize, but these are CSS properties that will be applied to our SVG.

And you can learn more about these by looking at some of

the attributes in the SVG specification.

So, let's save that out, and we'll switch over to our preview, and

let's see what this looks like now.

So you'll notice that our graphic is much more like an icon now.

A lot of the detail has sort of gone away.

And if I come out of full screen here and resize the browser, you'll see

that at a small size, this actually looks pretty good, and that's what we want.

However, when we get back up to these larger sizes, we want more detail, so

let's try to add some of that detail back in.

So to do that, I'm going to scroll down here and I'm going to write a media query.

I'll say at media only screen and

I'll set the minimum width to 30 ems.

And in general, that will target large phones and small tablets.

And we'll say inner-circle.

[BLANK_AUDIO]

And remember we set that to an opacity of 0, so we're gonna bring that back in.

We'll say stroke-opacity 1.

Then I'm going to create another media query here.

And I'm just going to copy and

paste the one that I had previously, and just change the size.

So we'll say maybe 40 ems here, and that will be roughly tablet-sized.

And we'll say outer-circle.

[BLANK_AUDIO]

And on that outer-circle, we'll set the opacity to 1,

and we'll give the star its original stroke width of 4.

And then finally, we will add one more media query here, and

this would be for larger screens like, say, laptops or

desktops, and we will put that at about 64 ems.

And then we will bring back in the star points at this larger size,

and for that, we'll say opacity 1.

So, if we save all of that out, and

I'll start out with the browser at a small size here, we can refresh that page.

And at first, we won't see anything happen, but when we resize the browser,

we'll hit that first media query and start bringing back in some of that detail.

And then we'll hit the next one and bring back in the star points.

So you can see how this sort of evolves at different sizes.

Making an SVG responsive is a fairly advanced technique, and

in most cases, it's not necessary.

However, it's a great idea to use it on a website logo or

other very important images.

As with anything technical, there's always more to learn, so

be sure to read the documentation and experiment.