I created some SVG animations using CSS, when I run everything locally it works just fine no issues, but when I depoy my site parts of the anmiations for the SVG do not work which. For example I have two gears one will move but the other will not but I created animations for both here is the site - https://almog-studio-site.netlify.app/
Attached gif showing working local version
the only thing I can think of is maybe the Netlify plugins are casuing the issue
It seems the SVG’s are loaded with a static image tag, disabling the SVG animation, depending on which browser you use. For more consistent support, an SVG tag is needed for the animation. Try including the SVG’s directly.
<img src="/static/dfd5ba86de5289d09441af8dbd2259ab/full-stack-development-animation.svg" alt="skill-icon-1" class="Image__ImageWrapper-csrlc2-0 kbtScj">
In case you are using SVG tags: I can’t imagine Netlify making such changes to the HTML. Can you check if an SVG tag is used when you run the site locally? What happens when you build the site locally and check the outputted HTML?
-edit-
After switching some tabs, I see some of the icons moving in Chrome. I do see all animations in Safari, but it’s not looking as you’d expect:
I tried using <object type="image/svg+xml" data={item.icon.publicURL} /> you can check the site but either way, if that is the case why would element of “A” of the animation work but element “B” not work. Each SVG animation has at least two elements with animation in them.
@tomrutgers as I thought this is an issue with Netlify plugins, I removed Inline critical CSS and Image Optim plugins and it works fine. Testing now which one does it.
@tomrutgers so it’s the Image Optim plugin I think when it optizimes the SVG image it strips out the CSS animation. It would be good to have a way to set this to ignore SVG images or just not remove the animations.
hi almog, ImageOptim isn’t a netlify plugin, right? just making sure.
Yes, you are correct, I have opened an issue on GitHub - ImageOptim removes CSS animations from SVG files · Issue #27 · chrisdwheatley/netlify-plugin-image-optim · GitHub
Hi, I am making a website which has SVG animation. I load it using tag in html. But it doesn’t appear in my Netlify deployment. It works fine in my local environment. I came across this thread now. How can I disable the image optim plugin?
Share your URL so we can check.
