lov-png2svg

PNG to SVG Skill

Convert PNG images to high-quality vector SVG, with support for removing white backgrounds.

Toolchain

PNG → magick (去白底+alpha阈值) → vtracer (样条曲线) → svgo (压缩) → SVG

• ImageMagick (magick): Remove white background + alpha threshold processing
• vtracer: Spline curve vectorization (smoother than potrace)
• svgo: SVG path compression optimization

How to Invoke

When you need to convert PNG to SVG, follow these steps:

Input

• INPUT_PNG: Input PNG file path (required)
• OUTPUT_SVG: Output SVG path (default: same name with .svg)
• KEEP_BG: Whether to keep the background (default: false, remove white background)

Execution Steps

Step 1: Preprocessing (remove white background)

If the background needs to be removed (KEEP_BG=false):

magick INPUT_PNG \
  -fuzz 15% -transparent white \
  -channel A -threshold 50% +channel \
  INPUT_PNG.temp.png

Step 2: Vectorization

vtracer --input INPUT_PNG.temp.png --output OUTPUT_SVG \
  --mode spline \
  --filter_speckle 8 \
  --color_precision 8 \
  --corner_threshold 120 \
  --segment_length 6 \
  --path_precision 5

Step 3: Compression optimization

npx svgo OUTPUT_SVG -o OUTPUT_SVG --multipass

Step 4: Cleanup

rm -f INPUT_PNG.temp.png

Output

Return the path of the generated SVG file, and report the file size.

✓ PNG → SVG 转换完成

输入: {INPUT_PNG}
输出: {OUTPUT_SVG}
大小: {file_size}

Dependencies

Before first use, make sure the following are installed:

brew install imagemagick
cargo install vtracer
npm install -g svgo  # 或使用 npx

Parameter Tuning

Parameter	Effect	Effect of Increasing
filter_speckle	Filter small spots	Cleaner
corner_threshold	Corner threshold	Smoother
segment_length	Line segment length	Smoother
color_precision	Color precision	More accurate

Runtime context (shared)

Before running, read this Skill package's skill.yaml, provided by the host skill-runtime/v1 context. The field resolution order is: current request, project context, personal Preferences, brand Profile, general defaults.

• Use only the fields declared in the Manifest; Profile stores public brand facts, and Preferences stores personal work preferences.
• required: true When a field is missing, ask the user one focused question according to the Manifest's question configuration; save the answer only after the user explicitly agrees.
• Errors provide a copyable context_id, field path, and source; diagnostic content avoids secrets, full private paths, and raw configuration.

General Feedback Loop

When the user provides modification feedback during a Skill-driven task, before continuing with the current artifact you must do the following:

1. First determine whether the feedback is task-specific(this time only) or reusable(reusable across tasks).
2. task-specific Modify only the current task, not the Skill.
3. reusable First determine the scope: for domain rules, first update the corresponding canonical Skill; for rules that apply to all Skills, first update the shared specification.
4. After completing rule updates, versioning, linting, and distribution verification, then apply the modification to the current task.
5. reusable A modification invalidates previous "confirm," "continue," and "send it" responses; after completing the current artifact modification and read-back, you must stop and wait for the user's next instruction, without automatically proceeding to publishing, committing, or other external writes.