From the course: Creating a Responsive Web Design: Advanced Techniques

Unlock this course with a free trial

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

Changing SVG art with CSS

Changing SVG art with CSS - CSS Tutorial

From the course: Creating a Responsive Web Design: Advanced Techniques

Start my 1-month free trial Buy for my team

Changing SVG art with CSS

“

- Now if we don't specify a fill color for SVG artwork, the default color is going to be black. You may have noticed that previewing the SVG graphic shows all of the artwork in black. If we look through the code here we can see that all of our elements are polygons and paths, have no style elements, or nothing in here to indicate the fill color. We can change some of this with CSS as well. Let's scroll up to the top of our document; outside of the media queries, let's come in here and add a rule that's going to target both the path elements and the polygon elements. I'll come in here and copy the name polygon, let's come up here, so we'll type path, comma, space, I'll paste in the name polygon, then a space, let's add in our brackets, and now in order to color objects in SVG we use a property called fill. We'll type fill, colon, space, and just for demonstration purposes let's make this a color that we can see in a preview... if we colored it white, we wouldn't be able to see it…

Contents