How do I use imagetosvg-mcp?

1. Click on "Deploy Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@imagetosvg-mcp Convert this logo.png to SVG and optimize it" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

imagetosvg-mcp

by ujo78

Overview Schema Source Related Servers Discussions Admin

TypeScript

Local

imagetosvg-mcp

License: MIT Node

A local Model Context Protocol server that gives AI agents full control over images — vectorize a raster image, import a vector file (PDF/AI/EPS), then inspect, edit, render, and optimize the SVG. No API keys, no cloud; everything runs locally.

The idea: an SVG is just text, and the agent is already the intelligence. So this server only does what an agent can't do on its own — turn pixels into editable paths and render SVG back to a picture for visual verification — plus a set of structured edit operations for the parts of SVG editing that are tedious by hand. The agent does the rest with its own file tools.

Why

Agents normally treat an image as opaque pixels they can't change. Convert it to SVG and the agent can recolor a logo, delete a layer, resize, restyle, or simplify it — then render the result and see whether the edit worked, all deterministically.

Related MCP server: Illustrator MCP Vectorizer

Tools

Tool	Purpose
`convert_image_to_svg`	Raster → SVG (hybrid: clean trace for simple graphics, layered color trace for complex ones)
`import_vector`	PDF / AI / EPS → SVG (paths preserved, no tracing)
`inspect_svg`	List addressable layers (id, tag, fill, stroke, bbox) without parsing path strings
`edit_svg`	Structured edits by layer id (recolor, remove, isolate, transform, resize, set attribute)
`render_svg`	Rasterize SVG → PNG so the agent can verify visually
`optimize_svg`	Clean up with svgo while preserving layer ids and viewBox

Supported raster inputs: PNG, JPG, WebP, GIF, BMP, TIFF, AVIF. Supported vector inputs: PDF, PDF-compatible AI, and EPS (EPS requires Ghostscript).

Install

git clone https://github.com/ujo78/imagetosvg-mcp.git
cd imagetosvg-mcp
npm install        # builds automatically (prepare hook)

Requires Node.js >= 20. All native dependencies ship prebuilt binaries — no system toolchain required.

Connect it to an agent

Claude Code

User scope (available in every project):

claude mcp add -s user imagetosvg -- node "/absolute/path/to/imagetosvg-mcp/dist/index.js"

Or per-project, commit a .mcp.json at the repo root:

{
  "mcpServers": {
    "imagetosvg": {
      "command": "node",
      "args": ["/absolute/path/to/imagetosvg-mcp/dist/index.js"]
    }
  }
}

Claude Desktop / Cursor / Windsurf

Add the same block to the client's MCP config (claude_desktop_config.json for Claude Desktop; the MCP settings panel for Cursor/Windsurf). Use an absolute path to dist/index.js.

On Windows, use forward slashes in the path, e.g. C:/Users/you/imagetosvg-mcp/dist/index.js.

The workflow

The bundled Claude skill teaches agents this loop:

Look at the source image.
Convert (convert_image_to_svg) or import (import_vector); check the returned PNG preview.
Compare preview to the original; re-convert with a different mode/max_colors if needed.
Inspect (inspect_svg) to learn the layers.
Edit with edit_svg (structured) or the agent's own file tools (freeform).
Verify with render_svg and look. Iterate.
Finalize with optimize_svg and use the .svg in place of the image.

edit_svg operations

setFill{id,color}, setStroke{id,color}, removeNode{id}, isolateNode{id}, transform{id,translate?,scale?,rotate?}, setDimensions{width?,height?}, setAttribute{id,name,value}. Layer ids (layer-N) are assigned in document order and survive optimize_svg.

Optional: EPS support

EPS import requires Ghostscript on PATH (gswin64c on Windows). PDF and AI work without it; if Ghostscript is missing, import_vector returns a clear error for EPS only.

Development

npm run dev        # run the server from source via tsx
npm run typecheck  # tsc --noEmit
npm test           # vitest
npm run build      # tsc -> dist/

See CONTRIBUTING.md for the full guide.

How it works

Hybrid conversion: a unique-color heuristic classifies an image as simple (vtracer binary trace → clean paths) or layered (vtracer color trace → stacked, individually addressable color layers). Override with mode / max_colors.
Vector import: PDF/AI go through mupdf (WASM, no system deps) with paths preserved; EPS is converted via Ghostscript when available.
Stack: TypeScript (ESM) · @modelcontextprotocol/sdk · @neplex/vectorizer (vtracer) · sharp · @resvg/resvg-js · svgo · svgson.

License

MIT © Rakshit Raj

Available Tools

6 tools

convert_image_to_svgConvert image to SVGB

Vectorize a raster image (PNG/JPG/WebP/GIF/BMP/TIFF/AVIF) into an editable SVG. mode=auto picks simple vs layered by image complexity. Returns a summary and an inline PNG preview.

ParametersJSON Schema

Name	Required	Description	Default
`input_path`	Yes
`mode`	No
`max_colors`	No
`output_path`	No

TDQS

