Support for SVG CSS properties

Hi,

Is there a way to change the color of an SVG icon on “mouse hover” true CSS.
I did a google search and found the “fill” property, but the “fill” property on webflow is for the background.

tks
Rui Almeida

3 Likes

The fill CSS property only applies to SVG elements, but you’re
trying to apply it to HTML <img> element

This is from Styling SVG with CSS in the containing HTML - Stack Overflow

So you can just give it a fill: green and change the black to green for an <img> tag. There is a solution on the Stack Overflow question, but it’s not straightforward as plain vanilla CSS.

@Rui_Almeida it looks like the only way to do this is by embedding the SVG code inline, and adding custom CSS code…

Here’s an example of this working with an inline SVG:

-Dan

hum… i was thinking it was something more easy and simple.

tks for the reply.

1 Like

It would be so awesome to change the SVG color inside an img tag with plain CSS. That would make everyone’s life so much easier.

5 Likes

is there any update to changing a SVG color possibility?

It would be so much easier to have one icon that I can style with different colors, than upload multiple colors of the same email icon ;(

2 Likes

I would also love to this this feature in the next update !!! keeping fingers crossed :smiley:

1 Like

I suceeded to do that inside the SVG file.
The SVG file have the ECMAscript defined inside and then I could define a HOVER state. For your exemple it’s possible to do this.

You can colorize SVG files inside Webflow using this method. This will allow you to add text color on parent elements and the svg’s inside will inherit that color.

  • Set the fill="currentColor" on a path in the SVG file like so:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 13">
  <path fill="currentColor" d="M14.2 1H1.8c-.4 0-.8.4-.8.8v9.4c0 .4.4.8.8.8h12.4c.4 0 .8-.4.8-.8V1.8c0-.4-.4-.8-.8-.8zM3 4.5C3 3.7 3.7 3 4.5 3S6 3.7 6 4.5 5.3 6 4.5 6 3 5.3 3 4.5zM4 10l6-5 3 5H4z"/>
</svg>
  • Paste the SVG code into an embed inside Webflow. The graphic will render on the canvas.
  • Apply a width/height directly in the SVG code by adding height="16px" and width="16px" to the <svg> tag or by adding a class to the embed and setting width and height on the class.
  • Set Text Color on the icon or on the parent element and it will apply the color on the SVG.

Note: Don’t upload the SVG like you upload other images. The SVG has to be in the HTML directly and at the moment this is the only way to do it.

10 Likes

Can’t seem to get this to work. Anybody have a simple walk through? SVG file settings I’ve used below… uploaded, gave it a class + text color, nothing :frowning:

Update: The SVG has to be directly in the HTML, not inside of an img tag. I updated my comment above. It’s a more cumbersome workflow than just uploading it like other images, but for now it will do until we have an SVG icons feature in Webflow.

2 Likes

Right on :wink: That works great, thanks for your time.

When will Webflow support real “svg” tags instead of only putting svgs in tags ?

1 Like