Open the editor

Home/Help/Import and export/Export an animated SVG

IMPORT AND EXPORT

Export an animated SVG

Export makes your animation one self-contained .svg file, with its player inside, ready for a web page. This tour goes through the Animated SVG options and the ways to get the file out.

Do it in the editor: guided tour5 steps · about 3 minutes · opens a practice scene

Step by step

  1. Open Export

    Click Export at the right of the top bar (Ctrl E), then Animated SVG across the top of the window (it opens on the kind you used last). The preview on the right plays the exported file itself.

  2. JavaScript or CSS only

    Under Format, Animation is JavaScript: it plays every animator and easing, and can start on load, hover, click or scroll. It plays when the SVG is in the page or in an object tag, but not as an image (an img tag or a CSS background). CSS only needs no script, so it plays as an image too, but starts only on load or hover. Click the note under it to read more.

  3. Choose its size

    Under Size, Responsive (the default) makes the SVG fill whatever holds it, keeping its proportions. Click Fixed to give it a size in pixels: type W and H, or a Scale.

  4. Get the code for your site

    Click Embed in your site above the preview: ready code for HTML, React, Next.js, Vue, Angular and Svelte, with a note on where to put the file. Copy snippet copies it.

  5. Download it

    Click Download .svg at the bottom right: the file is named after the project. Copy SVG code beside it copies the whole file, to paste into a page. The footer shows the file's size.

Good to know. The export settings are kept with the project. When it starts, how often it repeats, its direction and speed are under Playback. Advanced, closed at first, has the element IDs and Include the editable project, which lets SVGcinema open the SVG again as the whole project.

Keys

Ctrl EExport
Ctrl Shift EExport the selected layers