Can this skill render previews?

Yes, it includes a rendering command that can generate PNG previews from your SVG output to confirm visual accuracy.

Is it suitable for high-precision technical drawings?

Absolutely. It supports absolute coordinates, precise decimal rounding, and unit specifications for engineering-grade technical accuracy.

Why use a JSON spec instead of direct SVG code?

Using a JSON spec ensures deterministic results, prevents common rendering errors, and allows for easier programmatic validation compared to raw SVG markup.

How does it handle browser compatibility?

The skill follows strict design rules, such as avoiding exotic filters and using standard viewBox settings, to ensure consistent rendering across all modern web browsers.

SVG Precision

Name: SVG Precision
Author: rvanbaalen

byrvanbaalen

0•

디자인 도구

Generates, validates, and renders structurally correct SVGs from JSON specifications for deterministic visual output.

SVG Precision provides a robust framework for Claude to create high-quality vector graphics using a strict JSON-based scene graph approach. By moving away from unpredictable raw SVG generation, this skill ensures deterministic results across different viewers and platforms. It includes tools for building SVGs, validating their structure against design rules, and rendering PNG previews to confirm visual accuracy, making it ideal for creating production-ready technical drawings, icons, and UI mockups directly within your development workflow.

주요 기능

010 GitHub stars

02Automated validation for structural correctness and viewer compatibility

03Built-in PNG rendering for instant visual previews

04Domain-specific templates for icons, charts, and technical diagrams

05Visual diffing capabilities to compare SVG versions

06Deterministic SVG generation from JSON scene graphs

사용 사례

01Automating the creation of data-driven charts and visualizations

02Creating production-ready icons and UI components with precise dimensions

03Generating technical diagrams and flowcharts from structured data

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rvanbaalen/skills svg-precision

For use in Claude.ai and ChatGPT