Changing SVG color when it doesn't fit as embed code

Hi, I have this site: https://rapidprototyping.webflow.io/ and I want to change svg color on mouse over but I can’t because the svg doesn’t fit as embed code (more than 10K lines) and if I put it as an image I cant access the path fill by css

.pctrustedsource .div-block-2:hover path{
      fill:#fff;
  	}

Any other way to put svg on webflow apart from embed code? with no limitation of lines
Any other solution?

Thank you very much,
Miguel Gisbert

Hi Miguel @Miguel_Gisbert, have a look at the thread below:

I think this is what you’re looking for.

Thanks Julian but it doesn’t work for me. I can see the script pasted at the embed code at the published website source code but not the svg code.

My workaround here would be to use the hue rotation filter on your hover and click states.

For single-color svgs I turn them into a font using Glyphter.com and then you can easily change the colors like you would any text element.

Thanks for the answer Port_of_Folio but I need the svg code on the website source code and I’d like to change the color manually by css. I’m looking a lot of questions about this but I still can’t find any way to insert the svg code bigger than 10K characters.

Any solution?

Thank you very much,
Miguel Gisbert

Ok, I’ve sorted it out with normal img (svg type) and opacity. But, anyway, it would be nice to have many more than 10K charachters for embed code. I suppose there’s a reason for that limitation but it’s quite… limiting.

.div-block-2 .trustedsourcelogobk,
  	.div-block-2 .youmaloulogobk,
  	.div-block-2 .giftcardswaplogobk,
  	.div-block-2 .homeprocesslogobk,
  	.div-block-2 .stayupgradelogobk{
      opacity:1;
      transition: opacity 0.2s linear;
  	}
  	.div-block-2 .trustedsourcelogowh,
  	.div-block-2 .youmaloulogowh,
  	.div-block-2 .giftcardswaplogowh,
  	.div-block-2 .homeprocesslogowh,
  	.div-block-2 .stayupgradelogowh{
      opacity:0;
      transition: opacity 0.2s linear;
  	}
  	.div-block-2:hover .trustedsourcelogobk,
  	.div-block-2:hover .youmaloulogobk,
  	.div-block-2:hover .giftcardswaplogobk,
  	.div-block-2:hover .homeprocesslogobk,
  	.div-block-2:hover .stayupgradelogobk{
      opacity:0;
      transition: opacity 0.2s linear;
  	}
  	.div-block-2:hover .trustedsourcelogowh,
  	.div-block-2:hover .youmaloulogowh,
  	.div-block-2:hover .giftcardswaplogowh,
  	.div-block-2:hover .homeprocesslogowh,
  	.div-block-2:hover .stayupgradelogowh{
      opacity:1;
      transition: opacity 0.2s linear;
  	}
1 Like

Why not do this with after effects and Lottie?

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.

2 Likes

Thanks Sam, I was trying to embed as an external asset with no success and I have bad experiences also with filters on SVG. It didn’t work well on Safari. That’s why I prefer to change the SVG color. But as I couldn’t find the way to do so with the 10K char limitation I decided to swith between two different SVG, one white and one black.

1 Like

I’m assuming OP might want to do more than swapping one colour for another without SVG vector data embed overhead. AE + Lottie can do a lot of work with less overhead of code embed.