How do I install the Image To Svg skill?

Run npx skillmds@latest add razbakov/image-to-svg in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Image To Svg safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Image To Svg?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Image To Svg free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Image To Svg?

razbakov (@razbakov) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Image To Svg by razbakov — Agent Skill

Name: Image To Svg
Rating: 4.2 (5 reviews)
Author: razbakov

File contents

Image to SVG Conversion

Convert logos and icons from raster formats to clean SVG vectors using Potrace.

Prerequisites

# macOS
brew install potrace imagemagick

# Ubuntu/Debian
sudo apt install potrace imagemagick

Quick Workflow

1. Prepare the image

Convert to PBM (portable bitmap) format for Potrace:

# For clean logos with solid colors
magick input.jpg -colorspace Gray -threshold 50% output.pbm

# Adjust threshold (0-100%) based on image:
# - Lower values: more black, captures finer details
# - Higher values: more white, cleaner shapes

2. Trace to SVG

potrace output.pbm -s -o output.svg

Potrace options:

Option	Effect
`-s`	Output SVG format
`-t 5`	Suppress speckles smaller than 5 pixels
`-a 1.0`	Smoother curves (0=polygon, 1.34=default)
`-O 0.2`	Optimize paths (0=least, 1=most)

3. Add colors (optional)

Potrace outputs monochrome SVG. To add colors:

Open the SVG and identify path groups
Change fill="#000000" to desired colors
For multi-color logos, separate paths into <g> groups with different fills

Example color edit:

<!-- Before -->
<g fill="#000000">
  <path d="...lips..."/>
  <path d="...hand..."/>
</g>

<!-- After: separate groups with colors -->
<g fill="#C21E1E">  <!-- Red for lips -->
  <path d="...lips..."/>
</g>
<g fill="#FFFFFF">  <!-- White for hand -->
  <path d="...hand..."/>
</g>

Multi-Color Logos

For logos with distinct color regions:

Create separate masks for each color
Trace each mask individually
Combine into single SVG with color groups

# Extract red channel (for red elements)
magick input.jpg -channel R -separate -threshold 50% red.pbm
potrace red.pbm -s -o red.svg

# Combine manually or use SVG editor

Troubleshooting

Issue	Solution
Too much noise	Increase threshold or use `-t` to suppress speckles
Missing details	Decrease threshold value
Jagged edges	Use `-a 1.5` for smoother curves
File too large	Use `-O 1` for maximum optimization
Background included	Use `-k 0.5` to set black level cutoff

Output Verification

Always verify the SVG renders correctly:

Open in browser to check appearance
Test at different sizes (SVG should scale cleanly)
Verify on both light and dark backgrounds if needed

---name: image-to-svgdescription: Convert raster images (JPEG, PNG) to SVG vector graphics using Potrace. Use when the user asks to vectorize an image, convert a logo to SVG, trace a bitmap, or create vector graphics from a raster image.---# Image to SVG ConversionConvert logos and icons from raster formats to clean SVG vectors using Potrace.## Prerequisites```bash# macOSbrew install potrace imagemagick# Ubuntu/Debiansudo apt install potrace imagemagick```## Quick Workflow### 1. Prepare the imageConvert to PBM (portable bitmap) format for Potrace:```bash# For clean logos with solid colorsmagick input.jpg -colorspace Gray -threshold 50% output.pbm# Adjust threshold (0-100%) based on image:# - Lower values: more black, captures finer details# - Higher values: more white, cleaner shapes```### 2. Trace to SVG```bashpotrace output.pbm -s -o output.svg```**Potrace options:**| Option | Effect ||--------|--------|| `-s` | Output SVG format || `-t 5` | Suppress speckles smaller than 5 pixels || `-a 1.0` | Smoother curves (0=polygon, 1.34=default) || `-O 0.2` | Optimize paths (0=least, 1=most) |### 3. Add colors (optional)Potrace outputs monochrome SVG. To add colors:1. Open the SVG and identify path groups2. Change `fill="#000000"` to desired colors3. For multi-color logos, separate paths into `<g>` groups with different fills**Example color edit:**```xml<g fill="#000000"> <path d="...lips..."/> <path d="...hand..."/></g><g fill="#C21E1E">  <path d="...lips..."/></g><g fill="#FFFFFF">  <path d="...hand..."/></g>```## Multi-Color LogosFor logos with distinct color regions:1. Create separate masks for each color2. Trace each mask individually3. Combine into single SVG with color groups```bash# Extract red channel (for red elements)magick input.jpg -channel R -separate -threshold 50% red.pbmpotrace red.pbm -s -o red.svg# Combine manually or use SVG editor```## Troubleshooting| Issue | Solution || ------------------- | --------------------------------------------------- || Too much noise | Increase threshold or use `-t` to suppress speckles || Missing details | Decrease threshold value || Jagged edges | Use `-a 1.5` for smoother curves || File too large | Use `-O 1` for maximum optimization || Background included | Use `-k 0.5` to set black level cutoff |## Output VerificationAlways verify the SVG renders correctly:1. Open in browser to check appearance2. Test at different sizes (SVG should scale cleanly)3. Verify on both light and dark backgrounds if needed

Frequently asked questions

Image To Svg