Style an SVG Icon with CSS
In this lesson, you’ll learn how to create interactive and multi-colored SVG icons using only CSS. You’ll also see how the same familiar rules of inheritance and specificity apply when working with SVG. We’ll style icons on hover, change their size and style individual parts of an icon.
When implementing SVG icons with the use tag, the browser renders the SVG inside something called the "shadow dom". Unfortunately, most browsers do not support accessing child elements of the shadow dom via CSS. In order to target elements inside a use tag, such as a path, you can target it at the global CSS level, like so:
path#rain {
/* styles */
}
Instead of:
.Icon--umbrella path#rain {
/* styles */
}
[00:00] I'll start by pasting a sprite of SVG symbols directly into the HTML. This is our SVG tag. Each icon is wrapped in a symbol tag that has a unique ID on it. On the outer SVG tag, I want to set style to display none so that this block of SVG symbols is not displayed, and it doesn't take up any space.
[00:24] Now I'll include an icon on the page by adding an SVG tag, giving it class icon and icon umbrella. Inside the SVG, I'll add a use tag, give it the X link a href attribute. I'll give it a value of pound umbrella, and this fragment identifier matches up to the ID of umbrella on this symbol. You can see our icons being displayed.
[00:58] In our CSS, let's target the icon umbrella class and set its width and height to 4 em so it's a little bit more of a reasonable size. Next I'll add a property of fill and give it a color of crimson. This cascades the fill attribute on all of the child elements including every shape inside of the umbrella icon, creating a single color icon.
[01:25] Any valid CSS properties can be applied. For instance, we can add a stroke and stroke width. Since each shape inside the SVG is a separate chunk of markup, it can be styled independently. Let's go back to the umbrella SVG.
[01:42] On this first path tag, I'll add an ID of rain. This path represents the rain drops in the SVG here. In the CSS, I'll target the rain ID. I can provide it a fill of blue. You can see now that that color is being overridden.
[02:07] Let's wrap our implementation of the umbrella icon in a paragraph tag. I'll just add some text. Go ahead and delete these attributes that we added to get us back to where we were to start. This time, I'll give the icon a fill property and a value of current color.
[02:34] This changes the fill attribute on every shape just like before, but instead of specifying a color, it's inherited from the parent, in this case, your paragraph tag. See if I change the paragraph tag to a color of indigo, the icon changes color as well.
[02:57] This also works for interaction styles. If I target the paragraph and say on hover, we can change its color to red, our icon and text are still indigo, but when it's hovered, the text and the icon change to red.