Changing Fill of SVG within an Image tag

Is there a way to change the fill of a `svg` within an `img src` outside of the svg itself?

e.g.

<img src="/images/logo.svg" alt="company logo">

I understand that I can simply change the fill within the svg code itself. I also understand if the svg is inline, I can use CSS to change the fill. Currently I am having issues changing the fill within a print style sheet.

The scenario

I am using a svg logo that has a 'fill' of white. But I want to swap the fill from white to black on the print stylesheet, so when a client prints a page, the svg actually shows up on white paper.

Adding any css on my print stylesheet does not affect the svg. Is there a way to change the fill purely with CSS, or would I need to reformat how I am referencing the SVG itself, or would I need to use JS?

Comments

[Brian Kephart]

I've done it using Tailwind CSS, and their docs show the relevant vanilla CSS properties: tailwindcss.com/docs/svg/#app

[Cedric W]

Brian, thanks for the quick feedback! But this is not exactly what I'm looking for because they are manipulating the svg inline. I think I may have to consider either adding the SVG inline, or using a different solution, like replacing the SVG with a PNG on the print stylesheet.

[Brian Kephart]

D'oh! You're right, I forgot that I inlined the image when I did that. Sorry!