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;
}