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:
| Animation | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| Morph | 53+ | - | - | 74+ |
| Filter | - | Yes | - | - |
| Move on path (linear) | Yes | Yes | Yes | Yes |
| Move on path (curved) | 56+ | 72+ | 15.4+ | 74+ |
| Radius (circle/ellipse) | Yes | Yes | Yes | Yes |
| Corner radius (rectangle) | Yes | Yes | 15.4+ | Yes |
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.
Color transition animation is fully supported for JavaScript, including color to gradient and gradient to gradient animations, even allowing different number of stops and offset values.
Using CSS though color transition animations are somewhat more restricted, limited to same type paint property — You can animate a smooth color transition from color to color, or even gradient to gradient but not from gradient to color (or from color to gradient).
Also to be noted that gradient offset values must not change.
More articles:
The exported file looks different
Clipping mask not visible in Safari
Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.