SVG currentColor not working in GitHub README?

Question

I'm trying make an SVG color match the color of the surrounding text in a GitHub readme. (If setting the text to "fill=black", it'll hardly be visible in GitHub's dark mode.)

From here, I gather that I can use

fill="currentColor"

to get the color property of the nearest (surrounding) CSS element. I tried that with an SVG that displays a simple circle:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" viewBox="-500 -500 1000 1000">
  <circle r="400" fill="currentColor" />
</svg>

The SVG is embedded in the README as

<p align="center">
  <img src="https://nschloe.github.io/smoothfit/disk.svg" width="60%">
</p>

However, the fill color will always come out as black.

(From here).

Any idea what's going wrong?

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). — Paulie_D, Apr 25 '21 at 10:35
Thanks @Paulie_D for the hint. I've added the code of the SVG. I'm not sure how to capture the GitHub aspect of it in a small piece of code though. If have a suggestion, let me know! — Nico Schlömer, Apr 25 '21 at 10:44
I don't believe this is possible using the `` element, you'd need to use ` — Alicia Sykes, Apr 25 '21 at 10:54

score 6 · Answer 1 · answered Apr 25 '21 at 13:02

@Alicia's replay is the correct explanation: For currentColor to work, the SVG needs to be embedded in the HTML. It doesn't work if it's included as an img tag. This

<!DOCTYPE html>
<html>
<body>
  Lorem ipsum
  <p style="color:red">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle r="100" fill="currentColor" />
  </svg>
  </p>

  dolor sit amet
  <p style="color:red">
    <img src="https://nschloe.github.io/smoothfit/disk.svg" width="100px"/>
  </p>
</body>
</html>

gives

SVG currentColor not working in GitHub README?

1 Answers1