Hello, I’m relatively new to Webflow and have a major issue with loading in animated SVG icons.
A lot of the icons I work with are either hover responsive or click responsive and are animated SVG files. They appear to not work in Webflow at all and only ever display as static icons…
Is there any way to fix this or a special way to import them to assure compatibility?
It would helpful if you could share your project’s read only link where you have used those SVGs.
But I’m assuming that you are getting those animated SVGs from a some platform? Or have you written CSS or JS to make them animate?
Either way if you are just placing the SVG it won’t work, you have to include the scripts that make them animated.
If you have included the scripts as well, then I’ll have to look at the project to be sure.
Thanks for taking the time to get back to me.
By NDA I’m not allowed to share anything before public publishing. I would need to create separate icons and a separate project to show this off.
But all animated SVG’s are created by me using a software tool called SVGator.
They work with other platforms and in any browser, just not in Webflow for some reason.
Do these usually work? Or is this some type of technical limitation?
There aren’t any Webflow limitations here, but you’ll need to sort out what setup you need for the browsers you want to target.
I think animated SVGs use a combination of CSS and JS to do the animation, depending on how you export- so simply referencing an SVG file as an external file probably won’t work in most browsers. It likely needs to be inline.
Or, if there’s a library ( I don’t know svgator, I use lotties and RIVEs ), you may be able to install it and it may be able to identify and handle playback, which is the approach both lotties and RIVEs use for animation.