One animation.
Every format it needs.

The Export window makes four kinds of file from the same frames, so a video or a GIF shows exactly what the SVG plays.

Where it’s going	Export	Why
A website or app	Animated SVG	Sharp at any size, tiny, controlled from your code, and it can even follow the page’s scroll
Social, slides, video editors	Video	MP4 plays everywhere; PNG frames for editing
Email, chat apps, docs	GIF or animated WebP	Plays where SVG and video don’t
A poster, thumbnail or fallback	Image	Any frame, in modern formats with a fallback

ANIMATED SVG

One file. Two ways to play it.

What you see on the canvas is what ships: the editor draws your artwork with the same markup and the same player that go into the file.

JavaScript player

A small dependency-free player. Everything animates.

Morphs, motion paths, bones, pins, gradients, masks and every filter parameter
Play, pause, seek, reverse and change speed from your code, with events
Inside each file, or one shared player for pages with many animations
Plays inline, in <object> or <embed>; browsers run no scripts in <img>

Pure CSS

No script at all, so it works anywhere an image does.

A plain <img> tag or a CSS background
Plays on load or on hover; ideal for docs and CMS fields
Gradients animate their stop colors; filters stay still

Starts

On loadOn hoverOn clickWhen scrolled into viewFrom your codeLinked to scroll

Less motion: play, or hold the first or last frame

Starts › Linked to scroll

Scroll is the playhead.

Scrolling down plays it, scrolling back plays it backwards. Choose when it plays: while it crosses the window, while it scrolls in, while it scrolls out, or your own start and end lines.

Smoothing lets it glide after each wheel step instead of jumping
The Export preview is a small test page you scroll to try it
Pasted inline or in an <object>; follows a box that scrolls on its own

65.6 KBthe sample scene, player included

17.0 KBthe same file, gzipped

0runtime dependencies

Photos inside the SVG, shipped light.

Turn on Resize and compress for this size in the export’s Images section, or leave it off to embed the originals.

Sized to fit. Each image is scaled down to the largest size it reaches anywhere in the animation, scale keyframes included.
Sharp on 2× screens. Optionally keeps twice that resolution.
Smallest format wins. Automatic mode tries AVIF and WebP where your browser can encode them, plus JPEG or PNG, and keeps the smallest.
Safe by default. Transparent images never become JPEG, animated GIFs stay as they are, and an image that wouldn’t get smaller keeps its original file.

Test photo after export compression — Try it: the panel runs your browser’s own image encoders on a generated test photo, the same encoders the editor uses, so the sizes are real.

THE EXTERNAL PLAYER

Many animations, one player.

Export with Player: External and each SVG carries only its artwork and animation, plus a loader under 1 KB. Every animation on the page shares one player, from the page, jsDelivr or your own server.

The version is fixed in each file, so later releases never change what you shipped
Or host it yourself: one file, added with one script line before your SVGs

Download the player · 1.2.0 All downloads

$ npm i svgcinema-player

<!-- or straight from the CDN -->
<script src="…/npm/[email protected]/cin-player.min.js"></script>

// about 26 KB minified, then shared by every SVG

BEYOND SVG