Coloring SVGs

Tagged: 

Author Posts

sakomicro June 15, 2023 at 1:42 pm

Hi!

I am working on a wordpress website using elementor. I can use this CSS:
.hywd_category_icon {
filter: brightness(0) invert(1) hue-rotate(180deg);
}
…to change the SVG color in the elementor image widget which I gave the CSS Class: .hywd_category_icon. But I want to set a specific color #b40b00 and not manually adjust colors.
But none of these approaches do change the color of the SVG within the elementort image widget.

.hywd_category_icon {
  fill: #b40b00 !important;
}

.hywd_category_icon img {
  fill: #b40b00 !important;
}

.hywd_category_icon svg {
  fill: #b40b00 !important;
}

.hywd_category_icon path {
  fill: #b40b00 !important;
}

.hywd_category_icon svg path {
  fill: #b40b00 !important;
}

I have allready tried changing the original SVGs from:

<svg class="hywd_category_icon" width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="blah blah blah" fill="#232324"/>
<path d="blah blah blah" fill="#232324"/>
</svg>

to

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path d="blah blah blah"/></svg>

Why do both not work with the fill CSS, or is there another approach?

Thanks
Sascha

Sebastian June 15, 2023 at 2:24 pm

Hey Sascha,

Under normal circumstances I would expect the following CSS to work: 

svg.hywd_category_icon path {
   fill: #b40b00 !important;
}

But the SVG needs to be added to the page as inline code, rather than with an image url (my-icon.svg). And there may also be issues if Elementor loads the SVGs as a sprite, but I can’t verify that right now as stackoverflow isn’t loading for me.

Could you send me a link to the page with the SVG? Perhaps via the contact form if you prefer to keep it private.

Cheers,
Sebastian

Sebastian June 15, 2023 at 3:58 pm

For anyone reading this thread, Sascha’s issue was because Elementor was loading the SVG in the src attribute of an img tag. And that can’t be styled with CSS fill.

Some potential workarounds include:

  1. Update the fill attributes in the SVG image itself – but then it can’t be changed easily with CSS
  2. Load the SVG with the rest of the HTML content using an inline svg tag
  3. Use the CSS filter properties to manipulate color (which also works for jpegs, pngs, gifs etc)
  4. Set a background-color on an div or span element and then enter the svg image URL into mask-image property field (see the Shapes and masks property group)

You must login or register to reply to this topic.