Animation not working in Safari

With Safari's latest update (September, 2024) it becomes more and more important to pick the right method for adding SVG animation to your website. One of the most common reasons why the SVG animation doesn't work is the use of <img> tags to add the SVG. The SVG might be visible on the website, but the animation will not start.

You can easily fix this by replacing all <img> tags with an <object> tag. You can also open the SVG file in a text or code editor, copy the entire code and add it inline to your website.

As we've mentioned in one of our previous articles, it's also highly recommended to export JavaScript as the animation type instead of CSS from SVGator. JavaScript will support all advanced features such as morphing or starting the animation on click.

More articles:

The Clipping Mask is Not Visible in Safari | SVGator Help

If you choose to run SVGator in Safari and there’s a clipping mask in your SVG, please note that it will not be visible after the import.

SVGator

Why The Exported File Looks Different | SVGator

During the Trial period, you can use all features, but the file will be exported with the basic features only. There can be a browser support error too.

SVGator

Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can