svg-precisionlisted
Install: claude install-skill rvanbaalen/skills
# svg-precision
Generate *structurally correct* SVGs from a strict JSON spec (scene graph), then validate and optionally render a PNG preview.
## Fast path
1) Turn the user request into a **Spec JSON** (use templates in `references/spec.md`).
2) Build the SVG:
- `python scripts/svg_cli.py build spec.json out.svg`
3) Validate:
- `python scripts/svg_cli.py validate out.svg`
4) (Optional) Render a PNG preview (requires CairoSVG):
- `python scripts/svg_cli.py render out.svg out.png --scale 2`
## Spec design rules (for accuracy)
- Always set `canvas.viewBox` and explicit `canvas.width`/`canvas.height`.
- Prefer absolute coordinates; use transforms only when they reduce complexity.
- Keep numbers sane: no NaN/inf; round to 3-4 decimals.
- Put reusable items in `defs` (markers, gradients, clipPaths) and reference by id.
- For predictable results across viewers, avoid exotic filters unless required.
- Text varies by fonts/viewers. If you need pixel-identical results, treat text as a risk and prefer shapes.
## Using the bundled scripts
### CLI
- `python scripts/svg_cli.py build <spec.json> <out.svg>`
- `python scripts/svg_cli.py validate <svg>`
- `python scripts/svg_cli.py render <svg> <out.png> [--scale N]`
- `python scripts/svg_cli.py diff <a.svg> <b.svg> <diff.png> [--scale N]` (renders + image-diffs)
### As a library (in Python)
```py
from svg_skill import build_svg, validate_svg
svg_text = build_svg(spec_dict)
report = validate_svg(svg_text)
```
## When the re