mcpField
S
svg-precision

svg-precision

github.com/dkyazzentwatwaDesign & UI124188 installsUpdated 29w ago
Repository

About svg-precision

svg-precision is a skill for generating structurally correct SVGs from a JSON scene specification, then validating them and optionally rendering a PNG preview. It is suited to workflows that need explicit, predictable SVG construction and checks.

Key features

  1. 01Build SVGs from JSON scene specs
  2. 02Validate generated SVG files
  3. 03Render PNG previews
  4. 04Compare rendered images
  5. 05Templates and layout recipes

Use cases

  1. 01Create icons, diagrams, charts, or UI mockups
  2. 02Check SVG output for structural issues
  3. 03Preview SVGs as PNG images

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dkyazzentwatwa/chatgpt-skills --skill svg-precision

After installing, type/svg-precisionin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
recipes.md
spec.md
scripts/
requirements.txt
self_test.py
svg_cli.py
scripts/examples/
bar_chart.json
diagram.json
icon_check.json
technical_dim.json
ui_card.json
scripts/svg_skill/
__init__.py
core.py
render.py
validate.py

Details

From the project README

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)
from svg_skill import build_svg, validate_svg
svg_text = build_svg(spec_dict)
report = validate_svg(svg_text)

When the request is vague

  1. Identify the kind of SVG: icon / diagram / chart / UI / technical.
  2. Pick a template from references/spec.md and fill in concrete numbers.
  3. 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

Comments

Markdown supported