Changing the color of a SVG image

My code is as follows: <div>` `<button class="modal-close"><img src="svg"></button>` </div` I cant change the color of the svg with fill, color or applying fill in the svg file itself. I've also tried !important but neither worked. i've tried the options below and none applied the color. .modal-close{ color: white; } .modal-close img{ color: white; } <svg fill="white">
25 Replies
Tiny Thor
Tiny Thor•2mo ago
Seems like the go-to way of doing this would be to stack a bunch of css filter effects. The top comment in this thread has details, as well as a link to a little tool you can use --> https://stackoverflow.com/questions/22252472/how-can-i-change-the-color-of-an-svg-element alternatively, you could change the color in the actual SVG file itself (unless you have some use case that requires dynamic on-the-fly coloring or some other fancy effect)
Mannix
Mannix•2mo ago
you can change the fill if it's a inline svg element not a img with a src attribute 😉
rayannn
rayannn•2mo ago
i've tought of that too! but does that not remove the sizes i have on the img element? i could perhaps just put those on the div
Mannix
Mannix•2mo ago
You need to switch the img element to a svg element if you want to control the fill with css
rayannn
rayannn•2mo ago
is there a svg equivalent of img? i've always just used img or dropped the svg in there
Mannix
Mannix•2mo ago
do you know what an inline svg is ?
rayannn
rayannn•2mo ago
i sadly do not, il have to read into that
Mannix
Mannix•2mo ago
example of inline svg
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
you can open your svg file with text editor to get this sort of code 😉
salentipy
salentipy•2mo ago
You should be able to get the inline code by opening the svg in a browser and then viewing the source. You can copy the inline code from there. Oh, you can open with a text editor? I did not know that!
rayannn
rayannn•2mo ago
oh like this! yes i know this and did apply fill="white" in here but it didnt apply. i did this in another project were it did apply so im really confused why it did not work this time around
Mannix
Mannix•2mo ago
check in dev tools if it's getting applied maybe it got overwritten by something
rayannn
rayannn•2mo ago
il look into it, thanks!
ἔρως
ἔρως•2mo ago
instead of doing this, i STRONGLY recommend you to use currentColor this way, you can use the color in css, to set the color and it will match the color of the text as well
b1mind
b1mind•2mo ago
Better you use var(--fill, currentColor)
ἔρως
ἔρως•2mo ago
that doesnt work as a value for the svg fill attribute only on css
b1mind
b1mind•2mo ago
yes it does silly <symbol fill="var(--color, currentColor)" stroke="var(--stroke, currentColor)"....
ἔρως
ἔρως•2mo ago
even in an external file, without css in it?
b1mind
b1mind•2mo ago
if its in <svg> <use> yes not as img src="" no
ἔρως
ἔρως•2mo ago
in img src, i dont think the current color works at all
b1mind
b1mind•2mo ago
correct
ἔρως
ἔρως•2mo ago
and the var works on svg editors, like inkscape? as in, wont it mangle the values?
rayannn
rayannn•2mo ago
i fixed it by editing the fill attribute which was hidden at the end of a big svg file, silly mistake to look over it but i just replaced the original value with white. thanks for all the help guys!
b1mind
b1mind•2mo ago
I'm never importing a sprite into an editor so no clue and when I'm using that its typically in a sprite.svg file. I don't think any of them handle <symbol> well but honestly no clue xD
ἔρως
ἔρως•2mo ago
that's a good point