Animation Export
Animations export in two formats: a standalone animated SVG that plays in a browser, or a rendered video file (MP4 or WebM). Both live behind the Export dropdown in the animation toolbar; choose Animated SVG or Video… from the menu. The button is disabled until your animation has enough states to animate (at least two).
Video export
Export > Video… opens the Export Video dialog. It renders the animation frame by frame from the same SMIL storyboard used for the SVG export, so the video matches what the animated SVG would show.
Dialog options:
- Filename with the extension following your format choice. Settings persist between exports.
- Format: MP4 (H.264, plays almost everywhere) or WebM (VP8, faster to encode). The WebM option is disabled if your browser cannot encode it.
- Resolution: Match SVG, 720p, 1080p (default), 1440p, or 4K. The output dimensions readout updates as you change presets.
- Frame rate: 24, 30 (default), or 60 fps, with a live frame-count estimate.
- Loops: render the animation once or repeat it 2, 3, 5, 10, or 20 times. Video files do not loop on their own, so bake in repeats here if you need them.
- Background: a solid color behind the animation (videos have no transparency).
- Quality: Extreme, High, Medium (default), or Standard. The three higher presets also offer 2x supersampling, which renders frames at double resolution and downsamples for sharper lines at the cost of a slower export.
The dialog reports which encoder it will use before you commit. The fast path is WebCodecs with hardware acceleration: H.264 for MP4 (Chrome and Edge) and VP8 for WebM (Chrome, Edge, and recent Firefox). Without WebCodecs, MP4 falls back to a WASM H.264 encoder (about a 1 MB one-time download, runs in a background thread) and WebM falls back to MediaRecorder, which encodes in roughly real time and requires keeping the tab active; the dialog warns you when that path applies. The WASM encoder rejects resolutions above 4K, so prefer Chrome or Edge for very large exports. A progress bar tracks frames during encoding, and Abort cancels mid-export. Press Enter to start the export or Escape to close the dialog.
Animated SVG (SMIL)
Export > Animated SVG opens a smaller dialog and writes a single self-contained .svg file. The animation is encoded as SMIL elements running on the SVG document timeline, so everything stays in sync on one clock.
Dialog options:
- Filename, remembered per animation.
- Theme-aware (light/dark): when checked, the file carries CSS for both color schemes and follows the viewer’s dark-mode preference. Unchecked, your current colors are written directly.
- Embed fonts for offline use: appears only when the document uses non-system fonts, and is checked automatically when a local font is in use (local fonts have no CDN fallback).
- Background: include a background rectangle and pick its color, or leave it transparent.
The exported file always loops indefinitely; there is no loop-count option for SVG. The output also respects the viewer’s reduced-motion preference and suppresses animation when it is set.
Open the file in any modern browser and it plays immediately, with no script required. Outside browsers, support is spottier: many image viewers, thumbnailers, and office applications render only a static first frame, since they do not run SMIL. For documents and slides, use the video export instead.
On a website, an inlined animated SVG can be scripted: play, pause, scrub, and step through states from JavaScript. See Scripting Animated SVGs in the Developer Guide for the control API and recipes.