I am trying to style an SVG within an img tag. I am not templating the svg into the HTML to allow for reusing the image between pages and avoid additional requests.
When templating the svg into the HTML, the following code allows for conditional styling based on a class selector:
<code><html class="dark">
<svg>
<style>
html.dark path { fill: white }
html.light path { fill: black }
</style>
...
</svg>
</htm>
</code>
<code><html class="dark">
<svg>
<style>
html.dark path { fill: white }
html.light path { fill: black }
</style>
...
</svg>
</htm>
</code>
<html class="dark">
<svg>
<style>
html.dark path { fill: white }
html.light path { fill: black }
</style>
...
</svg>
</htm>
However, this does not work when the svg is in an img tag
<code><html class="dark">
<img src="logo.svg" />
</htm>
</code>
<code><html class="dark">
<img src="logo.svg" />
</htm>
</code>
<html class="dark">
<img src="logo.svg" />
</htm>
I am hoping that there is an css selector I don’t know about that I can use to pierce the img tag context
perhaps something like:
<code><html class="dark">
<img class="dark" src="logo.svg" />
</htm>
</code>
<code><html class="dark">
<img class="dark" src="logo.svg" />
</htm>
</code>
<html class="dark">
<img class="dark" src="logo.svg" />
</htm>
<code><svg>
<style>
:host(.dark) path { fill: white }
:host(.light) path { fill: black }
</style>
...
</svg>
</code>
<code><svg>
<style>
:host(.dark) path { fill: white }
:host(.light) path { fill: black }
</style>
...
</svg>
</code>
<svg>
<style>
:host(.dark) path { fill: white }
:host(.light) path { fill: black }
</style>
...
</svg>
However :host does not work on <img /> or <embed /> so I cannot use this approach. Is there some way to achieve this or should I just distribute logo_light.svg and logo_dark.svg?