Claude svg skill: 10 SVGs you can ship from one prompt

svg-icon-generator

Generates a whole named-icon batch when you need more than one.

iconify-svg

Pulls an existing icon from 200k+ when one already exists.

Multi-icon set with one shared stroke and grid

Generate six icons that share a viewBox, stroke width, and corner radius so they read as a family — not six icons drawn by six different people.

ForDesign-system maintainers extending an existing icon set.

The prompt

Use the svg-precision skill. Build six 24×24 line icons for a settings menu: gear, bell, user, lock, search, logout. Every icon: viewBox="0 0 24 24", stroke-width 2, round caps/joins, 2-unit visual padding, optical center on the 12,12 axis. Keep the same corner radius on every rounded shape. Emit each as a standalone file named icon-{name}.svg and validate the whole set. Flag any icon whose bounding box drifts more than 1 unit off the others.

What slides.md looks like

<!-- icon-bell.svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
     viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 9a6 6 0 0 1 12 0c0 5 2 7 2 7H4s2-2 2-7" />
  <path d="M10 21a2 2 0 0 0 4 0" />
</svg>

One-line tweak

Change `stroke-width` to 1.5 in the prompt and the whole set re-renders thinner — consistency holds because the grid is shared.

Pairs with

better-icons

Curates and de-dupes icon names across a growing set.

heroicons

Cross-check shapes against the Heroicons baseline before shipping.

Data-driven bar chart as inline SVG

Render a labeled bar chart straight from numbers — no D3, no canvas, no chart library. The bars, axis, and labels are real SVG elements you can drop into an email or a static page.

ForBackend devs who need a chart in an email or a report with zero JS.

The prompt

Use the svg-precision skill. Build a 400×240 bar chart from this series: Jan 42, Feb 58, Mar 75, Apr 61, May 88. viewBox="0 0 400 240". Reserve 30px left for the y-axis and 24px bottom for x-labels. Compute bar x-positions and heights from the data (max=88 maps to the top of the plot area). Five bars, 12px gap, fill #14b8a6. Add a baseline rule and a value label centered above each bar. Validate, then render a PNG so I can confirm the bars don't overflow the viewBox.

What slides.md looks like

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="240"
     viewBox="0 0 400 240" font-family="sans-serif" font-size="11">
  <line x1="30" y1="206" x2="392" y2="206" stroke="#94a3b8" />
  <rect x="40"  y="118" width="58" height="88"  fill="#14b8a6" />
  <rect x="110" y="86"  width="58" height="120" fill="#14b8a6" />
  <rect x="180" y="51"  width="58" height="155" fill="#14b8a6" />
  <text x="69"  y="112" text-anchor="middle">42</text>
  <text x="139" y="80"  text-anchor="middle">58</text>
</svg>

One-line tweak

Ask for `<rect rx="3">` and a second series offset by the bar width to turn the single chart into a grouped comparison.

Pairs with

mermaid

Reach for Mermaid when you want a quick chart in a doc, not inline.

d2-diagram-creator

Use D2 when the chart is really a labeled graph of relationships.

Architecture diagram with precise orthogonal connectors

Draw a three-box service diagram where the connectors are right-angled and actually touch the box edges — the thing LLMs usually get visibly wrong by 4px.

ForEngineers documenting a system in a README without a diagram tool.

The prompt

Use the svg-precision skill. Build a 560×200 architecture diagram: three rounded boxes left-to-right — 'Client' (x=20), 'API' (x=230), 'Postgres' (x=440), each 100×60 vertically centered at y=70. Connect Client→API and API→Postgres with orthogonal (right-angle) connectors that meet the box edges exactly, with an arrowhead marker at the target. Label each connector ('HTTPS', 'SQL') centered on the horizontal run. viewBox="0 0 560 200". Validate that no connector endpoint floats off a box edge.

What slides.md looks like

