SVG SMIL Animation
SMIL animation elements let SVG animate declaratively within the markup itself, without any JavaScript or CSS required.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Animating Attributes with <animate>
The <animate> element, placed as a child of the SVG element it targets, declaratively animates a specific attribute over time using attributeName, from, to, and dur properties, letting properties like fill color, radius, or opacity change smoothly without any external scripting, purely through SVG markup itself.
- attributeName specifies exactly which property to animate over time
- from, to, and dur control the animation's start value, end value, and duration
- Works entirely through markup with no JavaScript or CSS required
Animating Transforms with animateTransform
Because transform is a special compound attribute, animating rotation, scale, or translation requires the dedicated <animateTransform> element rather than plain <animate>, specifying a type attribute (rotate, scale, translate) alongside the same from/to/dur pattern to declaratively animate an element's position or size.
- animateTransform is required specifically for transform-related animations
- type attribute specifies rotate, scale, or translate animation behavior
- Same from/to/dur pattern applies as with standard attribute animation
Frequently Asked Questions
Is SMIL animation deprecated in favor of CSS or JavaScript animation?
SMIL was deprecated in Chrome at one point but that deprecation was later reversed, so it remains supported across major modern browsers, though CSS animations or JavaScript libraries offer more flexibility for complex interactive sequences.
Can SMIL animations be triggered by user interaction like a click?
Yes, using begin="click" or referencing another element's event, SMIL animations can be triggered by interaction rather than only starting automatically on page load.
Related guides
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