[afloatboat]

SVG elements also support currentColor for the fill property, which is linked to CSS’s color property.

<svg><path d=“” fill=“currentColor” /></svg>

element { color: hsl(0 0% 0%) }

One advantage is that you can target the parent element and the SVG will change automatically.

You can also create multiple “shades” by having currentColor on multiple paths with different opacity.