create-svg-image

Create hand-authored SVG diagrams and visualizations following a bundled style guide.

11|1|Updated Jul 25, 2025

Search Tags:#documentation #graphics #validation #visualization #svg #diagram

Ready to run

npx skills add https://github.com/tomzx/agents --skill create-svg-image-tomzx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-svg-image
Source: https://github.com/tomzx/agents/tree/main/skills/create-svg-image
Command: npx skills add https://github.com/tomzx/agents --skill create-svg-image-tomzx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Hand-authored SVG diagrams often render inconsistently across browsers and non-browser renderers, with clipped text, misaligned boxes, and broken arrowheads. This Skill provides a repeatable workflow for producing SVG figures that follow a consistent style guide and pass validation before delivery. ## Core Features & Use Cases - Style Guide Enforcement: Applies a bundled reference guide covering color tokens, typography, stroke ladders, connector rules, and accessibility requirements. - Geometry Planning: Computes layout math before writing XML, including viewBox sizing, label width estimation, and baseline positioning. - Validation Loop: Runs parse checks with xmllint or svglint and render checks with rsvg-convert to catch clipping, overflow, and overlap issues. - Use Case: A developer needs an architecture diagram for a README. The Skill gathers context, computes the geometry, writes the SVG with one accent color, validates the output, and saves it to `docs/assets/` with a relative-path reference in the document. ## Quick Start Ask the agent to create an SVG diagram of your system architecture and save it to the docs folder.

Frequently Asked Questions about create-svg-image

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

FAQPage Schema

How do I create an SVG diagram for a README?▼

Gather context about the subject and target medium, then compute the layout geometry before writing XML. Use a 4px grid, estimate label widths as 0.6 × font-size × character count, and validate with xmllint and rsvg-convert. Save the file to an assets directory and reference it by relative path from the document.

When should I use SVG instead of Mermaid for diagrams?▼

Use SVG when you need pixel-level control over layout, branding, or non-diagram figures that Mermaid cannot express. Mermaid works for standard flowcharts and sequence diagrams, but hand-authored SVG handles custom visualizations and precise positioning.

Why does my SVG render differently in Slack or chat previews?▼

Chat previews often strip `<style>` blocks and filters. Move critical styling to presentation attributes, avoid `foreignObject`, and test with rsvg-convert to catch renderer compatibility issues before delivery.

How do I fix clipped text or misaligned boxes in SVG?▼

Compute the viewBox to include content bounds plus 24px margins, snap coordinates to a 4px grid, and estimate label widths as 0.6 × font-size × character count. Validate with xmllint and a render check to catch clipping and overflow before delivery.

What tools validate SVG files before delivery?▼

Use xmllint or npx svglint for parse checks and rsvg-convert for render checks. If rsvg-convert is unavailable, open the file in a browser to inspect the output. The Skill includes graceful fallbacks when these tools are missing.