1
00:00:01.02 --> 00:00:02.04
- Hi, this is Chris Converse

2
00:00:02.04 --> 00:00:03.02
and in this episode,

3
00:00:03.02 --> 00:00:05.04
we'll encode the markup of an SVG file

4
00:00:05.04 --> 00:00:08.02
and add it directly into a CSS file.

5
00:00:08.02 --> 00:00:09.04
This can be a great way to include

6
00:00:09.04 --> 00:00:10.09
small graphics in your webpage,

7
00:00:10.09 --> 00:00:13.06
without needing to load extra
graphics from the server.

8
00:00:13.06 --> 00:00:14.09
So if you'd like to follow along,

9
00:00:14.09 --> 00:00:16.01
download the exercise files

10
00:00:16.01 --> 00:00:18.01
and we'll begin by opening the HTML file

11
00:00:18.01 --> 00:00:19.09
in a text editor.

12
00:00:19.09 --> 00:00:21.03
Now once you have the HTML file open,

13
00:00:21.03 --> 00:00:22.05
you'll see up in the head area

14
00:00:22.05 --> 00:00:24.07
we have a link to style that CSS,

15
00:00:24.07 --> 00:00:26.07
which we'll open in a moment.

16
00:00:26.07 --> 00:00:28.01
If I scroll down in the body area,

17
00:00:28.01 --> 00:00:29.09
we have a very simple layout here,

18
00:00:29.09 --> 00:00:33.01
consisting of a header,
nav, and an article element.

19
00:00:33.01 --> 00:00:34.04
If you preview this in the browser,

20
00:00:34.04 --> 00:00:35.06
you can see the heading area up here

21
00:00:35.06 --> 00:00:37.02
with the word "Metal."

22
00:00:37.02 --> 00:00:39.05
This blue bar here is
the navigation element,

23
00:00:39.05 --> 00:00:41.07
where we have an SVG icon showing up here,

24
00:00:41.07 --> 00:00:44.07
specified as a background image in the CSS

25
00:00:44.07 --> 00:00:48.00
and the text showing up here in the body.

26
00:00:48.00 --> 00:00:49.02
Now to continue, let's go back

27
00:00:49.02 --> 00:00:51.00
to the exercise files and let's open up

28
00:00:51.00 --> 00:00:54.08
this style.css file in our text editor.

29
00:00:54.08 --> 00:00:56.02
Now if we scroll down in the CSS file,

30
00:00:56.02 --> 00:00:59.07
we'll find a role down
here, nav space label.

31
00:00:59.07 --> 00:01:00.06
As I mentioned before,

32
00:01:00.06 --> 00:01:03.03
we're actually specifying the image

33
00:01:03.03 --> 00:01:04.05
as a background element

34
00:01:04.05 --> 00:01:06.08
so images/menu.svg.

35
00:01:06.08 --> 00:01:08.08
And what we want to do
is replace this reference

36
00:01:08.08 --> 00:01:11.03
to an external file with all of the data

37
00:01:11.03 --> 00:01:14.05
of the SVG right here in the CSS.

38
00:01:14.05 --> 00:01:17.08
So now, let's switch back
to the exercise files.

39
00:01:17.08 --> 00:01:19.09
Let's go into the images directory

40
00:01:19.09 --> 00:01:23.04
and let's open menu.svg
in our text editor.

41
00:01:23.04 --> 00:01:24.09
So inside here, we can
see all of the markup

42
00:01:24.09 --> 00:01:28.05
that consists of that hamburger menu.

43
00:01:28.05 --> 00:01:31.00
So let's select all of
the markup for this SVG,

44
00:01:31.00 --> 00:01:33.00
let's copy this to the clipboard.

45
00:01:33.00 --> 00:01:34.09
Now let's switch over to a web browser

46
00:01:34.09 --> 00:01:35.07
and what you want to do

47
00:01:35.07 --> 00:01:40.00
is search for a decoder
and encoder URL tool.

48
00:01:40.00 --> 00:01:41.05
There are lots of these online.

49
00:01:41.05 --> 00:01:43.01
The one I happen to like right now is

50
00:01:43.01 --> 00:01:48.01
http://meyerweb.com/eric/tools/deencoder.

51
00:01:48.01 --> 00:01:50.08
So now with all that SVG
markup on the clipboard,

52
00:01:50.08 --> 00:01:52.08
let's come into this field.

53
00:01:52.08 --> 00:01:53.09
I'm going to simply hit paste

54
00:01:53.09 --> 00:01:56.06
to put all of that SVG code in this window

55
00:01:56.06 --> 00:01:59.05
and then I'll come down
and click on encode.

56
00:01:59.05 --> 00:02:02.04
That's going to give me this text here.

57
00:02:02.04 --> 00:02:05.05
Let's come in here and copy all of this.

58
00:02:05.05 --> 00:02:07.04
Switch back to our text editor.

59
00:02:07.04 --> 00:02:09.08
I'll close the menu.svg.

60
00:02:09.08 --> 00:02:12.00
And in our style.css file,

61
00:02:12.00 --> 00:02:17.00
let's come in here and
delete the images/menu.svg

62
00:02:17.00 --> 00:02:18.06
and now before we paste
in all of this code,

63
00:02:18.06 --> 00:02:20.08
we'll need to set up a few properties.

64
00:02:20.08 --> 00:02:23.03
So inside of the parentheses for URL,

65
00:02:23.03 --> 00:02:27.00
let's add in two sets of double quotes

66
00:02:27.00 --> 00:02:34.02
then inside the quotes we'll
type data; image/svg+xml

67
00:02:34.02 --> 00:02:35.08
then a semicolon.

68
00:02:35.08 --> 00:02:39.09
Then type UTF-8 then a comma

69
00:02:39.09 --> 00:02:41.06
and now we can paste in all of that code

70
00:02:41.06 --> 00:02:43.04
we got from the encoding tool.

71
00:02:43.04 --> 00:02:44.09
And so once we have that in place,

72
00:02:44.09 --> 00:02:46.09
save your CSS, go back to the browser,

73
00:02:46.09 --> 00:02:48.03
and you'll now see the exact same

74
00:02:48.03 --> 00:02:50.05
SVG file showing up in the web page.

75
00:02:50.05 --> 00:02:52.07
However, the external reference to this

76
00:02:52.07 --> 00:02:54.00
is no longer needed.

77
00:02:54.00 --> 00:02:55.01
So all you need to do

78
00:02:55.01 --> 00:02:57.06
is have the CSS file
hooked to this webpage

79
00:02:57.06 --> 00:03:00.06
and the CSS contains all
of the code for the SVG.

80
00:03:00.06 --> 00:03:02.00
And now if you would like to continue

81
00:03:02.00 --> 00:03:03.02
working with this design

82
00:03:03.02 --> 00:03:05.00
and create a functional mobile menu

83
00:03:05.00 --> 00:03:06.08
using only HTML and CSS,

84
00:03:06.08 --> 00:03:08.04
check out this previous episode

85
00:03:08.04 --> 00:03:10.00
available here in the library.

86
00:03:10.00 --> 00:03:11.09
And so with that, I'll
conclude this episdoe

87
00:03:11.09 --> 00:03:14.08
and as always, thanks for watching.