Browser support for animated SVG

Animated SVG files with JavaScript as the animation type are supported by all major browsers. This means that your animation will work and look the same in Chrome, Firefox, Safari, and Edge.

Unfortunately, if you choose CSS, not all properties work the same in these browsers. Please see the differences below:

AnimationChromeFirefoxSafariEdge Morph 53+ - - 74+ Filter - Yes - - Move on path (linear) Yes Yes Yes Yes Move on path (curved) 56+ 72+ - 74+

*CSS chart*

Also good to know:

Safari doesn't support negative values for the dash-offset property. You can avoid using negative values by following the instructions here https://www.svgator.com/help/technical-issues/path-animation-issues-in-safari .

Color transition animation is limited for JavaScript and CSS, too. You can animate a smooth color transition from color to color, but not from gradient to color or from color to gradient.

More articles:

The exported file looks different https://www.svgator.com/help/technical-issues/exported-file-looks-different

Clipping mask not visible in Safari https://www.svgator.com/help/technical-issues/clipping-mask-not-visible-in-safari