trace-to-svg

Original source / Raw SKILL.md

---
name: trace-to-svg
description: Trace bitmap images (PNG/JPG/WebP) into clean SVG paths using potrace/mkbitmap. Use to convert logos/silhouettes into vectors for downstream CAD workflows (e.g., create-dxf etch_svg_path) and for turning reference images into manufacturable outlines.
metadata:
  openclaw:
    requires:
      bins: ["potrace", "mkbitmap"]
    install:
      - id: apt
        kind: apt
        package: potrace
        bins: ["potrace", "mkbitmap"]
        label: Install potrace + mkbitmap (apt)
      - id: brew
        kind: brew
        formula: potrace
        bins: ["potrace", "mkbitmap"]
        label: Install potrace + mkbitmap (brew)
---

# trace-to-svg

Convert a bitmap into a vector SVG using `mkbitmap` + `potrace`.

## Quick start

```bash
# 1) Produce a silhouette-friendly SVG
bash scripts/trace_to_svg.sh input.png --out out.svg

# 2) Higher contrast + less noise
bash scripts/trace_to_svg.sh input.png --out out.svg --threshold 0.6 --turdsize 20

# 3) Feed into create-dxf (example)
# - set create-dxf drawing.etch_svg_paths[].d to the SVG path `d` you want, or
# - store the traced SVG and reference it in your pipeline.
```

## Notes

- This is best for **logos, silhouettes, high-contrast shapes**.
- For photos or complex shading, results depend heavily on thresholding.
- Output is usually one or more `<path>` elements.


---

## Referenced Files

> The following files are referenced in this skill and included for context.

### scripts/trace_to_svg.sh

```bash
#!/usr/bin/env bash
set -euo pipefail

# trace_to_svg.sh
#
# Convert bitmap -> PBM -> SVG using mkbitmap + potrace.
#
# Requirements:
# - mkbitmap
# - potrace
#
# Usage:
#   trace_to_svg.sh input.png --out out.svg [--threshold 0.55] [--turdsize 10] [--alphamax 1.0] [--opttolerance 0.2]

if [[ $# -lt 1 ]]; then
  echo "Usage: $0 <input_image> --out <out.svg> [--threshold 0.55] [--turdsize 10] [--alphamax 1.0] [--opttolerance 0.2]" >&2
  exit 2
fi

IN="$1"; shift
OUT=""
THRESHOLD="0.55"      # mkbitmap threshold (0..1)
TURDSIZE="10"         # remove speckles smaller than this
ALPHAMAX="1.0"        # potrace corner threshold
OPTTOL="0.2"          # potrace curve optimization tolerance

while [[ $# -gt 0 ]]; do
  case "$1" in
    --out) OUT="$2"; shift 2;;
    --threshold) THRESHOLD="$2"; shift 2;;
    --turdsize) TURDSIZE="$2"; shift 2;;
    --alphamax) ALPHAMAX="$2"; shift 2;;
    --opttolerance) OPTTOL="$2"; shift 2;;
    -h|--help)
      echo "Usage: $0 <input_image> --out <out.svg> [--threshold 0.55] [--turdsize 10] [--alphamax 1.0] [--opttolerance 0.2]"; exit 0;;
    *)
      echo "Unknown arg: $1" >&2
      exit 2
      ;;
  esac
done

if [[ -z "$OUT" ]]; then
  echo "--out is required" >&2
  exit 2
fi

command -v mkbitmap >/dev/null 2>&1 || { echo "mkbitmap not found" >&2; exit 127; }
command -v potrace >/dev/null 2>&1 || { echo "potrace not found" >&2; exit 127; }

TMPDIR="$(mktemp -d)"
trap 'rm -rf "$TMPDIR"' EXIT

PBM="$TMPDIR/in.pbm"

# mkbitmap reads many common formats (png/jpg/webp) depending on build.
mkbitmap "$IN" \
  -o "$PBM" \
  -t "$THRESHOLD" \
  -s "$TURDSIZE" \
  -g 1

mkdir -p "$(dirname "$OUT")"

potrace "$PBM" \
  --svg \
  --output "$OUT" \
  --alphamax "$ALPHAMAX" \
  --opttolerance "$OPTTOL"

echo "$OUT"

```



---

## Skill Companion Files

> Additional files collected from the skill directory layout.

### _meta.json

```json
{
  "owner": "ajmwagar",
  "slug": "trace-to-svg",
  "displayName": "Trace To Svg",
  "latest": {
    "version": "0.1.0",
    "publishedAt": 1769953544013,
    "commit": "https://github.com/clawdbot/skills/commit/aad7d19fc44ee7f7ee06c3ad8f6c745989fabf7a"
  },
  "history": []
}

```

### references/examples.md

```markdown
# Examples

## Logo silhouette (best case)

```bash
bash scripts/trace_to_svg.sh logo.png --out out/logo.svg --threshold 0.6 --turdsize 30
```

## Noisy bitmap (try more cleanup)

```bash
bash scripts/trace_to_svg.sh noisy.png --out out/noisy.svg --threshold 0.7 --turdsize 80 --alphamax 0.8 --opttolerance 0.3
```

## Using the result with create-dxf

- Extract the `<path d="...">` from the traced SVG.
- Feed that `d` string into `create-dxf` `drawing.etch_svg_paths[]`.

Tip: if the SVG path is in a different coordinate scale, use the `scale`, `x`, `y` fields in `etch_svg_paths`.

```