<svg xmlns="http://www.w3.org/2000/svg" width="560" height="200"
     viewBox="0 0 560 200" font-family="sans-serif" font-size="12">
  <defs>
    <marker id="arrow" markerWidth="8" markerHeight="8" refX="7" refY="4"
            orient="auto"><path d="M0 0l8 4-8 4z" fill="#475569"/></marker>
  </defs>
  <rect x="20"  y="40" width="100" height="60" rx="8" fill="#0f172a" stroke="#334155"/>
  <rect x="230" y="40" width="100" height="60" rx="8" fill="#0f172a" stroke="#334155"/>
  <line x1="120" y1="70" x2="230" y2="70" stroke="#475569" marker-end="url(#arrow)"/>
  <text x="175" y="62" text-anchor="middle" fill="#94a3b8">HTTPS</text>
</svg>

One-line tweak

Ask for the connector to route as `M120 70 H175 V40 H230` and it bends up-and-over instead of straight across — useful when boxes aren't on the same row.

Pairs with

drawio-diagrams-enhanced

Use drawio when the diagram needs to stay editable in draw.io.

flowchart-generator

Hand off to flowchart-generator for decision-tree-shaped diagrams.

Animated SVG loader (SMIL, no JavaScript)

A spinner that animates with native SMIL inside the SVG — it loops in an <img> tag, an email-safe-ish context, or anywhere a CSS keyframe wouldn't reach.

ForAnyone who wants a self-contained loader with zero script and zero CSS file.

The prompt

Use the svg-precision skill. Build a 48×48 ring spinner. viewBox="0 0 48 48". A circle of radius 18 centered at 24,24, stroke #14b8a6, stroke-width 4, with stroke-dasharray set so roughly a quarter of the ring is visible. Rotate the visible arc 360° using a native SMIL <animateTransform> on 1s linear infinite. No CSS, no JS — the animation must live inside the SVG so it loops when embedded via <img>. Validate that the animate element references the right attributeName.

What slides.md looks like

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <circle cx="24" cy="24" r="18" fill="none" stroke="#1e293b" stroke-width="4"/>
  <circle cx="24" cy="24" r="18" fill="none" stroke="#14b8a6" stroke-width="4"
          stroke-linecap="round" stroke-dasharray="28 85">
    <animateTransform attributeName="transform" type="rotate"
                      from="0 24 24" to="360 24 24"
                      dur="1s" repeatCount="indefinite"/>
  </circle>
</svg>

One-line tweak

Swap `<animateTransform>` for a CSS `@keyframes spin` block if the loader lives in a stylesheet-controlled app — the skill knows both paths.

Pairs with

rendering-animate-svg

Dedicated skill when animation, not structure, is the hard part.

svgmaker

Generate a richer illustrated loader from a text prompt.

Logo path cleanup and optimization

Take a messy exported logo — absolute coordinates with 9 decimal places, redundant points — and emit a clean, rounded-precision path that renders identically at a fraction of the bytes.

ForDevelopers shipping a vendor logo that bloats the bundle.

The prompt

Use the svg-precision skill. Here's a logo SVG with full-precision path data (@attach logo-raw.svg). Re-emit it with: coordinates rounded to 2 decimals, redundant collinear points removed, the viewBox tightened to the actual bounding box, and any unused <defs> or empty groups stripped. Keep the rendered shape pixel-identical — validate the cleaned version's bounding box matches the original within 0.5 units before you hand it back. Report the byte delta.

What slides.md looks like

<!-- before: 2.41 KB, 9-decimal coords, redundant points -->
<path d="M12.000000001 4.5000002 L 35.99999 4.5 L 36 28.0001 ..."/>

<!-- after: 0.74 KB, 2-decimal coords, collinear points dropped -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 28">
  <path d="M12 4.5H36V28H12z" fill="#0f172a"/>
</svg>

One-line tweak

Add 'and convert strokes to filled paths' so the logo survives a `currentColor` recolor without stroke-scaling surprises.

Pairs with

svg-converter

Rasterize the cleaned logo to PNG/JPG for favicons and OG images.

trace-to-svg

Reach for trace-to-svg when you only have a PNG, not vectors.

Cross-viewer validation (fix the Safari / Figma drift)

An SVG that looks right in Chrome but breaks in Safari or imports wrong into Figma — usually an implicit unit, a missing namespace, or a filter nobody tested. The skill finds it before you ship.

