Start creating

Getting started

Put an svgmo animation on a web page.

1. Export the animation

In the editor: File > Export > svgmo JSON (.json). You are asked for a file name; the file lands in your browser's download folder.

The same button is in the Import / Export panel, next to Copy embed code and Player script.

2. Get the player

Download svgmo-player.js:

  • in the editor, Import / Export panel > Player script, or
  • from a running copy of the app at /svgmo-player.js, or
  • build it yourself: npm run build:player writes apps/web/public/svgmo-player.js.

It is one file, about 30 KB (11 KB gzipped), with no dependencies.

3. Add it to your page

Put both files next to your HTML page, then:

<script src="svgmo-player.js"></script>

<svg-mo src="logo.json" autoplay loop style="width: 300px"></svg-mo>

That is all. The element takes the width you give it and keeps the animation's proportions.

File > Export > Copy Embed Code in the editor copies exactly this snippet, with your file name and size filled in.

Common variations

Play once and stop on the last frame:

<svg-mo src="logo.json" autoplay loop="false"></svg-mo>

Play while the pointer is over it:

<svg-mo src="icon.json" trigger="hover"></svg-mo>

Start when it scrolls into view:

<svg-mo src="hero.json" trigger="visible" loop="false"></svg-mo>

Fill its container:

<div style="width: 100%; max-width: 480px">
  <svg-mo src="hero.json" autoplay style="width: 100%"></svg-mo>
</div>

More options, the script API and recipes are in the player reference.

If nothing shows

Symptom Likely cause
Empty box, error in the console about loading the file Wrong path in src, or the page was opened from disk (file://). Browsers block loading files that way: serve the folder over HTTP.
Empty box, no error The script tag is missing, or comes from a path that does not exist.
It shows but does not move No autoplay and no trigger. Add one, or call .play().
It stops when you scroll away Intended: the player pauses off-screen and resumes when it is visible again.
Server returns the file as a download or refuses it Serve the file as JSON. Any JSON or text content type works; the player reads the text.

Do you need the player at all?

If the animation only has to play (a logo, a loader, an illustration), File > Export > Animated SVG gives a single file that plays by itself with no script. See Choosing an export.