B3.2/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Mentions mode selection and return of summary and preview, but lacks details on important traits like color handling, size limits, or potential side effects. No annotations present to compensate.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences with front-loaded purpose. Efficient but could be slightly more structured.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Missing explanation for two parameters and lacks details on return value contents beyond summary and preview. Incomplete for effective tool use.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters2/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The description covers input formats and mode but does not explain 'max_colors' or 'output_path'. With 0% schema description coverage, the description should provide more parameter context.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Clearly states the verb 'vectorize' and the resource 'raster image into an editable SVG'. Differentiates from sibling tools like edit_svg or import_vector.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Implies usage when a raster image needs conversion to SVG, but provides no explicit guidance on when to choose this over alternatives like import_vector.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

edit_svgEdit SVGB

Apply structured edits to an SVG by layer id: setFill, setStroke, removeNode, isolateNode, transform, setDimensions, setAttribute. Writes back to svg_path (or output_path) and returns the updated summary.

ParametersJSON Schema

Name	Required	Description	Default
`svg_path`	Yes
`operations`	Yes
`output_path`	No

TDQS

B3.4/5.0

Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided; description discloses it writes back to svg_path or output_path and returns an updated summary, but lacks detail on overwrite behavior, permissions, or side effects beyond the basic write action.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Single sentence of 26 words, efficiently lists key operations. Could be improved with bullet points or clearer separation of operations.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With no output schema and 3 parameters, description omits details on operation requirements, error handling, and expected summary content. Incomplete for a tool editing files.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters2/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 0%; description lists operation types but adds no detail on parameter formats (e.g., color as string, translate as array). Does not compensate for missing schema descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool edits an SVG by applying structured operations (setFill, setStroke, etc.) and mentions writing back to a file. It distinguishes from siblings that convert, import, inspect, optimize, or render SVGs.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies use when SVG edits are needed but does not explicitly state when to use this tool versus alternatives or provide when-not-to-use guidance.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

import_vectorImport vector file to SVGA

Import a vector file (PDF, PDF-compatible AI, or EPS) into an editable SVG with paths preserved. EPS requires Ghostscript on PATH. page selects a PDF page (default 0).

ParametersJSON Schema

Name	Required	Description	Default
`input_path`	Yes
`page`	No
`output_path`	No

TDQS

