Svg precision

Skill rvanbaalen/skills/plugins/svg-precision/skills/svg-precision

Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.From its SKILL.md

Install

npx -y skills add rvanbaalen/skills --skill svg-precision

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.3 KB, 530 tokens by cl100k_base, as published. Nobody here has run it

svg-precision

Generate structurally correct SVGs from a strict JSON spec (scene graph), then validate and optionally render a PNG preview.

Fast path

Turn the user request into a Spec JSON (use templates in references/spec.md).
Build the SVG:
- python scripts/svg_cli.py build spec.json out.svg
Validate:
- python scripts/svg_cli.py validate out.svg
(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)

from svg_skill import build_svg, validate_svg
svg_text = build_svg(spec_dict)
report = validate_svg(svg_text)

When the request is vague

Identify the kind of SVG: icon / diagram / chart / UI / technical.
Pick a template from references/spec.md and fill in concrete numbers.
If dimensions are unknown, choose defaults that match the domain:
- icons: 24x24 or 32x32
- UI mockups: 1440x900 or 390x844 (mobile)
- charts: 800x450
- diagrams: 1200x800
- technical drawings: specify units (mm/in) and scale

References

references/spec.md - schema + ready-to-copy templates per SVG type
references/recipes.md - layout and styling patterns that render consistently

What ships with it: 14 files

37.2 KB alongside SKILL.md, 6 of them executable

references/

recipes.md1.7 KB
spec.md5.5 KB