Streaming live at 10am (PST)

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

1 Like

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