Rasterless

View saved version →

---
name: rasterless
description: Convert icons, logos, and other flat art (PNG, JPG, WebP) into clean, small SVG files by tracing them with Potrace. Use this whenever the user wants to vectorize, trace, or convert an icon, glyph, logo mark, emoji, favicon, app icon, UI symbol, or flat illustration into SVG, including requests like "make this png an svg", "I need this icon as a vector", "convert my icons folder to svg", "turn this flaticon download into svg", or "get me an svg version of this logo", even if they never say "trace" or "vectorize". Handles single-color glyphs, flat multi-color icons, and shaded grayscale 3D-style illustrations, single files or whole folders. Not for photos or full-color painted illustrations.
license: MIT (scripts/vendor/potrace is GPL-2.0-or-later)
---

# Rasterless

Converts flat icons into SVGs that look like a designer drew them: one path per color, sub-pixel accurate edges, a `viewBox`, and no bloat. The script does the tracing. Your job is to run it, look at the result, fix the rare miss with a flag, and deliver.

Two scripts:
- `rasterless.py` for flat icons (the default, covered first below).
- `rasterless_shaded.py` for shaded grayscale art: 3D-style illustrations, glossy spheres, soft shadows. See **Shaded art** below.

## How it works (so you can reason about failures)

1. **Background detection.** Transparent PNGs have no background. In opaque images (JPG), the corner color is the background (falling back to the border color when the corners disagree), and only the background area connected to the image edge is dropped. Enclosed areas of that color (white teeth in a smiley on a white JPG) stay as real shapes. The exception is one-color glyphs: there, enclosed areas stay holes, like the inside of a magnifier lens.
2. **Palette.** Colors are estimated from interior pixels, so anti-aliased edge blends never become fake colors. Near-identical colors (JPEG noise) are merged. Thin details that never form an interior (1px lines on small icons) are added when their pixels cannot be explained as a blend of two known colors. Flat areas drawn at partial opacity (duotone fills) become their own layer with `fill-opacity`. Up to 24 colors are kept by default. When an icon has more, the smallest colors are merged into their nearest kept color.
3. **Upscale and snap.** The image is upscaled (at most 4×, toward 1024px) and every pixel snaps to a palette color. Edge pixels go to the nearer end of the blend they belong to, so no sliver of a third color appears between two colors. Boundaries land between pixels, which recovers sub-pixel edges. JPEGs get a slight blur first so edges follow the shape, not the compression noise.
4. **Trace.** Each color is traced with Potrace. Layers stack largest-first, and each layer extends under the solid ones painted above it, so neighboring colors never show hairline gaps. See-through layers go at the bottom.
5. **Verify.** The SVG is rendered back and compared with the input on the input's own backdrop (gray for transparent inputs, so a wrong hole shows). Visible mismatches are counted and drawn in red on the preview.

## Workflow

### 1. Run the converter

```bash
python3 <skill-dir>/scripts/rasterless.py INPUT.png --preview
```

- Several files or a glob work: `rasterless.py icons/*.png -o svg/ --preview`. With `-o` pointing at a folder, every SVG goes there. Without `-o`, each SVG lands next to its input.
- `-o out.svg` names the output for a single input.
- `--preview` writes the preview PNGs to a temp folder and prints each path, so the output folder holds only the SVGs.
- In a terminal that has `uv` (Claude Code, Codex), run `uv run <skill-dir>/scripts/rasterless.py ...` instead of `python3`. The script declares its own dependencies, so `uv` installs them on first run.
- It runs in a terminal and in web chat sandboxes (Claude.ai, ChatGPT). It needs `pillow` and `numpy`. `rasterless_shaded.py` also needs `opencv-python-headless` and `scipy`. Web sandboxes usuall

Preview of the first 4,000 characters. Read full instructions →

Referenced files: 8 — file references are metadata, not package contents.