Pre-rendered SVG documentation

A pre-rendered SVG is a finished .svg file with the animation embedded — it plays on its own, with no player library. Three flavours: SVG + CSS animation (no JavaScript), + JS triggers (a small embedded script for click/scroll triggers), and SVG + JS animation (the web player embedded, every animation type).

Contents

1. Pre-rendered SVG on the web — inline, import as a component; the three flavours and how to control them
2. Static sites & CMS — Astro, Jekyll, Hugo, 11ty, Gatsby, Docusaurus, WordPress, Shopify, Webflow
3. Meta in pre-rendered SVG — the data-px-meta attribute: notation, what goes where, whether you can strip it

See also

• Which format do I need?
• Format documentation — the JSON source these files are exported from
• Documentation home