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
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)
you can change the fill if it's a inline svg element not a img with a src attribute 😉
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
You need to switch the img element to a svg element if you want to control the fill with css
is there a svg equivalent of img? i've always just used img or dropped the svg in there
do you know what an inline svg is ?
i sadly do not, il have to read into that
example of inline svg
you can open your svg file with text editor to get this sort of code 😉
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!
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
check in dev tools if it's getting applied
maybe it got overwritten by something
il look into it, thanks!
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 wellBetter you use
var(--fill, currentColor)that doesnt work as a value for the svg
fill attribute
only on cssyes it does silly
<symbol fill="var(--color, currentColor)" stroke="var(--stroke, currentColor)"....even in an external file, without css in it?
if its in <svg> <use> yes
not as img src="" no
in img src, i dont think the current color works at all
correct
and the var works on svg editors, like inkscape?
as in, wont it mangle the values?
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!
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
that's a good point