Add SVG Animation to Your Project
Putting a saved JSON or pre-rendered SVG animation on a web page — plain HTML, React, Vue, Next.js, Nuxt, Astro, React Native.
Which Player Do I Need
Section titled “Which Player Do I Need”A saved animation is either a JSON file for the Pixodesk player or a pre-rendered SVG. The player is documented in its own docs; the pages below say which one to open for your stack.
- JSON needs the player library on the page:
@pixodesk/svg-animator-web, or the React / Vue / React Native wrappers. - Pre-rendered SVG needs nothing: inline it, reference it with
<img>(static frame only) or<object>, or import it with SVGR / vite-svg-loader.
Start here: How It Fits Together · Choosing a format · Installation.
Plain HTML / vanilla JavaScript: Web player — install from npm or a CDN, load the JSON, control playback and triggers (Playback and triggers). For a pre-rendered SVG: Pre-rendered SVG.
Astro and other static site generators / CMS platforms (Jekyll, WordPress, Shopify): Static sites and CMS.
React player — the @pixodesk/svg-animator-react component,
its props, control modes and the CSS-flavour wrapper.
Next.js
Section titled “Next.js”Next.js notes (SSR, app router) are in the React chapter: React player › Next.js.
Vue player — the @pixodesk/svg-animator-vue component, props
and events.
Nuxt notes are in the Vue chapter: Vue player › Nuxt.
React Native
Section titled “React Native”React Native player (experimental).