ImageToSVG

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:
VTracer vectorization + 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.

Related guides

Free converterConvert any image to SVG instantlySVG for CricutCricut-compatible SVG in one stepSVG vs PNGWhich format should you use?Conversion guideStep-by-step image to SVG walkthrough

Ready to Convert Your Image to SVG?

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

Try It Free — Convert Image to SVG