Change color on hoover of SVG?

Hello I have another question about animation. I want change fill color of SVG on hoover it’s that possible in Webflow or I need use two SVGs?

Best,
Vladimir


Here is my public share link: LINK
(how to access public share link)

hi @MarMar working with SVG in WF is PIN as it is recognised as “standard” file you can’t interact with . There is one possibility if SVG is not too complicated to use embed element that is limited to 10000 characters. If you can do that than you can use CSS or JS to change currentColor. If not you will have to use 2 SVG’s.

1 Like

For simple flat graphics, I’ll create svg files to make a font using https://glyphter.com/ Upload the font files as a custom font in Webflow, and then position the images within your page as text. You can then control the colors as you do with text.

Some things to know about Glypher:
The final svg image(s) should be exported using compound paths
The final svg graphic should be in black only
In iIlustrator use the pixel grid when rendering. Glypher forces the images to a pixel grid.
Position you graphic within a square format

1 Like

Thank you you are right that works!

Delete first top fill=“white” in code
last change to fill=“currentcolor”

here is img

1 Like