What is the image-to-svg skill?
image-to-svg is a skill that turns a raster image into an SVG through computational analysis: a processing mode chosen by image type, k-means color quantization, contour extraction, and an optional two-pass pipeline for line art. It verifies output with a side-by-side render comparison and supports palette remapping for pop-art style variants.
image-to-svg is one skill in oaustegard/claude-skills. It converts a raster image into an SVG vector reproduction using pixel-level data extraction rather than an agent redrawing shapes from a visual impression of the picture.
The skill picks one of four processing modes, tuned for logos, comics, paintings or photos, each with its own k-means cluster count, before running color quantization and contour extraction on the source image.
What changes in the agent's output
- Shapes come from k-means color clustering and contour extraction on actual pixel data, not hand-drawn paths approximating what the image looks like.
- Line art and technical drawings go through a two-pass pipeline that extracts thin strokes first, then fills the remaining regions separately.
- A palette can be remapped to a built-in preset such as black and white, pop or neon, decoupling the output's color from its underlying structure.
- Every result gets checked with a side-by-side render comparison before delivery, rather than handed over unexamined.
Preprocessing and batch output
Optional ImageMagick filters smooth the source image before quantization, cutting shape count and output size by a meaningful margin. A batch mode generates several palette variants that share the same underlying structure from one quantization pass.
Who the image-to-svg skill is for
Best for
- Turning a logo, icon or flat illustration into a clean, scalable SVG.
- Pop-art or palette-remap style variants that keep one shape structure across several color schemes.
- Line art and technical drawings that need strokes preserved separately from fills.
Not for
- If your job is mostly writing a design philosophy for an original visual art piece, the canvas-design skill is the better fit for that.
- When the task is building OKLCH palettes and measuring contrast pairs, the better-colors skill is the better fit for that.
- If your job is mostly converting an existing SVG into Android Vector Drawable XML, the svg2vector MCP is the better fit for that.
Use it with UiChemy
A converted SVG is an asset ready to drop into a page, not a page builder. Once the vector is produced, UiChemy AI to WordPress carries the surrounding front-end build into an editable WordPress page.
How to install Image to SVG Skill for AI Coding Agents
/plugin marketplace add oaustegard/claude-skillsAdd the marketplace
Run
/plugin marketplace add oaustegard/claude-skillsin Claude Code to register the repository as a plugin source.Install the skill
Run
/plugin install image-to-svg@oaustegard-claude-skillsto add just this skill to your agent.Or use it on claude.ai
On a paid claude.ai plan, download the skill's ZIP from the repository and upload it in Settings under Capabilities to use it in the web interface instead of Claude Code.
Check that it loaded
Ask the agent to convert a logo image to SVG and check that it returns a side-by-side render comparison between the source raster and the generated vector before calling the result done.
Key features
- Mode selection by image typeFour modes tuned for logos, comics, paintings or photos each set a different k-means cluster count, matching the quantization strength to how much detail the source actually has.
- K-means color quantizationPixel colors get grouped into a fixed number of clusters, giving the output a flat, vector-friendly palette instead of the near-infinite colors in a raw photo.
- Two-pass line art pipelineThin lines get extracted first as strokes through morphological analysis, then remaining regions get filled separately, which line-only fill methods tend to lose.
- Palette remapping presetsBuilt-in presets such as black and white, pop, neon and several Warhol-style variants swap the output's colors while keeping the same underlying shapes.
- Preprocessing filtersOptional ImageMagick filters such as oilpaint or kuwahara smooth the source before quantization, reducing shape count and output size at the cost of some fine detail.
- Parallel pipeline stagesPreprocessing, quantization, background detection, edge mapping and contour extraction run as a graph of steps, with independent stages executing in parallel.
- Batch variant generationA batch mode produces several palette remaps from one shared quantization pass, keeping every variant's shape structure identical.
- Gap-covering stroke fillA stroke-with-fill technique closes small gaps between adjacent color clusters that a pure fill-based approach would otherwise leave visible.
- Render comparison verificationOutput gets checked against the source with a side-by-side rendering comparison before it is considered finished, rather than delivered unchecked.
Frequently asked questions
What is the image-to-svg skill?
It is a skill in oaustegard/claude-skills that converts a raster image into an SVG vector reproduction using k-means color quantization and contour extraction on actual pixel data, rather than an agent drawing shapes from its own visual impression of the image.
How do I install the image-to-svg skill?
Add oaustegard/claude-skills as a plugin marketplace in Claude Code and install the image-to-svg skill from it, or download the skill's ZIP and upload it on a paid claude.ai plan under Settings and Capabilities.
How does image-to-svg choose a processing mode?
It picks from four modes tuned for logos, comics, paintings or photos, each using a different k-means cluster count. A logo with hard edges needs far fewer clusters than a photo with smooth gradients and subtle color shifts.
Does image-to-svg handle line art differently from photos?
Yes. Line art and technical drawings go through a two-pass pipeline that extracts thin lines as strokes first using morphological analysis, then fills the remaining regions separately, which a single fill-only pass tends to lose.
Can image-to-svg produce multiple color versions of the same image?
Yes, through its batch mode. Several palette remaps, including built-in presets like pop, neon or black and white, generate from one shared quantization pass, so every variant keeps the same underlying shape structure.
Does image-to-svg verify its own output?
It does. The skill's verification protocol calls for a side-by-side render comparison between the source image and the generated SVG before the result counts as finished, rather than handing over an unexamined output.
What dependencies does image-to-svg need to run?
The underlying scripts rely on OpenCV, scikit-image, scipy and scikit-learn for the image processing steps, plus librsvg2-bin for rendering SVG output back to a raster for the verification comparison step at the end of a conversion run.