I want to change the color of svg while it is in outer file and imported with img tag-CodePudding

I am using google fonts icons and I am downloading some svg files and save them into themes folder, I know that svg files can be imported with the img tag, but in my website I have a setting which the user can change the theme for example light and dark, by the way my problem is every thing color's changes except the svg files that exported by img tag, what I want is is there a way to change the color of svg file if it was imported using img tag?? if not, is there a way to change the fill attribute from the svg file on import??

CodePudding user response：

You're correct that you can't change an SVG's fill attribute via CSS if you use it in the src of an img tag – you need to have the contents of the SVG in your document.

You could try using CSS filter to change the appearance of the image though, in particular the brightness or invert options:

<img src="myimage.svg" class="invert">

<style>
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.invert { filter: invert(100%); }
</style>