skills.rest
IkeaNorweegway
IkeaNorweegwayCOMMUNITY
Explore all skills by this author →
GitHub

svg-precision

Generate, validate, and render SVG graphics from a structured JSON scene graph specification.

Updated Apr 16, 2026
Search Tags:#validation#icons#svg#diagrams#vector graphics#png rendering#json spec
One-click install
npx skills add https://github.com/IkeaNorweegway/Classroom-Tools --skill svg-precision-ikeanorweegway
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-precision
Source: https://github.com/IkeaNorweegway/Classroom-Tools/tree/main/.claude/skills/svg-precision
Command: npx skills add https://github.com/IkeaNorweegway/Classroom-Tools --skill svg-precision-ikeanorweegway

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires cairosvg, and includes scripts (resource) and references (resource) components.

What problem does it solve? Hand-written SVG markup often produces structural errors, inconsistent rendering across viewers, and unpredictable text layout. This Skill converts a strict JSON scene graph into structurally correct SVG, then validates and renders it so output is deterministic and cross-viewer compatible. ## Core Features & Use Cases - Spec-driven generation: Build SVGs from a JSON scene graph with explicit viewBox, dimensions, defs, gradients, and clipPaths. - Validation and rendering: Validate SVG structure via CLI and render PNG previews or image diffs using CairoSVG. - Use Case: A developer needs a set of 24x24 icons and an 800x450 chart for a web app. They fill in templates from the references, run the build and validate commands, and render PNG previews to confirm pixel-level output before shipping. ## Quick Start Ask the assistant to generate an SVG icon or diagram from a JSON spec, then validate it and render a PNG preview using the bundled svg_cli script.

Frequently Asked Questions about svg-precision

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an SVG from a JSON specification?▼

Define a scene graph in JSON with canvas viewBox, width, height, and shape elements, then run python scripts/svg_cli.py build spec.json out.svg. Templates for icons, charts, diagrams, and UI mockups are provided in references/spec.md.

How to validate an SVG file for structural correctness?▼

Run python scripts/svg_cli.py validate out.svg to check the generated SVG for structural issues. You can also call validate_svg from the svg_skill Python library to get a validation report programmatically.

Can I render an SVG to PNG for preview?▼

Yes, run python scripts/svg_cli.py render out.svg out.png with an optional --scale flag. Rendering requires CairoSVG to be installed; without it, only build and validate commands work.

Why does SVG text render differently across viewers?▼

Text rendering depends on available fonts and each viewer's layout engine, so pixel-identical results are not guaranteed. For deterministic output, prefer geometric shapes over text elements when precision matters.

What are the limitations of spec-based SVG generation?▼

The approach favors absolute coordinates and avoids exotic filters, so complex artistic effects may not be expressible. Numbers must be finite and rounded to 3-4 decimals, and vague requests require choosing sensible default dimensions per domain.

Related Skills

Explore More Design & Creative Skills→
Exia-thdExia-thd

ui-designer

Generate WCAG AA-compliant wireframes, design tokens, and component inventories for digital products.

Community
Advanced
KILWA73KILWA73

asset-optimizer

Convert images to WebP/AVIF and minify CSS/JS for web assets.

Community
Intermediate
bipinksbipinks
3

accessibility-patterns

Apply WCAG 2.1 AA/AAA patterns to improve UI accessibility.

Community
Advanced
aref-vcaref-vc
288

tufte-claude-skill

Generate Tufte-compliant charts from text requests using matplotlib and D3.js.

Community
Advanced