ForAnyone burned by an SVG that renders in one tool and not another.

The prompt

Use the svg-precision skill. Validate @attach hero-graphic.svg for cross-viewer fidelity. Check specifically: the xmlns is present, width/height are unitless or explicit (no bare numbers Safari reads as px-but-not), every gradient/filter has an id that's actually referenced, text isn't relied on for layout, and there are no relative coordinates that shift when the viewBox changes. List each issue with the exact line, and emit a corrected version that renders the same in Chrome, Safari, and Figma. Then render a PNG to confirm.

What slides.md looks like

validate hero-graphic.svg
  ✗ line 1: missing xmlns — Figma import will drop the shapes
  ✗ line 4: <filter id="blur"> defined but never referenced
  ✗ line 9: width="300" height="auto" — "auto" is invalid on width
  ✓ viewBox present, coordinates absolute
  → emitting hero-graphic.fixed.svg (3 fixes applied)

One-line tweak

Add 'and inline any <image href> as base64' so the SVG is fully self-contained and survives being moved between repos.

Pairs with

figma

Round-trip the fixed SVG straight back into a Figma file.

mermaid-validator

The validation-first mindset, applied to Mermaid diagrams.

Sprite sheet with <symbol> and <use>

Bundle a set of icons into one sprite file using <symbol> definitions, so a page references them with <use href="#icon-x"> instead of shipping a dozen separate requests.

ForFrontend devs cutting icon HTTP requests on a content-heavy page.

The prompt

Use the svg-precision skill. Take these four 24×24 icons (gear, bell, user, search) and assemble a single sprite SVG. Each icon becomes a <symbol id="icon-{name}" viewBox="0 0 24 24"> wrapping its paths. The root SVG is hidden (width=0 height=0, position absolute). Output a one-line usage example: <svg><use href="#icon-bell"/></svg>. Validate that every symbol id is unique and every referenced path closes. Confirm the sprite renders each symbol identically to its standalone version.

What slides.md looks like

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-search" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round">
    <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>
  </symbol>
  <symbol id="icon-user" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round">
    <circle cx="12" cy="8" r="4"/><path d="M5 21a7 7 0 0 1 14 0"/>
  </symbol>
</svg>
<!-- use: <svg class="w-6 h-6"><use href="#icon-user"/></svg> -->

One-line tweak

Ask for each `<symbol>` to keep its own `stroke-width` so a heavier icon (e.g. a logo mark) can sit in the same sheet without inheriting the 2px stroke.

Pairs with

svg-icon-generator

Generate the source icons the sprite sheet bundles.

icons8

Source additional icons when the set needs to grow.

Responsive viewBox + preserveAspectRatio fix

An SVG that should scale to its container but instead stretches, crops, or pins to a corner. The fix is almost always the viewBox/preserveAspectRatio pair — and getting it exactly right is fiddly.

ForDevs whose hero illustration distorts on mobile.

The prompt

Use the svg-precision skill. @attach banner.svg stretches when its container changes aspect ratio. Make it responsive: set a correct viewBox matching the artwork's real bounds, drop the hard-coded width/height so it fills the parent, and set preserveAspectRatio so the art stays centered and uncropped (xMidYMid meet). Explain in one line what each value does. Then show me two render previews — one wide container, one square — to prove it doesn't distort in either.

What slides.md looks like

<!-- before: pins to top-left, stretches on resize -->
<svg width="800" height="200" preserveAspectRatio="none"> ... </svg>

<!-- after: scales to parent, stays centered, no distortion -->
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 800 200"
     preserveAspectRatio="xMidYMid meet"
     style="width:100%;height:auto"> ... </svg>
<!-- xMidYMid = center; meet = scale to fit, never crop -->

One-line tweak

Change `meet` to `slice` and the artwork fills the container edge-to-edge (cropping the overflow) — the right call for a full-bleed background.

Pairs with

rendering-animate-svg

Pair when the responsive graphic also needs to animate.

svg-converter

Export fixed sizes once the responsive source is correct.

Sketch description → structurally correct technical drawing

