How to Use SVG SMIL Animation — animate & animateTransform Guide

SMIL animates SVG attributes directly in markup — no CSS or JavaScript needed for color, motion, and transform animations.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, WEBP up to 15MB

Color tracing + SVGO optimizationPrivacy protected

Core SVG SMIL Elements

SMIL animation elements include: `<animate>` (animates any attribute), `<animateTransform>` (animates transform), `<animateMotion>` (moves an element along a path), and `<set>` (jumps to a value).

<animate attributeName='fill' from='red' to='blue' dur='2s' repeatCount='indefinite'>
<animateTransform type='rotate' from='0 50 50' to='360 50 50' dur='3s'>
<animateMotion path='M0,0 C50,100 150,0 200,0' dur='4s'>

SMIL vs CSS Animation for SVG

SMIL is widely supported but Chrome and Edge deprecated it (then un-deprecated). CSS animations are safer for production. Use SMIL for animateMotion (no CSS equivalent) and inline SVG animations in environments without CSS.

CSS animations: safer, more performant for color and transform
SMIL animateMotion: no CSS equivalent for path motion
SMIL works in standalone SVG files without CSS

Frequently Asked Questions

Is SVG SMIL animation still supported in browsers?

Yes — SMIL is supported in Chrome, Firefox, and Safari as of 2025. Chrome reversed its deprecation notice. CSS animations are still recommended for new projects.

How do I loop a SMIL animation?

Set repeatCount='indefinite' on the animation element to loop it continuously, or a number for a fixed repeat count.

Ready to Convert Your Image to SVG?

Free online converter — no sign-up, no watermarks, results in seconds.

Try It Free — Convert Image to SVG