- Hi, this is Chris Converse
and in this episode,
we'll encode the markup of an SVG file
and add it directly into a CSS file.
This can be a great way to include
small graphics in your webpage,
without needing to load extra graphics from the server.
So if you'd like to follow along,
download the exercise files
and we'll begin by opening the HTML file
in a text editor.
Now once you have the HTML file open,
you'll see up in the head area
we have a link to style that CSS,
which we'll open in a moment.
If I scroll down in the body area,
we have a very simple layout here,
consisting of a header, nav, and an article element.
If you preview this in the browser,
you can see the heading area up here
with the word "Metal."
This blue bar here is the navigation element,
where we have an SVG icon showing up here,
specified as a background image in the CSS
and the text showing up here in the body.
Now to continue, let's go back
to the exercise files and let's open up
this style.css file in our text editor.
Now if we scroll down in the CSS file,
we'll find a role down here, nav space label.
As I mentioned before,
we're actually specifying the image
as a background element
so images/menu.svg.
And what we want to do is replace this reference
to an external file with all of the data
of the SVG right here in the CSS.
So now, let's switch back to the exercise files.
Let's go into the images directory
and let's open menu.svg in our text editor.
So inside here, we can see all of the markup
that consists of that hamburger menu.
So let's select all of the markup for this SVG,
let's copy this to the clipboard.
Now let's switch over to a web browser
and what you want to do
is search for a decoder and encoder URL tool.
There are lots of these online.
The one I happen to like right now is
http://meyerweb.com/eric/tools/deencoder.
So now with all that SVG markup on the clipboard,
let's come into this field.
I'm going to simply hit paste
to put all of that SVG code in this window
and then I'll come down and click on encode.
That's going to give me this text here.
Let's come in here and copy all of this.
Switch back to our text editor.
I'll close the menu.svg.
And in our style.css file,
let's come in here and delete the images/menu.svg
and now before we paste in all of this code,
we'll need to set up a few properties.
So inside of the parentheses for URL,
let's add in two sets of double quotes
then inside the quotes we'll type data; image/svg+xml
then a semicolon.
Then type UTF-8 then a comma
and now we can paste in all of that code
we got from the encoding tool.
And so once we have that in place,
save your CSS, go back to the browser,
and you'll now see the exact same
SVG file showing up in the web page.
However, the external reference to this
is no longer needed.
So all you need to do
is have the CSS file hooked to this webpage
and the CSS contains all of the code for the SVG.
And now if you would like to continue
working with this design
and create a functional mobile menu
using only HTML and CSS,
check out this previous episode
available here in the library.
And so with that, I'll conclude this episdoe
and as always, thanks for watching.