Changing color of a vector-image via css

Ask the community
, ,
1

Question:
How can i change the color of a svg via css?

Product:
Wix Studio Editor

What are you trying to achieve:
Use css to change color.

What have you already tried:

.customclass {
fill: #FFF;
}

Additional information:
Is there a workaround?

Thanks and best regards

2

I’ve tried to find a solution, and everything I read in documentation tells me that your code should work. I tested other properties and was able to apply “stroke” but not “fill”.

I used:
.vector-image-black {
stroke: black;
fill: black;
}

…and only the stroke is applied.

When asking the AI assistant in IDE about it, here is the answer I get:
"The issue you’re experiencing might be due to the SVG image itself. SVG images have their own internal fill and stroke properties which can override the CSS styles you’re trying to apply.

If the SVG image has inline styles or attributes for stroke and fill, these will take precedence over the CSS styles you’re trying to apply. This could be why the fill property is not being applied, while the stroke property is.

To resolve this issue, you can remove the fill and stroke attributes from the SVG image itself, allowing the CSS styles to take effect. If you don’t have control over the SVG content (for example, if it’s a third-party image), you might not be able to apply CSS styles effectively.

If you’re unable to modify the SVG content, another option might be to use JavaScript to dynamically change the fill and stroke properties of the SVG image. However, this would require a different approach than using CSS classes."

Let us know if you figure it out!

In the meantime, you can always change the svg color in the inspector panel :wink:

3

Hi Thanks,

I tried something out and the trick is, to export out of Illustrator as a SVG under “CSS properties” with “Presentation attributs”. Thats how you can change the color with

.customclass { fill: #FFF; }

1 Like
4

Oh that’s great! Thanks for sharing :slight_smile: