How do I have an SVG image inherit colors from the HTML document?

Question

I have a bunch of SVG images that I want to embed in an HTML page, which is styled with CSS.

I want to be able to have elements in the SVG have their color inherited

Answer 1

HTML uses color whereas SVG uses fill and stroke. You can get fill or stroke to use the value of the color CSS property by using the value currentColor e.g. fill="currentColor"

Answer 2

You can use fill="currentColor".

<a href="#" style="color:red">
<svg fill="currentColor"> ...</svg>
</a>