What Is SVG Animator?
SVG Animator adds SMIL animations to your SVG graphics without writing code. Animate shapes and paths with rotation, scale, movement, fade, color change and stroke drawing to create lightweight motion graphics for websites, presentations, and UI elements — all at a fraction of the file size of GIFs or videos.
How to Use This Tool
Upload an SVG or paste SVG code, then select elements you want to animate. Choose animation properties (rotation, scale, fade, stroke draw, color shift), set timing and easing curves, and preview the result in real time. Export the animated SVG as a self-contained file. Everything runs in your browser.
Why Use SVG Animator?
Animated SVGs are dramatically smaller than GIFs and smoother than sprite sheets, but hand-coding SVG animations is tedious. This tool gives you per-animation timing, easing and repeat settings plus a timeline view of how they line up, so you can build motion without touching animation code. It’s free, requires no account, and outputs clean, lightweight SVG. For a detailed walkthrough, see our step-by-step guide.
Related tools
- And if you want to rebuild the icon itself as moving particles rather than animate its existing shapes, the Dot Wave Animator resamples any SVG into a dot grid with a travelling wave and exports that as a self-playing animated SVG too.
Frequently Asked Questions
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?+
Current Chrome, Edge, Firefox and Safari (including iOS Safari) play SMIL natively, whether the SVG is inline, in an img tag or opened directly. Where a sanitizer strips SVG animation elements, such as some HTML email clients and some upload pipelines, the image shows its first frame instead. For slides and PDFs, record the animation as GIF or video.
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 lives in a stylesheet that targets the SVG's elements, so the SVG on its own does not move unless the CSS travels with it. Lottie is a JSON format, usually exported from After Effects, that needs the lottie-web player on the page. SMIL, the only format this tool exports, puts the animation inside the SVG file itself: no external CSS, no script, no player.
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.
What kinds of animation can I create?+
Six types: rotate (around the element's centre), scale (from the centre), translate (move), fade (opacity), color (fill or stroke) and stroke draw (a path drawing itself). Each has its own duration, delay, easing and repeat count, and one element can carry several at once; they stack on top of any transform the element already has. Path morphing, CSS export and Lottie export are not available.
Can the animations run without JavaScript?+
Yes. The export is SMIL: the animation elements sit inside the SVG, and the browser plays them with no script and no stylesheet, inline or through an img tag. JavaScript is only needed if you want runtime control such as replaying on click.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service