From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Embed SVG art in CSS

Embed SVG art in CSS - CSS Tutorial

From the course: CSS Shorts

Embed SVG art in CSS

- 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…

Contents