mcpField
S
svg-tracer

svg-tracer

Local
github.com/pulsemcpMedia & Design81Updated 8w ago
Repository

About svg-tracer

An MCP server that converts bitmap images to SVG vector graphics using potrace tracing. It is useful for users who need SVG versions of PNG, JPG and similar files, such as icons. Tracing parameters and target size scaling can be adjusted per conversion.

Key features

  1. 01Accepts PNG, JPG, BMP, GIF, TIFF and WebP input
  2. 02Alpha channel preprocessing for transparent PNGs
  3. 03Adjustable threshold, speckle suppression and curve optimization
  4. 04Target size scaling for icon generation
  5. 05Custom fill color and background

Use cases

  1. 01Converting a logo to a scalable SVG file
  2. 02Generating a 50x50 Dewey icon
  3. 03Applying a brand color to a traced icon

MCP support

This project is an MCP server that provides a trace_bitmap_to_svg tool, which converts bitmaps to SVG and writes the output to local disk.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "com-pulsemcp-svg-tracer": {
      "command": "npx",
      "args": [
        "-y",
        "@pulsemcp/svg-tracer-mcp-server"
      ]
    }
  }
}
Run commandnpx -y @pulsemcp/svg-tracer-mcp-server

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@pulsemcp/svg-tracer-mcp-server0.1.3

Tools

1

Saved tool list · updated 2w ago

ParameterTypeRequiredDescription
colorstringNoFill color for the traced SVG paths as a hex color string. Example: "#FF5733" for orange, "#000000" for black. Default: "#000000".
thresholdnumberNoBlack/white threshold for tracing (0-255). Lower values capture more detail; higher values simplify. Default: 128.
turd_sizenumberNoSuppress speckles of up to this many pixels. Increase to remove noise, decrease to preserve fine detail. Default: 2.
backgroundstringNoBackground color for the SVG. Use "transparent" for no background, or a hex color string. Default: "transparent".
input_pathstringYesAbsolute path to the input bitmap image file. Supported formats: PNG, JPG/JPEG, BMP, GIF, TIFF, WebP. Example: "/tmp/logo.png"
output_pathstringNoAbsolute path where the output SVG file will be written. If not specified, defaults to the same directory and filename as input with .svg extension. Example: "/tmp/logo.svg"
target_widthnumberNoTarget width for the output SVG viewBox in pixels. The traced paths will be scaled to fit. Preserves aspect ratio. Example: 50 for a 50px wide icon.
opt_tolerancenumberNoCurve optimization tolerance (0-1). Higher values produce simpler curves; lower values preserve detail. Default: 0.2.
target_heightnumberNoTarget height for the output SVG viewBox in pixels. The traced paths will be scaled to fit. Preserves aspect ratio. Example: 50 for a 50px tall icon.

Details

From the project README

SVG Tracer MCP Server

An MCP server that converts bitmap images (PNG, JPG, BMP, GIF, TIFF, WebP) to SVG vector graphics using potrace tracing.

Features

  • Converts any common bitmap format to clean SVG vector paths
  • Automatic preprocessing of transparent PNGs (alpha channel to black-on-white mask)
  • Customizable tracing parameters (threshold, speckle suppression, curve optimization)
  • Target size scaling for generating icons (e.g., 50x50 Dewey icons)
  • Custom fill color and background support
  • Works with the local filesystem by default (reads input, writes output to disk)

Quick Start

Using npx
{
  "mcpServers": {
    "svg-tracer": {
      "command": "npx",
      "args": ["-y", "@pulsemcp/svg-tracer-mcp-server"]
    }
  }
}
Manual Setup
git clone https://github.com/pulsemcp/mcp-servers.git
cd mcp-servers/productionized/svg-tracer
npm install
npm run build
npm start

Tools

trace_bitmap_to_svg

Convert a bitmap image to an SVG vector graphic using potrace tracing.

Parameters:

ParameterTypeRequiredDescription
input_pathstringYesAbsolute path to the input bitmap image file
output_pathstringNoPath for the output SVG (defaults to input path with .svg extension)
thresholdnumberNoBlack/white threshold 0-255 (default: 128)
turd_sizenumberNoSuppress speckles up to this many pixels (default: 2)
opt_tolerancenumberNoCurve optimization tolerance 0-1 (default: 0.2)
colorstringNoFill color for traced paths (default: "#000000")
backgroundstringNoBackground color (default: "transparent")
target_widthnumberNoTarget SVG width in pixels
target_heightnumberNoTarget SVG height in pixels

Example usage:

Convert /tmp/logo.png to SVG:
trace_bitmap_to_svg(input_path="/tmp/logo.png")

Create a 50x50 icon with brand color:
trace_bitmap_to_svg(
  input_path="/tmp/logo.png",
  output_path="/tmp/logo-icon.svg",
  target_width=50,
  target_height=50,
  color="#FF5733"
)

How It Works

  1. Read input - Loads the bitmap image (PNG, JPG, BMP, GIF, TIFF, WebP)
  2. Preprocess - Handles transparency by converting alpha channel to a black-on-white grayscale mask
  3. Trace - Uses potrace to convert the bitmap to SVG vector paths
  4. Scale - Optionally wraps paths in a transform group to fit target dimensions
  5. Output - Writes the SVG to disk and returns the SVG string with metadata

Supported Formats

  • PNG (including transparent PNGs with alpha channel)
  • JPEG / JPG
  • WebP
  • BMP
  • GIF
  • TIFF

Development

npm install
npm run build
npm run dev          # Development mode with auto-reload
npm test             # Run functional tests
npm run test:run     # Run tests once
npm run test:integration  # Run integration tests
npm run test:all     # Run all tests

License

MIT

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.