What is SMIL and why does this tool use it?

SMIL (Synchronized Multimedia Integration Language) is an animation standard that lives inside the SVG file itself — animations are declared as XML elements like animateTransform alongside the shapes they animate. The advantage is portability: a SMIL-animated SVG is a single self-contained file. Drop it into a webpage, email it, upload it to a CMS, or open it directly in a browser and the animation plays without any external CSS or JavaScript. CSS-keyframe animation of SVGs works too, but requires pairing the SVG with a separate stylesheet, which gets stripped by many platforms.

Where do SMIL-animated SVGs actually work?

All modern browsers (Chrome, Edge, Firefox, Safari including iOS Safari) support SMIL natively. That covers about 96% of web traffic. Notable gaps: GitHub strips SMIL from SVGs uploaded as images in markdown (you can embed via iframe or img tag on a GitHub Pages site instead), and some corporate email clients that render HTML email with aggressive sanitization drop SMIL elements. For presentations and PDFs, convert the animated SVG to GIF or video. For general web use — websites, apps, documentation sites, design portfolios — SMIL works out of the box.

Is my SVG uploaded to a server?

No. The entire tool runs in your browser. Parsing your SVG uses the browser's built-in DOMParser, animation preview uses the browser's native SMIL engine, and export serializes the animated DOM back to an SVG string which downloads locally. Nothing is transmitted anywhere. You can verify this by opening your browser's DevTools Network tab while using the tool — zero requests leave your machine during animation, preview, or export.

How is this different from CSS animation or Lottie?

CSS animation animates SVGs from the outside — you write a separate stylesheet that targets SVG elements by class or ID, and the animation lives in CSS, not in the SVG. That works for websites you control, but the SVG isn't self-contained. Lottie is a JSON-based animation format optimized for After Effects workflows; it needs the lottie-web player library on any page that displays it. SMIL, the format we export, embeds animation inside the SVG as part of the file. No external CSS, no JavaScript runtime, no companion libraries. It's the most portable of the three for single-file delivery.

Can I import animations I made in Figma or After Effects?

Not directly — Figma and After Effects export to their own formats (Figma Smart Animate stays in Figma; After Effects typically exports Lottie JSON or video). What you can do is export static SVG from Figma (File → Export → SVG), then paste it here and add animations. Our tool starts with a static SVG and produces an animated SVG. If you have existing Lottie animations you want to reuse, Lottie-to-SVG conversion is a separate step; once you have the static SVG, our tool handles the animation layer.

Will the animation loop forever?

Your choice per animation. Each animation has a Repeat setting — you can set a fixed number of iterations (1, 2, 3, etc.) or set it to Infinite to loop indefinitely. You can also give different animations on the same element different repeat counts, which is how complex choreographed animations work (one element might fade in once and then rotate forever). Use the Preview to confirm the behavior matches what you want before exporting.

How to Animate an SVG (2026)

✨

Try SVG Animator

Free, no signup →