Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
Resources
Browser Compatibility
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.
Related Courses
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