A described mechanical or schematic drawing — dimensions, labeled parts, leader lines — rendered as a clean SVG where the measurements are actually to scale, not eyeballed.

ForEngineers and makers who think in dimensions, not pixels.

The prompt

Use the svg-precision skill. Draw a labeled top-view of a 120mm × 80mm PCB at 2px/mm scale (so 240×160 in the viewBox). Place four 3.2mm mounting holes inset 5mm from each corner. Add a 16×16mm chip centered, two 2.54mm-pitch header rows along the top edge, and dimension lines with leader text for the board width and a hole-to-hole spacing. viewBox="0 0 240 160". Keep every dimension to scale and validate that holes don't overlap the board edge.

What slides.md looks like

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="160"
     viewBox="0 0 240 160" font-family="monospace" font-size="8">
  <rect x="10" y="10" width="220" height="140" fill="#0b3d2e" stroke="#0f766e"/>
  <circle cx="20"  cy="20"  r="3.2" fill="#0b1120"/>
  <circle cx="220" cy="20"  r="3.2" fill="#0b1120"/>
  <rect x="104" y="64" width="32" height="32" fill="#1e293b"/>
  <line x1="10" y1="156" x2="230" y2="156" stroke="#64748b"/>
  <text x="120" y="154" text-anchor="middle" fill="#94a3b8">120 mm</text>
</svg>

One-line tweak

Bump the scale to 4px/mm for a print-ready drawing — the skill recomputes every coordinate so the ratios stay exact.

Pairs with

d2-diagram-creator

Use D2 when the drawing is really a connected-node schematic.

drawio-diagrams-enhanced

Hand off when the drawing needs to live in a draw.io canvas.

Community signal

Four voices on what models can and can’t do with SVG. Willison sets the benchmark; a Reddit developer documents the raster-to-SVG switch that motivates a skill like this; and two Hacker News practitioners describe where AI SVG falls short and the hybrid workflow they use to finish it.

“I decided to roll out my own LLM benchmark: how well can different models render an SVG of a pelican riding a bicycle?”

Simon Willison · Blog

Willison's 'pelican on a bicycle' test is now the most-cited informal benchmark for how well a model emits structured SVG. It works because the model has to construct coordinates from scratch — which is where closed paths, a sane viewBox, and non-overlapping shapes actually get tested.

“Spent over an hour prompting and never got anything close to what I was looking for. The outputs were cool images but not logos (if that makes sense). Too much detail/fell apart at small sizes... Ended up going an interesting direction: wrote a Claude Code skill that teaches Claude actual logo design principles and had it design directly in SVG.”

No_Paramedic_4881 (r/ClaudeAI) · Reddit

A developer who tried a raster image generator for a logo, watched it fall apart at small sizes, then switched to a skill that makes Claude author SVG directly with constraints. The exact before/after the svg-precision angle relies on.

“Think of diagrams in nice technical talks or papers. I've even tried having the LLM (Claude) generate SVGs. They all fall short.”

d4rkp4ttern (Hacker News) · Hacker News

From a discussion of AI image generation. A concise statement of the gap for technical-diagram-quality work — and why structure, not just pixels, is the missing piece.

“Prompting Claude to make SVGs then dropping them into Inkscape and getting the last ~20% of it to match the picture in my head has been a phenomenal user experience for me.”

pizza (Hacker News) · Hacker News

The prevailing hybrid workflow: generate with Claude, finish in a real editor. A validation-and-determinism skill is aimed at shrinking that last 20%.

The contrarian take

The sharpest pushback comes from an Ask HN thread literally titled “Best approach for generating SVG graphics with LLMs?” One commenter argues the problem isn’t the SVG — it’s deeper than any validator can reach:

“The problem is likely not the SVG aspect. It's the fact that LLMs don't have any real cross-training between visual concepts and the syntax that produces them. We have this problem with CSS, too, which LLMs are notoriously bad at. It's actually easier to do bitmaps which is why the visual models create those.”

dtagames (Hacker News) · Hacker News

From the Ask HN thread 'Best approach for generating SVG graphics with LLMs?' — the argument that the gap is conceptual, not syntactic.