{"id":287092,"date":"2019-05-13T07:44:21","date_gmt":"2019-05-13T14:44:21","guid":{"rendered":"http:\/\/css-tricks.com\/?p=287092"},"modified":"2019-05-13T07:44:21","modified_gmt":"2019-05-13T14:44:21","slug":"change-color-of-svg-on-hover","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/change-color-of-svg-on-hover\/","title":{"rendered":"Change Color of SVG on Hover"},"content":{"rendered":"

There are a lot of different ways to use SVG<\/a>. Depending on which way, the tactic for recoloring that SVG in different states or conditions — :hover<\/code>, :active<\/code>, :focus<\/code>, class name change, etc. — is different. <\/p>\n

Let’s look at the ways.<\/p>\n

<\/p>\n

Inline SVG<\/h3>\n

Inline SVG is my favorite way to use SVG anyway<\/a>, in part because of how easy it is to access and style the SVG. <\/p>\n

\n See the Pen
\n bJXNyy<\/a> by Chris Coyier (@chriscoyier<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n

If you’re used to working with icon fonts, one thing you might enjoy about them is how easy it is to change the color. You’re largely limited to a single color with icon fonts in a way that SVG isn’t, but still, it is appealingly easy to change that single color with color<\/code>. Using inline SVG allows you to set the fill<\/code>, which cascades to all the elements within the SVG, or you can fill each element separately if needed.<\/p>\n

SVG Symbol \/ Use<\/h3>\n

There is such thing as an SVG sprite<\/a>, which is a group of SVGs turned into <symbol><\/code> elements such that any given icon can be referenced easily with a <use><\/code> element. <\/p>\n

\n See the Pen
\n Use SVG Hovers<\/a> by Chris Coyier (@chriscoyier<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n

You can still set the fill color from outside CSS rather easily this way, but there are caveats. <\/p>\n