Every Way to Color Your SVGs

For web designers, it's super convenient to be able to dynamically color your SVGs.

Modern browsers and protocols support this well using CSS's _currentColor special value. Place it where you want a color value in your SVG, and the browser will calculate and supply the color for you based on the foreground color for that element.

In Webflow, using this capability is sometimes easy, and sometimes there are challenges.

These are the most common problems I see;

1. The SVG is too large to copy-paste into Webflow's HTML Embed component, which has a 10,000 char limit.
2. The SVG is complex, and will have multiple different parts with dynamic colors.

So Many Solutions

I've written before on specific solutions, but in truth, there are so many that it's worth it to simply list them all in one place. I think this is the easiest way to choose the right solution for you.

Spoiler alert: my current favorite approach is Lottie-based solutions.

SVG-INLINING SOLUTIONS

Basic HTML Embeds

• If your SVG content is under 10,000 characters, you can simply place an HTML Embed, and paste in the contents of your SVG file.
• Use _currentColor in your SVG anywhere you want the current foreground color to be applied to your SVG.

VIDEO - For this tutorial, we're linking to Legacy Design's video on the basics of SVG creation and embedding in Webflow.

Expanded HTML Embeds

What if your SVG content is greater than 10,000 chars?

You could simply it, or compress it.

You can also span more than one HTML Embed, which is a suitable solution if your SVG is between 10,000 and say 30,000 chars in size.

• Cut your SVG into a few parts under 10,000 chars, and place them in multiple adjacent HTML Embeds.
• Use script to remove that HTML Embed wrapper. Your browser will see them as one single SVG element.

Downside- your SVG will be broken until those embeds are "unwrapped". So maybe hide them until that operation is complete.

Dynamic Inlining

Here's how it works;

• Prepare your SVG and add it to assets
• Add it to your site using a standard Webflow Image element
• Tag it with a custom attribute, class, or ID that makes it easy for your script to identify.
• Add a script that Loads the asset, and then replaces the image element in your page.

Downsides;

• Some delay for the asset to be loaded and replaced by the script.
• Won't work if script is disabled.

LOTTIE-BASED SOLUTIONS

This is simply my favorite solution so far.

1. Convert your SVGs to JSON Lotties
2. Edit the JSON, to place CSS _currentColor and CSS classes wherever you like
3. Upload your modified Lottie JSON to your site assets
4. Embed your Lottie in your page using Webflow's Lottie element
5. Add an HTML embed on your page to apply _currentColor and color settings to the classes where you want.

ARTICLE - How to color your SVGs using Lotties

FONT-BASED SOLUTIONS

If you have a lot of SVG icons and/or you use them across a wide number of projects, you might consider creating an SVG font.

Most icon libraries include a font-generation tool now, including;

• Flaticon. Create a Collection, and then download the entire collection as an icon font.
• Glyphter. Allows you to arrange your SVGs exactly the way you want, connected to specific letters so you can remember them easily.

If you have custom SVGs you've created, some tools allow you to turn those into fonts as well;

• Icomoon's app
• Fontello.

ARTICLE - Nikolai Bain's writeup on fonts and icon sets

CSS FILTER-EFFECT SOLUTIONS

CSS filter effects can also be used to color your SVGs- in fact they'll color anything. PNGs, JPEGs, even text. Probably even video content, though I haven't tried.

Best of all, it doesn't matter where these assets are stored. Upload giant SVGs

With all this freedom, there are three key limitations;

1. Your coloring will apply to the whole element. You cannot target specific paths.
2. It's best to start with something solid black, no other colors.
3. Calculating the filter effect settings and setting them up is a bit of a chore. Once you're experienced, it just takes a few minutes- but it's not dynamic either. Meaning if you want to change that color, it's not as simple as adjusting your palette. You go back to the calculator.

ARTICLE & VIDEO - How to color your SVGs using CSS filter effects

DID I MISS ANY?

Let me know!

‍