Can change colors and other attributes with CSS of SVG images used as background?

Question

I am using a SVG image as background like this:

background:url("images/button2.svg") no-repeat 0 0 / 100% 100%;

I wonder if I can change the color of the fill and stroke with CSS only so I can have the same image on different places and a different style every time.

Thank you.

You can't if you use background images. They basically make SVG work like raster images (only scalable). — Robert Longson, Jun 24 '16 at 11:33
I see. Those are bad news. I need to change the color of the SVG for the hover state. Is there any alternate way to do that? — Cain Nuke, Jun 24 '16 at 11:49
Have 2 images, one for hover and one not. Swap between the two. — Robert Longson, Jun 24 '16 at 11:50
Is that the only way? That will imply double the images for each one of those. More data to load. — Cain Nuke, Jun 24 '16 at 12:04
Use an object or iframe tag to contain the data or make it inline, then you can manipulate it. — Robert Longson, Jun 24 '16 at 12:14
What about using and then call it like this background:url("images/button2.svg#someid") no-repeat 0 0 / 100% 100%; — Cain Nuke, Jun 24 '16 at 14:35
What do you think that will do? What did it actually do when you tried it? — Robert Longson, Jun 24 '16 at 14:36
I dont know. First I thought it worked but not anymore. I dont know if its a glitch or something. — Cain Nuke, Jun 24 '16 at 15:15

score 0 · Answer 1 · answered Jun 24 '16 at 11:39

0

You can't do it when it is in the background. You'd better use it in an <img> tag and then embed it. There are already some scripts for that. I created my own recently: https://github.com/IskrenStanislavov/svg-embed

answered Jun 24 '16 at 11:39

Искрен Станиславов

513
5
21

Thank you. But I need it as a background because its a container. – Cain Nuke Jun 24 '16 at 11:47

Can change colors and other attributes with CSS of SVG images used as background?

1 Answers1