How to Animate an SVG (2026)

What SMIL Actually Is

SMIL stands for Synchronized Multimedia Integration Language. It's a W3C animation spec from the late 1990s that was originally designed for multimedia presentations and ended up embedded in the SVG specification. The idea is simple: animation instructions live inside the SVG file itself, as child elements of the shapes they animate.

A static SVG describes a shape — a circle at coordinates (120, 120) with radius 50 and fill #00FFD1. A SMIL-animated SVG describes the same shape, plus an instruction like “animateTransform” that lives as a child of the circle and says “rotate from 0 to 360 degrees over 2 seconds, repeat forever.” The animation is structurally part of the SVG, serialized in the same file, transmitted in the same payload. Open the file in a browser and it plays. Save the file to disk, email it, re-upload it somewhere, drop it into an img tag — it still plays.

SMIL went through a complicated period around 2015 when Chrome threatened to deprecate it in favor of Web Animations API. That deprecation was reversed — Chrome still supports SMIL fully, as do Firefox, Safari (desktop and iOS), and Edge. SMIL is a stable, cross-browser feature in 2026, and the self-contained-file property makes it uniquely useful for SVG delivery where you can't guarantee the consumer will also load a stylesheet or JavaScript runtime.

SMIL vs. CSS vs. Lottie

There are three practical ways to animate an SVG, and they solve different problems.

CSS animation is the most familiar. You write @keyframes rules in a stylesheet, target SVG elements by selector, and the browser animates them. This works cleanly for SVGs inlined into your HTML (as child elements of the DOM, they participate in CSS). It does not work for SVGs loaded as images via img tag — browsers sandbox image SVGs and don't apply external CSS to them. It also means the animation is a separate concern from the file: if you export your SVG to send to someone, the CSS doesn't go with it. For websites you control end-to-end, CSS animation is often the right choice. For SVGs you hand off as files, it isn't.

Lottie is a JSON-based animation format that Airbnb open-sourced from their internal After Effects pipeline. Designers animate in After Effects, export to Lottie JSON via the Bodymovin plugin, and the JSON plays in apps via the lottie-web runtime (or native iOS/Android/React Native runtimes). Lottie is powerful — it supports more animation complexity than SMIL — but it requires that wherever you play the animation, the lottie-web library is also loaded. For marketing landing pages that's fine. For a standalone SVG icon someone drops into a CMS, it's overkill and often impossible.

SMIL is the self-contained option. The animation lives inside the SVG, no external dependencies, no runtime library, no stylesheet. The tradeoff is that SMIL is less expressive than Lottie and requires knowing its slightly-awkward XML syntax if you're hand-writing it. Tools that generate SMIL (like the UDT SVG Animator) paper over the syntax problem and leave you with the file's portability advantage.

The practical picking heuristic: if you control the host page, CSS animation is often simplest. If you need complex After Effects-quality animation and can ship a runtime library, use Lottie. If you need a single file that just works when pasted anywhere, SMIL is the answer.

When Animating SVGs Makes Sense

Loading states and spinners. A custom-designed spinner embedded as a single SVG file weighs under a kilobyte and plays without touching your CSS bundle. This is the canonical use case — tiny file, infinite loop, drop-in ready.

Icon microinteractions. A menu icon that morphs to an X on open; a checkbox that fills in with a tick when checked; a heart that bounces when favorited. These are typically triggered by state changes, which means you want CSS or JavaScript control — SMIL is less ideal here. But for always-on animations (a subtle hover on a logo, a periodic attention-grab on a call-to-action), SMIL works and keeps the icon as a single file.

Email signatures and documentation. Animated SVGs in email signatures work in many modern clients (Gmail web, Apple Mail, Outlook 365 desktop) and gracefully degrade to the static first frame in others. For product documentation — showing how a UI element moves, what a gesture looks like — SMIL-animated SVGs embed in documentation sites, GitBook, Notion, and most CMSes without needing a custom player.

