SVG currentColor not working in GitHub README?

Viewed 709

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.

enter image description here

(From here).

Any idea what's going wrong?

1 Answers

@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

enter image description here

Related