1
00:00:00,560 --> 00:00:06,100
We've already seen how an SVG can play a
role in responsive design.

2
00:00:06,100 --> 00:00:10,620
They always look sharp regardless of
screen size or resolution.

3
00:00:10,620 --> 00:00:14,250
However, if we embed an SVG into our HTML,

4
00:00:14,250 --> 00:00:19,490
it's possible to apply some additional
styling at different resolutions.

5
00:00:19,490 --> 00:00:25,950
When an SVG is at a small size, we may
want to increase the width of strokes and

6
00:00:25,950 --> 00:00:29,470
show less detail so it looks more like an
icon.

7
00:00:29,470 --> 00:00:32,910
When an SVG is shown on a larger screen,

8
00:00:32,910 --> 00:00:38,640
we should show more detail and allow the
stroke widths to relax a little bit.

9
00:00:38,640 --> 00:00:39,800
So, let's try it out.

10
00:00:41,100 --> 00:00:46,440
Here I have my workspace open, and there's
a path here that is

11
00:00:46,440 --> 00:00:50,600
actually going to be the star itself in
our graphic.

12
00:00:50,600 --> 00:00:59,040
So, I'm going to change this class from
star to graphic.

13
00:00:59,040 --> 00:01:02,860
And we already have our outer-circle
selected.

14
00:01:02,860 --> 00:01:12,150
Now, this next circle is actually the
inner-circle.

15
00:01:12,150 --> 00:01:17,870
So, if we switch back to our SVG, we have
our outer circle here and

16
00:01:17,870 --> 00:01:19,480
that has a stroke on it.

17
00:01:19,480 --> 00:01:24,780
But then we also have this inner circle
that sort of surrounds this star, and

18
00:01:24,780 --> 00:01:26,820
that has a stroke on it as well.

19
00:01:26,820 --> 00:01:31,800
So, next we have a path and then we have
another path.

20
00:01:31,800 --> 00:01:39,240
Now, this second path is our star, so I'm
going to say class star.

21
00:01:39,240 --> 00:01:41,830
But what is this first path?

22
00:01:41,830 --> 00:01:48,980
Well, if we switch over to our graphic, we
have this star and that's one path.

23
00:01:48,980 --> 00:01:52,310
But we also have these two little lines on
each side,

24
00:01:52,310 --> 00:01:56,080
and that's actually the first path in our
SVG.

25
00:01:57,770 --> 00:02:00,390
So, let's style that.

26
00:02:00,390 --> 00:02:04,960
By saying class outer-circle, so

27
00:02:04,960 --> 00:02:10,520
we'll use the same class that we used
previously, and even though it's not quite

28
00:02:10,520 --> 00:02:15,800
the same thing, we'll still be using it in
a similar fashion in our style sheet.

29
00:02:16,940 --> 00:02:21,260
Now we have a bunch of circles here, and
we can sort of

30
00:02:21,260 --> 00:02:26,430
figure out which part is what in our SVG
by counting them.

31
00:02:26,430 --> 00:02:31,230
So, there's one, two, three, four, five,
six, seven, eight,

32
00:02:31,230 --> 00:02:35,520
nine, ten circles here, all in succession.

33
00:02:37,120 --> 00:02:43,430
And if we look at our star here, there's
ten circles there as well.

34
00:02:43,430 --> 00:02:48,520
So that gives a clue that oh, those
circles must be the ones here, or

35
00:02:48,520 --> 00:02:50,310
at least it's very likely.

36
00:02:50,310 --> 00:02:53,140
And that's sort of one way that you can
figure out which parts of

37
00:02:53,140 --> 00:02:57,260
your SVG correspond to what part of the
image.

38
00:02:57,260 --> 00:02:59,610
So, let's go back here, and

39
00:02:59,610 --> 00:03:05,439
we're just gonna style all of these
circles with the class star-point.

40
00:03:05,439 --> 00:03:07,859
[BLANK_AUDIO]

41
00:03:07,859 --> 00:03:11,847
So, let me copy that to my clipboard with
a space, and

42
00:03:11,847 --> 00:03:16,559
I'm just going to paste it into each one
of these circles here.

43
00:03:16,559 --> 00:03:18,539
So let's just go down the list.

44
00:03:18,539 --> 00:03:22,059
[BLANK_AUDIO]

45
00:03:22,059 --> 00:03:24,139
And paste those in.

46
00:03:24,139 --> 00:03:28,979
And now we're ready to jump over to our
CSS.

47
00:03:28,979 --> 00:03:32,550
I'm just gonna make some room to work
here, so let me scroll down.

48
00:03:34,420 --> 00:03:35,010
There we go.

49
00:03:36,310 --> 00:03:39,700
And we've created that first class,
graphic, and

50
00:03:39,700 --> 00:03:41,900
that's selecting our SVG element.

51
00:03:43,480 --> 00:03:48,920
And I'm going to give that very similar
styles to what we had previously,

52
00:03:48,920 --> 00:03:54,201
margin 1em on the top and bottom, and auto
on the left and right sides.

53
00:03:54,201 --> 00:03:58,050
I'm actually gonna give this a width of
30%.

54
00:03:58,050 --> 00:04:02,380
And we need to set this to display block
because, by default,

55
00:04:02,380 --> 00:04:08,020
it should be an inline element and we want
it to be a block-level element.

56
00:04:08,020 --> 00:04:12,750
So let's save that out, and switch over to
our workspace and refresh.

