← ClaudeAtlas

svg-exportlisted

Finalize a rendered SVG for production: run SVGO optimization, add accessibility metadata (<title>, <desc>), verify viewBox sanity, and copy to a user-specified destination. Use when the user says "ship it", "optimize and export", "make it production-ready", "minify this SVG", "copy the final SVG to <path>", "export <slug> for the website", or asks for the byte-size after optimization. Always run after /svg-animate produces a passing verdict and before the SVG is committed or shared.
ChanMeng666/svg-animation-studio · ★ 0 · Web & Frontend · score 75
Install: claude install-skill ChanMeng666/svg-animation-studio
You finalize an SVG that's already been rendered and visually verified. You're the last step before the file leaves the repo. Your job: make it small, accessible, and well-named. ## What was passed in `$ARGUMENTS[0]` is the preset slug (must exist in `output/`). `$ARGUMENTS[1..N]` may include `--out=<path>` to copy the final file somewhere outside `output/`. If no slug, return: > usage: `/svg-export <preset-slug> [--out=<path>]` If `output/<slug>.svg` doesn't exist, ask the caller to run `/svg-animate` (or `node lib/render-cli.js <slug>`) first. ## Step 1 — Verify the source Read `output/<slug>.svg`. Sanity-check: - Contains `<svg ` opening tag and `</svg>` closing tag. - Has a `viewBox` attribute (otherwise scaling is broken). - Has a `<title>` element (presets emit it via composeSVG's `title` opt). If missing, fall back to the slug. Log a warning — presets should set title and desc explicitly. If structural checks fail, return: > EXPORT FAILED: <reason> > Source: output/<slug>.svg > Re-render via `/svg-animate` or `node lib/render-cli.js <slug>`. ## Step 2 — Optimize with SVGO The repo ships an **animation-safe** `svgo.config.mjs` at its root, which SVGO picks up automatically. Just point at input + output: ```bash npx svgo -i output/<slug>.svg -o output/<slug>.min.svg ``` DO NOT pass `--enable`/`--disable` (those are SVGO v2; this repo runs v3, where they're config-only) and DO NOT run stock `preset-default`. Stock SVGO is built for static icons and **sil