Choosing an export
All exports are under File > Export and in the Import / Export panel. Each one asks for a file name first.
Short answer
| You want | Use |
|---|---|
| An animation that just plays on a web page | Animated SVG |
| Control from the page: hover, click, scroll, play a part | svgmo JSON with the player |
| To use it in a tool or app that reads Lottie | Lottie JSON or dotLottie |
| A video for social media or a slide deck | Video (WebM) |
| Frames for a video editor | PNG sequence |
| One still picture | Frame as PNG or Frame as SVG |
| To keep editing later | File > Save (project file) |
Comparison
| Animated SVG | svgmo JSON + player | Lottie JSON | |
|---|---|---|---|
| Needs a script on the page | No | Yes, 30 KB (11 KB gzipped) | Yes, a Lottie player |
Works in an <img> tag |
Yes | No | No |
| Control from code (pause, seek, speed) | No | Yes | Yes, through the Lottie player |
| Play on hover / click / when visible | No | Yes, one attribute | With code |
| Matches the editor exactly | Transforms and opacity verified equal | Identical output, same renderer | Close; motion paths are baked, some features approximated |
| Opens again in the editor | No | Yes | No |
| Works outside browsers (mobile apps) | No | No | Yes |
Animated SVG
One .svg file that animates by itself, using SVG's built-in animation. No player, no script.
- Animated SVG (no player needed) loops forever. Animated SVG, play once stops on the last frame.
- Copy Animated SVG Code copies the markup, to paste into HTML.
- Keyframes keep their easing curves. Motion paths, overshooting easing curves and trimmed strokes are sampled once per frame, so long animations that use them make bigger files.
- Hidden layers are left out.
Limits: it cannot be paused or scrubbed from code. Email clients and some site builders remove SVG animation. Tested in Chromium.
svgmo JSON
Your animation in svgmo's own format, played by svgmo-player.js.
- Packed for playback: numbers rounded to 3 decimals, hidden layers and editor-only settings removed.
- The player draws with the same code as the editor, so the result is the same picture.
- The file ends in
.json. File > Open reads it back into the editor.
See Getting started, the player reference and the file format.
Lottie JSON and dotLottie
For anything that already plays Lottie. dotLottie is the same animation in a single compressed .lottie file.
- Motion paths are converted to one position keyframe per frame.
- Export notes list anything that could not be carried over exactly.
- The editor exports Lottie but cannot open it.
Video (WebM)
Records the whole timeline in real time in the browser. Keeps transparency in most browsers when the artboard has no background.
PNG sequence
Every frame as a PNG, in one .zip. Transparent when the artboard has no background.
Frame as PNG, PNG @2x, Frame as SVG
The frame under the playhead as a still image.
Project file (File > Save)
The full document as .json, including hidden layers and editor settings. Use it to continue working later. Project files and svgmo files both end in .json and both open with File > Open; the editor tells them apart by their content. Give them different names so you can too.
Background and transparency
The artboard background is set in File > Document Setup > Transparency. With "Transparent", exports that support it have no background. The white page you see when the transparency grid is hidden is only an editing aid and is never exported.
What is outside the artboard
Artwork outside the artboard is visible while editing but is clipped in every export.