57
00:04:12,750 --> 00:04:18,530
And as you could see, it's now taking up
30% of the width of its parent element.

58
00:04:19,650 --> 00:04:24,410
So now, we need to style some of those
individual components.

59
00:04:25,540 --> 00:04:27,790
We're going to use a mobile first
approach.

60
00:04:28,950 --> 00:04:34,556
And at the smallest size, I want these
star points and

61
00:04:34,556 --> 00:04:42,171
the outer circle to just disappear
entirely, so we'll say opacity 0.

62
00:04:42,171 --> 00:04:47,714
I also want the inner circle to

63
00:04:47,714 --> 00:04:53,490
have a stroke-opacity of 0.

64
00:04:53,490 --> 00:04:56,650
[BLANK_AUDIO]

65
00:04:56,650 --> 00:05:01,984
And then i want the star to

66
00:05:01,984 --> 00:05:08,081
have a stroke-width of 8.

67
00:05:08,081 --> 00:05:14,685
And you'll see here that I'm using some
properties that even Workspaces doesn't

68
00:05:14,685 --> 00:05:21,160
recognize, but these are CSS properties
that will be applied to our SVG.

69
00:05:21,160 --> 00:05:24,420
And you can learn more about these by
looking at some of

70
00:05:24,420 --> 00:05:27,530
the attributes in the SVG specification.

71
00:05:29,990 --> 00:05:34,520
So, let's save that out, and we'll switch
over to our preview, and

72
00:05:34,520 --> 00:05:35,960
let's see what this looks like now.

73
00:05:37,420 --> 00:05:41,790
So you'll notice that our graphic is much
more like an icon now.

74
00:05:41,790 --> 00:05:45,870
A lot of the detail has sort of gone away.

75
00:05:45,870 --> 00:05:51,640
And if I come out of full screen here and
resize the browser, you'll see

76
00:05:51,640 --> 00:05:57,710
that at a small size, this actually looks
pretty good, and that's what we want.

77
00:05:57,710 --> 00:06:02,320
However, when we get back up to these
larger sizes, we want more detail, so

78
00:06:02,320 --> 00:06:05,560
let's try to add some of that detail back
in.

79
00:06:06,870 --> 00:06:13,451
So to do that, I'm going to scroll down
here and I'm going to write a media query.

80
00:06:13,451 --> 00:06:18,183
I'll say at media only screen and

81
00:06:18,183 --> 00:06:23,941
I'll set the minimum width to 30 ems.

82
00:06:23,941 --> 00:06:31,100
And in general, that will target large
phones and small tablets.

83
00:06:31,100 --> 00:06:33,055
And we'll say inner-circle.

84
00:06:33,055 --> 00:06:36,195
[BLANK_AUDIO]

85
00:06:36,195 --> 00:06:40,110
And remember we set that to an opacity of
0, so we're gonna bring that back in.

86
00:06:40,110 --> 00:06:42,990
We'll say stroke-opacity 1.

87
00:06:44,850 --> 00:06:48,040
Then I'm going to create another media
query here.

88
00:06:48,040 --> 00:06:49,530
And I'm just going to copy and

89
00:06:49,530 --> 00:06:54,670
paste the one that I had previously, and
just change the size.

90
00:06:54,670 --> 00:07:00,221
So we'll say maybe 40 ems here, and that
will be roughly tablet-sized.

91
00:07:00,221 --> 00:07:01,651
And we'll say outer-circle.

92
00:07:01,651 --> 00:07:04,592
[BLANK_AUDIO]

93
00:07:04,592 --> 00:07:12,316
And on that outer-circle, we'll set the
opacity to 1,

94
00:07:12,316 --> 00:07:19,891
and we'll give the star its original
stroke width of 4.

95
00:07:19,891 --> 00:07:25,042
And then finally, we will add one more
media query here, and

96
00:07:25,042 --> 00:07:29,789
this would be for larger screens like,
say, laptops or

97
00:07:29,789 --> 00:07:34,031
desktops, and we will put that at about 64
ems.

98
00:07:34,031 --> 00:07:42,541
And then we will bring back in the star
points at this larger size,

99
00:07:42,541 --> 00:07:47,520
and for that, we'll say opacity 1.

100
00:07:47,520 --> 00:07:49,100
So, if we save all of that out, and

101
00:07:50,520 --> 00:07:55,470
I'll start out with the browser at a small
size here, we can refresh that page.

102
00:07:55,470 --> 00:08:00,440
And at first, we won't see anything
happen, but when we resize the browser,

103
00:08:01,800 --> 00:08:05,800
we'll hit that first media query and start
bringing back in some of that detail.

104
00:08:07,960 --> 00:08:12,421
And then we'll hit the next one and bring
back in the star points.

105
00:08:12,421 --> 00:08:17,650
So you can see how this sort of evolves at
different sizes.

106
00:08:20,360 --> 00:08:24,490
Making an SVG responsive is a fairly
advanced technique, and

107
00:08:24,490 --> 00:08:27,300
in most cases, it's not necessary.

108
00:08:27,300 --> 00:08:31,790
However, it's a great idea to use it on a
website logo or

109
00:08:31,790 --> 00:08:33,920
other very important images.

110
00:08:33,920 --> 00:08:37,390
As with anything technical, there's always
more to learn, so

111
00:08:37,390 --> 00:08:40,780
be sure to read the documentation and
experiment.