SVG Colors The currentColor keyword


Example

currentColor is most usefull in inline SVGs. With this you can inherit the parents css color and use it everywhere colors are used in SVG.

In this example the first circle uses the text color as fill color, and the second circle uses it as the stroke color.

<html>
    <head>
        div{color:green}
    </head>
    <body>
        <div>
            some Text
            <svg width="2em" height="1em" viewBox="0 0 200 100">
                <circle cx="50" cy="50" r="45" fill="currentColor"/>
                <circle cx="150" cy="50" r="45" fill="none" stroke-width=5 stroke="currentColor"/>
            </svg>
        </div>
    </body>
</html>