Stats
Actions
Tags
Convert PNG images to smooth, scalable SVG vector files using potrace tracing. Supports multi-color PNGs (logos, icons, illustrations) by extracting dominant colors and tracing each color layer separately, then compositing into a clean SVG. Also handles single-color images and lets users override the fill color. Use this skill whenever the user wants to: convert a PNG to SVG, trace a bitmap, vectorize an image or logo, turn a raster image into vectors, create an SVG from a PNG/JPEG/bitmap, or anything involving bitmap-to-vector conversion. Also trigger when the user mentions "potrace", "image tracing", or asks to make an image scalable.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ss-image-manipulation:ss-png-to-svgThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Convert raster PNG images into smooth, clean SVG vector files. The skill uses ImageMagick for image preprocessing and potrace for bezier curve tracing, producing SVGs with smooth paths that scale to any size.
Convert raster PNG images into smooth, clean SVG vector files. The skill uses ImageMagick for image preprocessing and potrace for bezier curve tracing, producing SVGs with smooth paths that scale to any size.
Two command-line tools are needed. If either is missing, install them:
brew install imagemagick potrace
There's a bundled script at scripts/png2svg.sh that handles the full pipeline. Run it directly:
bash <skill-path>/scripts/png2svg.sh <input.png> [output.svg] [OPTIONS]
| Flag | Description | Default |
|---|---|---|
--single-color | Force single-color trace instead of multi-color | off (multi-color) |
--color "#hex" | Override the fill color | auto-detected |
--threshold N | Grayscale threshold 0-100 (higher = more detail) | 50 |
--smoothness N | Curve smoothness 0-1.334 (higher = smoother) | 1.334 |
Simple single-color logo:
bash <skill-path>/scripts/png2svg.sh logo.png logo.svg --single-color
Multi-color illustration (default):
bash <skill-path>/scripts/png2svg.sh artwork.png artwork.svg
Override color:
bash <skill-path>/scripts/png2svg.sh icon.png icon.svg --color "#FF5733"
Adjust for detailed images:
bash <skill-path>/scripts/png2svg.sh detailed.png --threshold 60 --smoothness 1.0
Color extraction — Samples the PNG's dominant colors (up to 8) using ImageMagick's histogram, skipping near-white and near-black (background colors).
Per-color tracing — For each detected color, isolates matching pixels using fuzz matching, converts to a binary bitmap, then traces with potrace using smooth bezier curves.
SVG composition — Combines all traced color layers into a single SVG, with each layer using its original fill color.
Cleanup — Removes the background rectangle that potrace adds (the full-canvas M0 path), and deletes all temporary files.
The two most impactful parameters to tweak are:
--threshold): If the SVG is missing detail, increase this (try 60-70). If it's too noisy, decrease it (try 30-40).--smoothness): The default 1.334 gives very smooth curves. Lower values (0.5-1.0) preserve more sharp corners, which is better for pixel art or geometric designs.For images with transparency (like PNGs with alpha channels), the script handles this automatically — transparent areas become empty space in the SVG.
magick input.jpg input.pngGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub rajnandan1/such-skills --plugin ss-image-manipulation