home / skills / dkyazzentwatwa / chatgpt-skills / svg-precision-skill

svg-precision-skill skill

safe

This skill generates structurally correct SVGs from a strict JSON spec, validates them, and optionally renders PNG previews.

npx playbooks add skill dkyazzentwatwa/chatgpt-skills --skill svg-precision-skill

Review the files below or copy the command above to add this skill to your agents.

Files (15)

SKILL.md

2.3 KB

---
name: svg-precision
description: Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
---

# 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 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

Overview

This skill provides deterministic SVG generation, structural validation, and optional PNG rendering from a strict JSON scene-graph spec. It guarantees cross-viewer compatibility by enforcing explicit canvas settings, sane numeric precision, and reusable defs for consistent output. Use it when you need predictable, auditable vector assets for icons, diagrams, charts, UI mockups, or technical drawings.

How this skill works

You author a Spec JSON that defines a canvas, shapes, reusable defs, and transforms. The library builds an SVG text output from that spec, validates structural rules (viewBox, numeric sanity, referenced ids), and can render a PNG preview via CairoSVG when required. CLI wrappers expose build, validate, render, and diff operations; the same functions are available as a Python API for integration.

When to use it

Creating icons or UI assets that must render identically across viewers
Generating diagrams or charts from deterministic scene-graph data
Producing technical drawings that require explicit units and scales
Automated pipelines where SVGs must pass structural validation before release
Comparing visual diffs between SVG versions (render + image-diff)

Best practices

Always set canvas.viewBox and explicit canvas.width/height for predictable scaling
Use absolute coordinates and round numbers to 3–4 decimals to avoid float variability
Place reusable primitives (markers, gradients, clipPaths) in defs and reference by id
Avoid exotic filters for cross-viewer compatibility; prefer simple fills/strokes
Treat text as non-deterministic across platforms—convert critical text to shapes if pixel-identical output is required

Example use cases

Build a 24x24 icon set from a JSON spec and validate all SVGs before publishing
Render a PNG preview of a complex diagram for documentation using the render CLI
Validate an engineering drawing with explicit mm units and export a scale-correct SVG
Automate visual regression by rendering two SVG versions and producing a diff image
Integrate build_svg and validate_svg into a CI pipeline to block malformed SVGs

FAQ

What does validation check for?

Validation ensures canvas attributes (viewBox, width, height) exist, numeric values are finite and rounded, referenced defs exist, and common structural pitfalls are flagged.

Can I render SVG to PNG automatically?

Yes. Rendering uses CairoSVG and is optional; the CLI accepts a --scale flag to control raster resolution.

How do I handle text for pixel-identical results?

Fonts and text layout vary across viewers. For pixel-identical needs, convert text to shapes in the spec or accept that text will be renderer-dependent.