Webflow, Coloring SVGs as Lotties

Is your SVG too large to inline in Webflow's HTML Embed?

Don't despair- Webflow's Lottie animation element might just be what you're looking for.

Here's how it works-

1. Convert your SVG to a Lottie JSON, with a free online tool
2. Add your Lottie JSON file to your website's Assets
3. Add a Webflow Lottie element to your page, and connect it to your Lottie JSON file
4. Add an HTML embed
5. Drop in a chunk of CSS to target your desired colors ( including CSS _currentColor ) to your Lottie

The Lottie renders as an SVG in your Webflow page, and even supports animation if you want to take it that far. This approach is impressively smooth, with the ability to target different parts of your resulting SVG using classes.

Have a look.

DEMO - Coloring SVGs as Lotties

I've done a full breakdown of this technique in the video.‍