From the course: CSS Shorts

Unlock this course with a free trial

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

Color SVG with CSS

Color SVG with CSS - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Color SVG with CSS

“

- [Instructor] Hi, I'm Chris Converse, and in this episode, we'll add some CSS directly into an SVG file, in order to control the coloring of our artwork, so if you'd like to follow along with me, download the exercise files, and we'll begin by opening the HTML file, in a text editor. And so once you have the HTML file open, in the body area, you'll see that I have an image tag, with the width set to 100%, and then a source equaling the top ice cream SVG file, in the images folder. Now this is a scalable vector graphic, so I can come in here and increase and decrease the width of the browser, and everything will scale, and you'll also notice that Australia has some colors applied. These colors have been added in line with the authoring software, so what we're gonna be doing is removing the in line styles and then adding our own CSS at the top of the SVG file, so we can color New Zealand, the United States, and Australia. So to do that, let's go back to the exercise files, and let's…

Contents