SVG - Inherit CSS colors

First we created images in different colors, then we used fonts fot icons, which were easy to color. SVGs can have more than one color and can be animated, but wasn't ready for inheriting colors. Nowadays it is real easy to inherit a color into svgs.

Example

<div style="color:;">
    See my beautifull SVG:<br>
    <svg width="100" height="100" fill="currentColor">
        <circle cx="15" cy="15" r="10" fill="black" />
        <circle cx="50" cy="50" r="40" />
    </svg>
</div>

Result:

See my beautifull SVG:
So as we can see, the value "currentColor" inherits the fill color of elements in our scalable vector graphic (svg).
Geschrieben von Aurelian Hermand
Erstellt am 2020-11-18