How to change SVG colors

Hi,

I was wondering if there is a way to set colors for SVG files uploaded in Webflow.
That would be useful for custom made icons, graphics, product silhouettes, etc.

Thanks

1 Like

You can use “CurrentColor” as a colour in your svg code and then use embeds to insert them. Then you will use font color to edit svg colour.

Like so:
Image 2020-03-30 at 1.30.25 PM

3 Likes

Thanks.
Looks a bit tricky though…

Why? I’ve been doing this for years without issues.

I mean, I am not a pro webdesigner so at first, that looks tricky.
I will dig into this to see how I can implement it easily.

Thanks

2 Likes

Hi,
Sorry for being silent for a while…

How do you change the .svg code to put the “CurrentColor” property ? I am on mac if its something worth to know…

You should use embeds anyway, uploading svg and using them as images won’t give you an ability to change colour.

svg’s are editable with any text editing app.

Yes, I will use embeds.

I am tried to make the process but sadly my file has too much lines of codes to be supported by Webflow. Need to find a way to reduce the amount of code…

Ah yes, that’s a bummer. You can try using this service to optimize and slim down your svg’s.

Thanks !

I’ve managed to go to the embed process. That works fine !
Although my file has way too many characters on the code so I need to find a way to simplify it.

When I embed the .svg file, I have huge blank margins around my logo. Is it coming from my file or the way the embedding works ?

(you can see the logo miss some details as I had to remove some of the code to make it work)

You could use IconJar https://geticonjar.com/

IconJar is a library for your icons/vector things and it allows to drag and drop them to other design app, such as Webflow. And you can also recolor the svg before dragging them, even when they have multiple colors.

1 Like

Thanks for the advice. In that case, I need to use a custom made logo. But still relevant to remember.

also as an fyi… iconset is a free alternative to iconjar. it also has an option for built in optimization when you import your svg. this makes it really easy to just copy the svg code from iconset and paste into the embed. you would still have to manually add the “fill: currentColor” declaration though. hopefully at some point iconset will include that as an option as well.

2 Likes

Looks broken now, can’t change color with the font color although it worked before…
Any idea ?

Is there anything additional to ‘currentColor’ to use here? Maybe background color…? Looking to extend this method for SVGs with 2 colors :smiley:

yeah you can use the Webflow Effects > filters
Its not accurate - basically eyeballing while moving the values of the hue saturation, brightness, contrast effects - but if for some reason you cant or dont want to use embeds to properly change the colour in the svg this is an alternative!

kind regards
john leigh - London UK Webflow fan

Sorry to re-open this thread guys but I’m looking to do something similar (I think) and I’m definitely stuck.

I’m looking to have an SVG logo/header on my page that uses the colour set in the CMS as it’s colour. Basically each project on my site will have a colour, and I want the logo to adapt to the colour of the project.

Firstly; is this possible? I assume that’s what current colour is, no?

Secondly; how do I go about implementing this? I’m not a web developer, so I was lost on this thread as soon as people started talking about embeds instead of uploads. Talk to me like I’m a 10 year old!

Many thanks,
Chris

You could also just paste the entire tag with its vector details into an embed and use CSS-Fill to manipulate the color. That way you handle the Embed itself as a Div-Container and it contains the SVG, which at the same time gives it its color propertys.

Would look something like this:

<svg vectorstuff, you know what i mean></svg.>

<style.>
.class-name-of-your-element-embed-goes-here {
fill: red;
}
</style.>

(the dots in the tags are just so that its displayed in here, webflow excludes codesnippets)

if you now want to change the background color of the “embed div” the svg is located in, you simply change the background-color in the webflow-design panel of that specific embed container.

We summarise: The SVG color is controlled over the CSS-Property fill, which you write directly into the embed that contains the tag.

The background-color is controlled over the design-panel for that embed-container.

Happy designing