Context
Animated SVG GO is a side project built with Claude. Think of SVGOMG, but for motion. I wanted a quick way to take an SVG I already had and make parts of it move, without writing keyframes by hand or reaching for a heavyweight animation tool.
Challenge
An SVG from the wild is untrusted code. It can carry scripts, event handlers and foreign content, so the editor had to treat every upload as hostile and still show it faithfully. On top of that, the animation you see in the editor had to be exactly what you get out, whether that is CSS keyframes in an <img>, a few lines of the Web Animations API, or frames rendered into a GIF or MP4.
Approach
The app is static files: Astro and Svelte, hosted on Vercel, with everything running in the browser. An uploaded SVG is capped for size and depth, tidied by SVGO in a worker, sanitised by DOMPurify with a strict SVG profile, and rendered in a sandboxed iframe that cannot run scripts. The test suite fires a set of known SVG XSS payloads at that pipeline in Chromium, Firefox and WebKit on every pull request.
Effects, timings and selections live in one validated spec, which is the only state. Undo and redo work on it, and it compiles to a single intermediate form of keyframe tracks. The live preview, the CSS and JS exports and the raster sampler for GIF and MP4 all read that one IR, and a parity test renders the preview, the exported SVG and the sampled frames and checks the pixels match. If an effect cannot be written as CSS keyframes, it is not an effect.
Outcome
The editor is live at svgomg.fyi. It is free, needs no account, and works in Chrome, Firefox and Safari on desktop. The code is MIT licensed and on GitHub.