Illustrated hero sections. Big decorative illustrations with subtle motion — a shape rotating slowly, lines drawing themselves on scroll-into-view, elements fading in staggered. SMIL handles all of this and stays in the file, so you can hand the asset to a developer with one URL instead of a zip of SVG + CSS + instructions.

Where SMIL falls down: GitHub strips SMIL from SVGs rendered in markdown (workaround: host on GitHub Pages and use img tag). Some corporate email clients sanitize it. If you need the animation to render in a PDF or a presentation, convert to GIF or MP4 as a final step. For everything else web-shaped, SMIL is production-ready.

The 30-Second Workflow

Step 1 — Start with a static SVG. Export from Figma (File → Export → SVG), Illustrator, Inkscape, or hand-code it. The simpler the file, the better — fewer nested groups, clearly-named elements, no embedded bitmap images. If you don't have one ready, the UDT SVG Animator includes a sample SVG you can experiment with.

Step 2 — Paste or drop the SVG into the animator. The tool parses the markup, finds every animatable element (shapes, groups, text), assigns stable IDs where missing, and lists them in the left panel. Elements are listed in document order, so the top of the list is the first element drawn (typically the background); the bottom is the topmost layer.

Step 3 — Select an element and add animations. Click an element in the list. The right panel unlocks six animation types — rotate, scale, translate, fade, color, and draw. Click any of them to add an animation to that element. You can stack multiple animations on one element (rotate + fade, for example, to fade in while spinning), and different elements can run different animations simultaneously or with staggered delays.

Step 4 — Tune timing per animation. Each animation has four universal controls: duration (how long one cycle takes), delay (wait before starting), repeat (fixed count or infinite), and easing (linear, ease-in, ease-out, ease-in-out, or spring). Type-specific controls appear below — from/to degrees for rotate, from/to scale factor for scale, X and Y offsets for translate, color pickers for color animations. The preview updates live; the timeline view at the bottom shows when each animation plays relative to the others.

Step 5 — Export or copy. When the preview matches what you want, click Download SVG to save a single .svg file that plays anywhere, or Copy to clipboard the full SVG markup to paste directly into HTML, Markdown, or a CMS. The exported SVG is self-contained — you can email it, commit it to Git, upload it to a shared drive, or drop it into a Figma design system, and the animation travels with the file.

What Other Tools Cost

SVGator is the closest direct competitor. It's a dedicated SVG animation editor with a proper timeline UI, keyframe editing, and export to SMIL or CSS. The catch: the free tier is limited to 2 objects and 3 animators (effectively toy projects); the Full Animation plan runs about $18/month for a single editor, with team tiers at $36/month. For professional animation work, SVGator is a real tool; for adding a rotate to a loading spinner, it's overkill and expensive.

Adobe After Effects + Bodymovin is the industry-standard workflow for complex animation, but it outputs Lottie JSON, not SMIL. After Effects itself costs $22.99/month (or $59.99/month as part of Creative Cloud All Apps), and the output requires the lottie-web runtime wherever it plays. Excellent for narrative animation and high-fidelity motion design; wrong tool for a self-contained icon.

Keyshape and Animatron are smaller competitors in the SVG animation space. Keyshape is Mac-only and runs about $50 one-time; Animatron has a freemium model with watermarks on free exports. Both produce good output but have learning curves and platform constraints.

Hand-writing SMIL is genuinely free if you know the syntax. The MDN documentation on animateTransform, keySplines, and additive transforms is thorough. The problem is that SMIL's XML attribute-based syntax is unintuitive — rotation requires a transform type attribute plus from/to values that include the rotation center coordinates; easing requires calcMode, keyTimes, and keySplines values; draw animation requires computing the path length and using stroke-dasharray/stroke-dashoffset. Experienced SVG developers can hand-write this; most designers and front-end developers won't.

Our tool runs the animation layer entirely in your browser. Nothing is uploaded, the exported SVG is standard SMIL that works in Chrome, Firefox, Safari, and Edge without any runtime, and the UI papers over the SMIL syntax so you can focus on timing and choreography rather than XML attributes.