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.
