Know what SMIL is good for
Use animate and animateTransform for simple attribute and transform changes inside the SVG file.
smil svg animation
Use SMIL SVG animation when motion should travel with the file
SMIL is SVG's declarative animation syntax. It can be useful for standalone SVG files, documentation examples, and simple motion that should not depend on a page stylesheet.
Check browser and fallback behavior
SMIL support is broad enough for many modern cases, but you should still preview the static state and target browsers.
Avoid unsafe animation targets
Do not animate href, style, event handlers, or external references in untrusted SVG.
SMIL pulse example
The animate element changes radius and opacity without JavaScript.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 120" role="img"><title>Animated pulse badge</title><rect width="180" height="120" rx="18" fill="#11151c"/><circle cx="90" cy="60" r="24" fill="#6ee7d8"><animate attributeName="r" values="18;30;18" dur="1.8s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.72;1;0.72" dur="1.8s" repeatCount="indefinite"/></circle><path d="M72 60h36" stroke="#ffffff" stroke-width="8" stroke-linecap="round"/></svg>SMIL SVG Animation FAQ
What is SMIL SVG animation?
SMIL is declarative SVG animation using elements such as animate, set, and animateTransform.
Is SMIL deprecated?
SMIL has had a complicated history, but modern references and support tables still document browser support. Test your target browsers before relying on it.
Is SMIL safer than JavaScript?
It avoids script execution, but untrusted SVG still needs sanitization because SVG can contain unsafe elements and references.