CMS Development

jameszerkel
Member

Animation SVG not playing

I've added animated SVG's to my homepage but they stay static and do not play. If I save the SVG to my desktop and drop in a browser the animations play just fine. It looks like I have SVG animations working in other parts for my site. Not sure what the problem is.

 

Non animating SVG example: https://www.polly.ai/

Screen Shot 2020-01-06 at 11.24.54 AM.png

 

Working animated SVG example: https://www.polly.ai/product-management-solutions

Screen Shot 2020-01-06 at 11.24.26 AM.png

0 Upvotes
2 Replies 2
stefen
Key Advisor | Partner
Key Advisor | Partner

Animation SVG not playing

@jameszerkel you'll need to use an inline SVG instead of embedding the SVG inside of an <img> tag.

 

Alternatively, you could change the SVG animation to instead use CSS keyframes instead of javascript and it would animate inside of the <img> tag (in most browsers at least).

Stefen Phelps, Community Champion, Kelp Web Developer
0 Upvotes
jameszerkel
Member

Animation SVG not playing

Soo.. I went back and looked at the animation tool (svgator) I was using an noticed that it was using javascript to create the animations. I switched this to CSS Only and they work fine now.

Screen Shot 2020-01-08 at 1.07.30 PM.png

 

Thanks for the help.