SVG SMIL: Browser Support, Elements, Alternatives

What is SVG SMIL?

SVG SMIL is the Synchronized Multimedia Integration Language profile that the W3C folded into SVG. It exposes a small set of XML elements (animate, animateTransform, animateMotion, and set) that change SVG attributes over time, directly inside the markup, with no JavaScript or CSS required.

Which browsers does SVG SMIL support?

SVG SMIL works across every modern browser. Chrome, Edge, Firefox, Safari, Opera, Samsung Internet, and the Android Browser all ship it, while Internet Explorer and the legacy EdgeHTML build of Edge never added support.

What are the key animation elements of SVG SMIL?

SMIL exposes four core elements that nest inside the SVG element they animate. Each one targets a different kind of attribute change.

• animate: Animates a single numeric or color attribute over time. The attributeName, from, to, dur, and repeatCount attributes drive the timing. This is the element you reach for to animate cx, cy, r, fill, opacity, and the d attribute on a path for shape morphing.
• animateTransform: Animates the transform attribute, with type set to translate, rotate, scale, skewX, or skewY. This is the only SMIL element that handles SVG transforms, since the transform attribute holds a list of functions that animate cannot interpolate on its own.
• animateMotion: Moves an element along a path, defined either inline through the path attribute or by reference to an external path element through mpath. The rotate="auto" attribute orients the element along the tangent of the path.
• set: Sets an attribute to a fixed value at a given time, with no interpolation. Useful for non-numeric attributes like visibility, display, or text content that cannot be tweened.

A fifth element, animateColor, was deprecated in SVG 1.1 and removed from SVG 2. Use animate with attributeName="fill" or attributeName="stroke" instead.

Is SVG SMIL deprecated?

No. The Chrome team filed a public intent to deprecate SMIL on the blink-dev mailing list, citing maintenance cost and overlap with the Web Animations API. After strong developer pushback (path morphing and animations inside img-tag SVGs have no CSS or Web Animations equivalent), the team suspended the deprecation. Chrome continues to ship SMIL, the SVG 2 specification keeps every animation element, and Firefox, Safari, and the Chromium-based Edge all maintain their implementations.

What are the alternatives to SVG SMIL?

Three alternatives cover most of what SMIL does, with different trade-offs around context and performance.

• CSS animations and transitions: Animate any CSS property on an inlined SVG, including the SVG-specific properties fill, stroke, stroke-dashoffset, and the transform property. CSS hardware-accelerates transform and opacity, so it usually outperforms SMIL on long-running loops. CSS does not run inside an img or background-image SVG.
• Web Animations API: A JavaScript API that drives the same timeline model as CSS animations and integrates with requestAnimationFrame. It animates CSS properties on inlined SVG elements and gives you play, pause, reverse, and finish promises. Like CSS, it does not run inside img-tag or background-image SVGs.
• JavaScript libraries (GSAP, anime.js): Use requestAnimationFrame and DOM mutation to animate SVG attributes that CSS cannot reach, including the d attribute for path morphing and the points attribute on polygon. These libraries also work around SMIL bugs in older Safari and Chrome.
• FakeSmile polyfill: A JavaScript polyfill that reads SMIL elements from the DOM and drives them through script. It is the only way to ship a single SMIL source that also works on Internet Explorer 11.

What are the known issues with SVG SMIL?

SMIL ships across every modern browser, but the implementations diverge on performance, edge cases, and tooling. Plan for these issues before you commit a SMIL animation to production.

• No hardware acceleration in WebKit: Safari renders SMIL on the main thread. Transform animations that look smooth in Chrome or Firefox can drop frames on Safari, especially on iPhone and iPad. Move transform-heavy work to CSS or the Web Animations API when the SVG is inlined.
• Path morphing requires matching commands: The animate element interpolates the d attribute only when the source and target paths use the same number of commands of the same type. A morph from M L L Z to M C C Z silently snaps to the target instead of tweening. Run the paths through a tool like flubber or shape-shifter first.
• Internet Explorer ignores every element: IE 9 to 11 parse the SVG but ignore animate, animateTransform, animateMotion, and set. The page renders the static initial state. Use the FakeSmile polyfill if IE is in scope.
• Tooling is thin: Most icon libraries and design tools (Figma, Sketch, Illustrator) do not export SMIL. You hand-write the animation elements or convert from a Lottie or After Effects export.
• Chrome path warnings persist: Chrome still logs the original deprecation warning for some SMIL features in DevTools, even though the deprecation never landed. The warnings are noise, not a runtime error.

In my experience, the rendering gap that surprises teams most is path morphing on Safari, since Safari interpolates the d attribute correctly but skips frames on long sequences, so a morph that looks crisp on Chrome reads as a jump-cut on iPhone. Test the morph on a real iOS Safari build before shipping.

Use the snippet below in any browser console to confirm whether SMIL animate, animateMotion, and animateTransform are exposed in the current browser.

// Run in the DevTools console of any browser to test SMIL support.
const ns = "http://www.w3.org/2000/svg";

const animate = document.createElementNS(ns, "animate");
const animateMotion = document.createElementNS(ns, "animateMotion");
const animateTransform = document.createElementNS(ns, "animateTransform");

console.log("SMIL animate:", typeof animate.beginElement === "function" ? "yes" : "no");
console.log("SMIL animateMotion:", typeof animateMotion.beginElement === "function" ? "yes" : "no");
console.log("SMIL animateTransform:", typeof animateTransform.beginElement === "function" ? "yes" : "no");

Citations

All SVG SMIL version numbers and platform notes in this guide come from these primary sources:

• MDN, SVG animation with SMIL: developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_animation_with_SMIL
• MDN, animate element reference: developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/animate
• MDN, animateTransform element reference: developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/animateTransform
• MDN, animateMotion element reference: developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/animateMotion
• W3C, SMIL Animation Recommendation: w3.org/TR/smil-animation
• W3C, SVG 2 animation chapter: svgwg.org/specs/animations
• W3C, SMIL 3.0 specification: w3.org/TR/SMIL3
• Wikipedia, SVG animation: en.wikipedia.org/wiki/SVG_animation
• Chromium blink-dev, Intent to Deprecate: SMIL: groups.google.com/a/chromium.org/g/blink-dev/c/5o0yiO440LM
• Chrome Platform Status, Suspending SMIL deprecation: chromestatus.com/feature/5371475380928512
• Apple Developer, Safari 6.0 release notes: developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_6_0
• Mozilla bug 216462, SMIL Animation tracker: bugzilla.mozilla.org/show_bug.cgi?id=216462