SVGs keep changing colour without warning!

Hello! I’m using my own SVGs. When I add them, the colour looks fine in the settings but then they switch randomly to one of my other colours - well I guess it’s not random but I have no idea what’s going on! Can anyone help?! Thanks, Gracie

Can you share the SVG code you’re using ?

Hi David, Thanks for your reply :slight_smile:

Pasting the code below - I tried to use the platform you suggest in your documentation but it didn’t work so I just used the file I saved on my laptop - which works apart from the weird colour thing!

Thank you!
Gracie

.cls-1 { fill: #0b757f; }
  .cls-1, .cls-2, .cls-3 {
    fill-rule: evenodd;
  }

  .cls-2 {
    fill: #0f9ca9;
  }

  .cls-3 {
    fill: #0f1140;
  }
</style>

Hmm - the code in the message above has been massively clipped - hopefully you can see the whole thing?

Can’t see the whole thing, but the part we can see is the issue. There are styles inside your SVG code that are changing the color of the SVGs.

When you optimize your SVG (SVGOMG - SVGO's Missing GUI), make sure to check the “Remove style elements” option at the bottom of the options.

Hey Tom,

Thanks for your reply. I tried using that platform again - including the toggle for removing style elements, but when I copy the code back to my site, the icon just doesn’t show up. I can tell there’s “something” there as the content shifts a bit if I make the icon bigger - but the icon itself is invisible.

I’ve attached a pic of the code once it’s been through the platform -

Does that make things any clearer to you?!

Thanks!
Gracie

Heres an example of a working SVG:

<svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm92.49 313l-20 25a16 16 0 01-22.49 2.5l-67-49.72a40 40 0 01-15-31.23V112a16 16 0 0116-16h32a16 16 0 0116 16v144l58 42.5a16 16 0 012.49 22.5z"></path></svg>

The important part to note in the is the fill="currentColor" attribute. Add that to your SVGs so the icon colors will be inherited.

1 Like

Thanks David, still can’t get it working so will do some more research - I must be making it wrong in the first place.

Hi,
I had the same issue that some parts of my icons changed the color. I found out that the icons in the headline block adapt the color from the Wordpress headline/text color that I set. In the headline block I had 2 options: Change it to paragraph (that will change the color to the text color, in my case black that was my original color) or change the icon color to the original color.
Similar happened in button block. Some parts of the icon are white (like the text in button block), if I change the text color in button block the parts from my icon who “randomly” change the color are back to normal (or whatever color I choose).
I don’t know why this happened but at least I found out some kind of solution.