Skip to content

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 the animation has at least two states.

With a LaTeX solution animation active, Export > Animated SVG opens the Export LaTeX Animation dialog, which has its own, shorter set of options.

Both formats use the same timing and effects as the preview window, so what you see in the preview is what you export. See Animation Timing and Animation Effects.

Animated SVG (SMIL)

Export > Animated SVG opens the Export Animated SVG 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.

OptionEffect
FilenameRemembered for each animation and saved with the document.
Theme-aware (light/dark)On by default. The file carries CSS for both color schemes and follows the viewer’s dark-mode preference, including element-colored symbols inside labels. Unchecked, your current colors are written directly.
Embed fonts for offline useAppears only when the document uses non-system fonts, and is checked automatically when a local font is in use (local fonts have no online fallback).
Mobile-safe renderingEmbeds a small, metric-compatible replacement (Liberation Sans, Serif or Mono) for any Arial, Helvetica, Times or Courier text, so labels render the same on phones and tablets that lack those fonts. A warning icon shows next to it while it is unchecked.
Convert labels to pathsOutlines text labels as vector paths, so the file does not depend on a font. Text in the file is then no longer selectable.
Loop continuouslyOff by default: the animation plays once and rests on the final state. On, it repeats, and the last state fades out before each restart.
Total durationA read-only readout of the animation’s length, from the same timeline as the state strip.
BackgroundInclude a background rectangle and pick its color, or leave it transparent.

Click Export SVG to save. Your option choices (not the filename) are remembered for the next export, across reloads and documents.

The exported file respects the viewer’s reduced-motion preference and does not animate when it is set. The on-canvas validation warning triangles are never included.

Open the file in any modern browser and it plays immediately, with no script required. Outside browsers, support is limited: many image viewers, thumbnailers and office applications show 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.

Video export

Export > Video… opens the Export Video dialog. It renders the animation frame by frame from the same SMIL animation used for the SVG export, so the video matches what the animated SVG would show.

LaTeX solution animations export to video too. With one active, Export > Video… builds the same CSS-keyframe animation the Export LaTeX Animation dialog saves, then steps through it frame by frame, so the video shows every line, term move and the boxed answer at the same timing. The dialog and its options are the same. The equation sits centered on a 16:9 frame, the math is drawn in dark ink, and the video always plays once per loop with no fade between loops. This needs a browser with the Web Animations API (current Chrome, Edge, Firefox and Safari all have it); in a browser without it, Molkit shows an error message instead of saving a blank video.

OptionEffect
FilenameThe extension follows your format choice. Settings persist between exports.
FormatMP4 (H.264, plays almost everywhere) or WebM (VP8, faster to encode). The WebM option is disabled if your browser cannot encode it.
ResolutionMatch SVG, 720p, 1080p (default), 1440p or 4K. The output dimensions readout updates as you change presets.
Frame rate24, 30 (default) or 60 fps, with a live frame-count estimate.
LoopsRender 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.
BackgroundA solid color behind the animation (videos have no transparency).
QualityExtreme, High, Medium (default) or Standard. The three higher presets also offer Supersampling (2×), 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.

See also