Webflow + SVGs

Class-Based SVG Coloring

No items found.
Overview
Images
Webflow & Image Orientation
104
SVGs
Coloring Asset-Hosted SVGs
16:23
231
Coloring SVGs as Lotties
Int
12:43
232
Every Way to Color Your SVGs
233
Class-Based SVG Coloring
Int
12:43
234
No items found.

For many situations, using CSS currentColor gives you all the power you need. But what if your SVG is complex, multi-part, and you want to color different parts individually?

Yes, you can do that too.

The best approach I've found here is to use classes inside your SVG, on the paths themselves, e.g. take this simplified SVG pseudocode;

<svg>
<path class="svg-color-1">
<path class="svg-color-2">
</svg>

HTML Embed-based Color-control

Then, in your page, you can also include an HTML Embed which specifies those classes;

<style>.stroke1 { fill: red; } </style>

Designer-based Color-control

Another approach is to control those colors directly in the Webflow Designer;

  • Create a simple element, like a Heading
  • Assign it a global class, like svg-color-1
  • Give it whatever foreground color you want ( this is text color in the designer )
  • Use that class in your inline code, as above

Note that it's important to make sure your class names are unique, and don't overlap with the rest of your design. I'd recommend prefixing them with svg- to be sure.

Repeat this for as many colors as you want.

Using your Style Guide page

I usually place these a swatches on my hidden Style Guide page, so I can control multiple color parts of different SVGs centrally. Also place an SVG which uses those color classes, so that you can see color-adjustment changes in real-time.

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.