A3.5/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Without annotations, the description must fully disclose behavior. It mentions a dependency (Ghostscript) and page selection, but omits important traits like idempotency, error handling, whether the original file is modified, or if the operation is reversible. The description provides minimal behavioral context beyond core functionality.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is extremely concise—two sentences—with the key action front-loaded. Every sentence provides necessary information: supported formats, output quality ('paths preserved'), a prerequisite, and a parameter detail. No wasted words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the low complexity (3 parameters, no output schema, no annotations), the description covers the main purpose and a key prerequisite. However, it lacks information on optional parameters, return values, error states, or behavior when output_path is omitted. Completeness is adequate but not thorough.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 0%, so the description must compensate. It adds meaning for the 'page' parameter (selects PDF page, default 0') and implies 'input_path' is the file to import. However, 'output_path' is not explained (e.g., optional, default behavior), and no format info is given beyond the description header. Partial coverage but adds some value.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb ('Import') and the resource ('vector file (PDF, PDF-compatible AI, or EPS)') and the output ('editable SVG with paths preserved'). It distinguishes itself from sibling tools like convert_image_to_svg by specifying vector formats, making the purpose specific and unambiguous.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description mentions a prerequisite ('EPS requires Ghostscript on PATH') and explains the page parameter's function, providing some context for use. However, it does not explicitly state when to use this tool versus alternatives (e.g., convert_image_to_svg for raster images) or when not to use it, limiting decision support.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

inspect_svgInspect SVGA

Return SVG dimensions, viewBox, and the list of addressable layers (id, tag, fill, stroke, pathCount, bbox).

ParametersJSON Schema

Name	Required	Description	Default
`svg_path`	Yes

TDQS

A3.5/5.0

Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries full burden. It clearly states the output, implying a read-only operation with no side effects. However, it does not mention error handling or file validation.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence that efficiently conveys the tool's purpose and output. Every word adds value; no redundancy.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The description fully details the output but neglects the input parameter entirely. Given the tool's simplicity, it is incomplete as it fails to describe how to call the tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema coverage is 0%, yet the description does not explain the 'svg_path' parameter. It omits any mention of the input, leaving the agent without guidance on how to specify the SVG file.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description explicitly states the tool returns SVG dimensions, viewBox, and addressable layers with specific fields. This clearly distinguishes it from sibling tools like edit_svg or render_svg, which have different purposes.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage for inspection, but provides no explicit guidance on when to use it versus alternatives. There are no exclusions or conditions mentioned, leaving the agent to infer.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

optimize_svgOptimize SVGA

Run svgo to clean up an SVG while preserving layer ids and viewBox. Writes back to svg_path (or output_path).

ParametersJSON Schema

Name	Required	Description	Default
`svg_path`	Yes
`output_path`	No

TDQS

A3.7/5.0

Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It discloses that the tool runs svgo, preserves specific attributes, and writes to svg_path or output_path. However, it does not explain potential side effects like metadata stripping or precision reduction.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two sentences, 17 words, with no wasted text. It is front-loaded with the primary action and efficiently conveys key behaviors.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The tool is simple with only two parameters and no output schema, but the description is minimal. Missing details include what svgo is, what 'clean up' entails, dependencies, and return value. It is minimally viable but has gaps.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 0%, but the description adds that svg_path is the input and output_path is optional, with default behavior to overwrite. This adds meaning beyond the schema, but lacks details like file path constraints or error handling.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool runs svgo to optimize an SVG while preserving layer ids and viewBox. It distinguishes from sibling tools like convert_image_to_svg, edit_svg, import_vector, inspect_svg, and render_svg, which focus on other operations.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage for SVG optimization but does not explicitly state when to use this tool over siblings or when not to use it. No alternatives or exclusions are provided.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

render_svgRender SVG to PNGA

Rasterize an SVG to PNG for visual verification. Returns the PNG inline and writes a .preview.png next to the SVG.

ParametersJSON Schema

Name	Required	Description	Default
`svg_path`	Yes
`width`	No
`scale`	No

TDQS

A3.9/5.0

Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided; description discloses side effects: returns PNG inline and writes a .preview.png file. Lacks details on overwriting behavior but sufficient for basic transparency.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences with no redundancy; front-loaded with action and purpose.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple 3-param tool without output schema, covers return format (inline) and side effect (file creation). Could specify output type precisely but adequate.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters2/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema has 0% description coverage; description only mentions svg_path implicitly. Does not explain width and scale parameters, leaving the agent uncertain about their effect.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Clearly states verb 'Rasterize' and resource 'SVG to PNG', with purpose 'visual verification'. Distinct from siblings like convert_image_to_svg (opposite), edit_svg, import_vector, inspect_svg, optimize_svg.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Implies use for visual verification via 'for visual verification', but no explicit when-to-use/exclusions/alternatives. Could be improved with contrast to siblings.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

6 tool updatesv0.1.0Jun 20, 2026
- First observedconvert_image_to_svg
- First observededit_svg
- First observedimport_vector
- First observedinspect_svg
- First observedoptimize_svg
- First observedrender_svg

Deploy Server

RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A3.9/5.0

Scored 2026-06-20 13:40 across 6 tools

Disambiguation5/5

Each tool has a distinct purpose: conversion, editing, importing, inspection, optimization, and rendering. There is no overlap or ambiguity between tool functions.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern using snake_case, such as 'convert_image_to_svg' and 'edit_svg'. The naming is predictable and clear.

Tool Count5/5

With 6 tools covering the full workflow of image-to-SVG conversion, editing, importing, inspection, optimization, and rendering, the count is well-scoped and each tool earns its place.

Completeness5/5

The tool set covers the entire lifecycle: converting from raster or vector, inspecting, editing layers, optimizing, and rendering previews. No obvious gaps exist for the server's stated purpose.

Maintenance

ActivityInactive

ResponsivenessNo issues

Resources

GitHub Repository

Need Help?

Related Servers

Related MCP Connectors

CleanVector
ai.cleanvector
Generate vector art, vectorize images, and return SVG, PNG, and logo kits to AI agents.
Image & Video Processing Design Tools
1
Agent-Native DesignOAuth
io.github.BuilderIO
Agent-Native design tool - create and edit visual designs with agent assistance
Design Tools Image & Video Processing Autonomous Agents
14,698
Supericons A
io.github.curlymolelabs
Multilingual semantic SVG icon search with previews for AI coding agents. 20,000+ icons.
Search Developer Tools Design Tools
521
SVG AIOAuth
org.svgai
Generate and vectorize clean, editable SVG graphics from text, images, or both.
AI & Machine Learning Image & Video Processing Design Tools
1

Related MCP Servers

inkscape-mcp
Image & Video Processing Design Tools
sandraschi
A
license
Not graded
quality
A
maintenance
Enables AI agents to control Inkscape for vector graphics editing via MCP tools.
Updated 13 hours ago (2026-09-11 16:07 UTC)
58
MIT
Illustrator MCP Vectorizer
Design Tools Image & Video Processing
yingy-buxing
F
license
Not graded
quality
D
maintenance
Enables AI agents to automate Adobe Illustrator, converting bitmap artwork into editable .ai files, running ExtendScript, and capturing the Illustrator window for visual QA.
Updated 3 months ago (2026-06-18 08:29 UTC)
1
-
inkscape-mcp
Design Tools Image & Video Processing
jjjsood
A
license
A
quality
B
maintenance
Enables AI agents to inspect, edit, validate, render, and export SVG/Inkscape documents safely with reversible operations and risk-classed tools.
Updated 2 months ago (2026-07-01 23:10 UTC)
87
2
MIT
AVGE Engine
Design Tools Image & Video Processing
MAsif786
F
license
Not graded
quality
B
maintenance
Vector illustration tools for AI agents — create scenes, characters, and graphics with shapes, armatures, materials, and rendering.
Updated a month ago (2026-08-16 19:52 UTC)
-