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?
Top comments (3)
I've done it using Tailwind CSS, and their docs show the relevant vanilla CSS properties: tailwindcss.com/docs/svg/#app
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.
D'oh! You're right, I forgot that I inlined the image when I did that. Sorry!