If it’s a single-color SVG, you can embed your SVG as an external asset just like an image, and then color it using filter effects. I’ve done a tutorial on that here;
But @Sam_Sharpe 's comment on using Lottie got me thinking as well, and I have to say, it’s pretty darn slick. Thanks Sam. Using Lotties, you can pull your SVG content inline from an asset, and then apply coloring using CSS.
Here’s a quick primer;
- Convert your SVG to a Lottie
- Add the Lottie JSON to your assets
- Add a Webflow Lottie element to your page, and link your asset
- Give the Lottie element a class, I’ll call it
my-lottie
for discussion
In the Lottie element settings I’d make sure it’s generating as SVG and not Canvas- that should be the default.
The way Lotties work is that they generate and animate SVG ( or Canvas ) content in your browser. Setting it to SVG means that you will now have inline SVG content, even though it was sourced from an asset.
10k char limit sorted. Very cool.
To color it, you’ll need to decide what parts you’re coloring and how to target them, but a small chunk of CSS should do the trick. You can drop this in an HTML Embed;
<style>
.my-lottie path {
fill: currentColor;
stroke: currentColor;
}
</style>
I’ve used currentColor
so that the browser will pick up the current color of the element in the page, and apply it to the fill and stroke of the SVG.
This inherits, so to change the color, just click your Lottie element ( already classed my-lottie
), and give it a different foreground color. The browser will consider that to be currentColor
on that element, and pass it through.
You’ll even see this in the designer.
Very slick, Webflow team.
Video here.