svg-art — Claude Code skill: generate SVG with Python scripts
A skill that generates SVG graphics through code: icons, patterns, fractals, charts and data visualizations via executable Python scripts.
npx skills add kv0906/cc-skills --skill svg-art -a claude-codeWhat svg-art does
The svg-art skill gives your agent eight Python scripts that produce SVG files programmatically. Each one targets a different shape family: grids, radial and spiral patterns, fractals (tree, Koch curve, Sierpinski triangle), waves, particles, charts and ready-made UI icons. A separate optimize_svg.py minifies existing SVG.
Every script takes flags for the details — column and row counts, element shape, variation in size, opacity and hue, fractal depth, chart data. Pass --seed when you need the same random output twice. Results go to stdout or to a file with -o, and scripts pipe into each other, so you can generate a grid and optimize it in one line.
The scripts are executable Python, so the agent runs them directly — no Python in the environment means the skill has nothing to call. The repo also ships references/svg-fundamentals.md, covering SVG structure, elements, path syntax, gradients and accessibility requirements.
What it helps with
- generate a grid of circles with varied size and opacity
- build a fractal tree at a chosen depth
- turn a list of numbers into a bar or donut chart
- draw a constellation network with distance-based connections
- minify an existing SVG and print optimization stats
Example prompts for the agent
- generate a spiral pattern with 60 points over 4 turns and save it to spiral.svg
- make a bar chart from 30,50,80,45,90 with labels A,B,C,D,E
- optimize input.svg in aggressive mode and show the stats
How to install svg-art
1Skills CLI (Vercel)
npx skills add kv0906/cc-skills --skill svg-art -a claude-code2Manually: put the files in place
~/.claude/skills/svg-art/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/svg-art/
1Skills CLI (Vercel)
npx skills add kv0906/cc-skills --skill svg-art -a codex2Manually: put the files in place
.agents/skills/svg-art/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add kv0906/cc-skills --skill svg-art -a cursor2Manually: put the files in place
.cursor/skills/svg-art/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install kv0906/cc-skills svg-art2Manually: put the files in place
.github/skills/svg-art/SKILL.md1Skills CLI (Vercel)
npx skills add kv0906/cc-skills --skill svg-art -a gemini-cli2Platform CLI
gemini skills install https://github.com/kv0906/cc-skills --path skills/svg-artManually: put the files in place
.devin/skills/svg-art/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add kv0906/cc-skills --skill svg-art -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about svg-art
How do I install svg-art in Claude?
Run npx skills add kv0906/cc-skills --skill svg-art -a claude-code. The skill lands in ~/.claude/skills/svg-art/SKILL.md.
What does svg-art do?
It creates SVG graphics through Python scripts: icons, logos, patterns, fractals, waves, charts and data visualizations. Each script writes valid SVG to stdout or to a file.
How do I optimize an existing SVG?
Use optimize_svg.py — it takes a file as input and can minify in aggressive mode. The --stats flag prints optimization statistics.
