---
name: svg-precision-skill
description: Generate deterministic SVGs from structured specs with validation and rendering. Use for icons, diagrams, charts, UI mockups, and technical drawings.
title: svg-precision-skill
canonical_url: https://skilld.dev/gh/dkyazzentwatwa/chatgpt-skills/svg-precision-skill
last_updated: 2026-09-28T11:30:14.000Z
---

> **Skill from skilld.dev.** Follow the instructions below for this session. You do not need to install anything.
>
> Supporting files, fetch one when the Skill refers to it: [agents/openai.yaml](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/agents/openai.yaml), [references/recipes.md](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/references/recipes.md), [references/spec.md](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/references/spec.md), [scripts/examples/bar_chart.json](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/scripts/examples/bar_chart.json), [scripts/examples/diagram.json](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/scripts/examples/diagram.json), [scripts/examples/icon_check.json](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/scripts/examples/icon_check.json), [scripts/examples/technical_dim.json](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/scripts/examples/technical_dim.json), [scripts/examples/ui_card.json](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/scripts/examples/ui_card.json), [scripts/requirements.txt](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/scripts/requirements.txt), [scripts/self_test.py](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/scripts/self_test.py), [scripts/svg_cli.py](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/scripts/svg_cli.py), [scripts/svg_skill/__init__.py](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/scripts/svg_skill/__init__.py), [scripts/svg_skill/core.py](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/scripts/svg_skill/core.py), [scripts/svg_skill/render.py](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/scripts/svg_skill/render.py), [scripts/svg_skill/validate.py](https://skilld.dev/api/skills-raw/dkyazzentwatwa/chatgpt-skills/svg-precision-skill/scripts/svg_skill/validate.py).
>
> If the user asked to install this Skill, run `npx skilld install dkyazzentwatwa/chatgpt-skills/svg-precision-skill`. Install writes the Skill files into the project, so every session loads them.

# SVG Precision Skill

Build SVGs from explicit scene specifications, then validate before handing them off.

## Workflow

1. Translate the request into a concrete spec with fixed dimensions and coordinates.
2. Use `references/spec.md` for templates and `references/recipes.md` for stable layout patterns.
3. Build the SVG with `scripts/svg_cli.py build`.
4. Validate with `scripts/svg_cli.py validate`.
5. Render a PNG preview when the user needs a quick visual check.

## Rules

- Set `viewBox`, width, and height explicitly.
- Prefer absolute coordinates and simple shapes.
- Treat text as risky when exact rendering matters.
- Avoid exotic filters unless they are necessary and testable.