How to change SVG colors

[Ruth_Rajan]

thank you so much for the in-depth explanation!

[memetican (Michael Wells)]

Just dropping this here.

I find it a much better SVG coloring approach than the inline embedded SVG paths.

How to Color Asset-hosted SVGs

I came across a method today for coloring SVGs that I hadn’t previously been aware of. It works with asset-hosted SVGs, which eliminates all the path work, HTML Embed character limit issues, etc. It sufficiently impressed me that I decided to put together a demo and a video on how to do it. Hope it helps someone else too. See the demonstration site and read only designer view. And the video tutorial. [Webflow - How to Color External SVGs]

[Miguel_Gisbert]

Any way to change the svg paths color separately? If I use CurrentColor I can set just one color for all svg paths. Thanks!

[memetican (Michael Wells)]

The filter effect approach colors the whole thing with no ability to separate parts.

With SVG inlining, you can use CurrentColor to inherit the foreground CSS color of the item and apply it to specific paths in your SVG.

But if the SVG is inline, in an HTML embed, there is nothing to stop you from embedding other colors on other paths in your SVG. You just won’t get direct designer support for it. If the SVG is in a collection list, or on a Collection Page, you should be able to embed CMS colors in it too. All of this will take some work, clean SVG code, and an understanding of SVG paths and structure.

[Miguel_Gisbert]

Thanks for the answer. I sorted it out just adding some css custom code:

.tabs-menu .w--current svg path, .tabs-menu .w--current svg line{
    	fill: #242420;
      	stroke: #242420;
	}

That way I can have the different original svg colors and change them when the tab is current tab.

Thanks!
Miguel Gisbert

[Henry_Auffahrt]

Thanks a lot!

Any idea how I can solve the character limit with the embed element?

“Custom Code cannot exceed 10000 characters.”

[memetican (Michael Wells)]

@Henry_Auffahrt

My favorite way for large SVG’s is to convert the SVG to a Lottie.
You can then edit the JSON if you want, to add class names and currentColor to paths.

Webflow has a nice Lottie-embed component, which will allow you to upload your Lottie file to assets, and yet the finished SVG will be inlined in your page ( make sure to switch the Lottied element to SVG mode, not Canvas ).

Assets has a file size limit of 4MB, so you can have SVGs up to 400 times larger. Don’t abuse that, though.

Coloring SVGs as Lotties | Webflow Images, SVGs, & Videos | Sygnal-U

Every Way to Color Your SVGs | Webflow Images, SVGs, & Videos | Sygnal-U

[Henry_Auffahrt]

I wouldn’t have even thought of Lottie as a solution to this problem! Thank you for making me think of it. I will give it a try soon!

Thanks also for the resources where I can start jumping in this topic. I have not used Lottie myself before.

[David_Lopez-White]

after uploading your svg:
Seems that if you use the media browser, and add your svg to a page, it will render the svg as an image, and you’ll lose customization as a result. Try adding the svg as an “embed”, you should be able to access and changes properties as expected with svg’s.

[Lex80 (Lex Hanley)]

I had this. I think it was because my svg was detailed. Lots of letters. I tested by making a simple triangle and that was less code so it worked. I may be wrong as I haven’t got a clue about code. The code I got also didn’t have a ‘fill’ in it. Chat gpt advised me where to put it and gave me a corrected code.

[Din_Winchester]

Yes, it’s a bit complicated , but I think I’ll figure it out