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:

5

In case anyone else comes across this, none of the solutions offered in this thread worked for me. I tried many different iterations of exporting vectors out of Illustrator, but nothing worked.

After days of trying to change the color of the vector through through CSS, I eventually tried targeting the “path” tag of the vector. So I added the “path” at the end of the custom class separated by a single space to denote the descendant combinator selector. So the code reads:

.highlightBlue path{
    fill: #66CCB9;
}

This has worked for me with no hiccups.