Automatically setting the fill for SVGs

Yesterday, we looked at how to use the currentColor property to dynamically set the color of an SVG.

In the article, I mentioned that if you don’t specify a fill color on an SVG, it will default to black (#000000).

Reader Johann Schopplich shared this little CSS snippet that will automatically set fill to currentColor for any SVG that doesn’t have a fill attribute (shared with permission).

svg:not([fill]) {
	fill: currentColor;
}

Pretty neat. Thanks Johann!

Update:

Twitter user 1076 pointed out that this will miss nested elements in an SVG that also don’t have fill properties.

He recommended an addition for nested items, like this.

svg:not([fill]),
svg *:not([fill]) {
	fill: currentColor;
}