SVGMaker-MCP: Server with AI Creation & SVG Editing via API

Svgmaker MCP

SVGMaker MCP Server is a powerful service based on the SVGMaker API for generating, editing, and converting SVG images. It supports AI-driven SVG creation, smart editing, image-to-SVG conversion, etc., and provides secure file operations and real-time progress updates.

Image and video processing Developer tools #SVG Generation #AI Drawing #Image Conversion #Vector Editing .TypeScript

rating : 2.5 points

downloads : 5.7K

update time : 2025-07-31

Open Site

What is SVGMaker MCP Server?

SVGMaker MCP Server is an intelligent vector graphics processing server that provides AI-driven SVG generation, editing, and conversion functions through the Model Context Protocol (MCP). It allows users to create and modify vector graphics using natural language instructions without professional design skills.

How to use SVGMaker MCP Server?

Interact with your favorite AI assistants (such as Claude, Cursor, etc.) through simple text instructions, and SVGMaker will automatically handle graphic tasks. After installation, simply send an MCP format request containing operation instructions.

Applicable scenarios

Suitable for scenarios such as rapid prototyping, brand logo creation, technical chart generation, and image vectorization. It is especially suitable for developers, designers, and content creators.

Main Features

AI Generate SVG

Automatically generate high-quality vector graphics through text descriptions, supporting multiple styles and themes.

Smart Editing

Modify existing SVG files using natural language instructions, such as adjusting colors and adding elements.

Image Vectorization

Convert bitmap images (such as PNG, JPG) to scalable SVG format.

Secure File Operations

Built-in path verification and security mechanisms to prevent unauthorized file access.

Real-time Progress Feedback

Provide progress updates during long-term operations so that you can understand the task status.

Advantages

Create professional-grade vector graphics without design skills.

Seamlessly integrate with multiple AI assistants and development tools.

Support high-quality output of complex graphics.

Provide output options with transparency and background.

Detailed type definitions and error handling.

Limitations

Requires an SVGMaker API key (available for free).

Generating complex graphics may take longer processing time.

Design details with extremely high precision may require manual adjustment.

Free accounts have API call limits.

How to Use

Get an API Key

Visit svgmaker.io to register an account and get your API key.

Install the Server

Install the SVGMaker MCP server package via npm or yarn.

Configure the Environment

Create a.env file and set your API key.

Start the Server

Run the server and connect to your favorite AI assistant.

Send an MCP Request

Send a formatted MCP request through a supported client.

Usage Examples

Create a Brand Logo

Generate a minimalist-style logo for a startup company.

Edit an Existing Icon

Adjust the color and style of an existing icon.

Convert a Company Logo

Convert a bitmap logo to a scalable vector format.

Frequently Asked Questions

Do I need programming skills to use it?

What input image formats are supported?

Can the generated SVG be used commercially?

How to handle complex graphic requests?

Is there a free quota?

Related Resources

SVGMaker Official Website

Get an API key, view documentation and examples.

GitHub Repository

Source code and issue tracking.

MCP Protocol Specification

Understand the Model Context Protocol standard.

Integration Guide Video

Video tutorials on how to integrate with various AI assistants.

🚀 SVGMaker MCP Server

A powerful MCP server for generating, editing, and converting SVG images using SVGMaker API.

🚀 Quick Start

Get started with the SVGMaker MCP Server by following the steps below.

Prerequisites

Node.js: Minimum version 18.0.0
```
node --version  # Should be >= v18.0.0
```
npm: Minimum version 7.0.0
```
npm --version   # Should be >= 7.0.0
```
Operating Systems:
- Linux (Ubuntu 20.04+, CentOS 8+)
- macOS (10.15+)
- Windows (10+)
SVGMaker API key (Get one here)

Installation

# Using npm
npm install @genwave/svgmaker-mcp

# Using yarn
yarn add @genwave/svgmaker-mcp

Basic Setup

Create .env file:

SVGMAKER_API_KEY="your_api_key_here"

Start the server:

npx svgmaker-mcp

✨ Features

🎨 AI-Powered SVG Generation: Create SVGs from text descriptions.
✏️ Smart SVG Editing: Edit existing SVGs with natural language.
🔄 Image-to-SVG Conversion: Convert any image to scalable SVG.
🔒 Secure File Operations: Built-in path validation and security.
⚡ Real-Time Progress: Live updates during operations.
📝 Type Safety: Full TypeScript support with type definitions.

📦 Installation

Prerequisites

Node.js: Minimum version 18.0.0
```
node --version  # Should be >= v18.0.0
```
npm: Minimum version 7.0.0
```
npm --version   # Should be >= 7.0.0
```
Operating Systems:
- Linux (Ubuntu 20.04+, CentOS 8+)
- macOS (10.15+)
- Windows (10+)
SVGMaker API key (Get one here)

Package Installation

# Using npm
npm install @genwave/svgmaker-mcp

# Using yarn
yarn add @genwave/svgmaker-mcp

Basic Setup

Create .env file:

SVGMAKER_API_KEY="your_api_key_here"

Start the server:

npx svgmaker-mcp

💻 Usage Examples

🔌 LLM Integrations

🔌 Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "svgmaker": {
      "command": "npx",
      "args": ["@genwave/svgmaker-mcp"],
      "transport": "stdio",
      "env": {
        "SVGMAKER_API_KEY": "your_api_key_here"
      }
    }
  }
}

Example Claude prompt:

Generate an SVG of a minimalist mountain landscape:
<mcp>
{
  "server": "svgmaker",
  "tool": "svgmaker_generate",
  "arguments": {
    "prompt": "Minimalist mountain landscape with sun",
    "output_path": "./landscape.svg",
    "quality": "high",
    "aspectRatio": "landscape"
  }
}
</mcp>

🔌 Cursor

Or configure manually:

Configure in cursor settings:

{
  "mcpServers": {
    "svgmaker": {
      "type": "local",
      "command": "npx",
      "args": ["@genwave/svgmaker-mcp"],
      "transport": "stdio",
      "env": {
        "SVGMAKER_API_KEY": "your_api_key_here"
      }
    }
  }
}

Example usage in Cursor:

Use svgmaker to edit the logo.svg file and make it more modern:
<mcp>
{
  "server": "svgmaker",
  "tool": "svgmaker_edit",
  "arguments": {
    "input_path": "./logo.svg",
    "prompt": "Make it more modern and minimalist",
    "output_path": "./modern_logo.svg",
    "quality": "high"
  }
}
</mcp>

🔌 Visual Studio Code

Or configure manually:

Configure in settings.json:

{
  "servers": {
    "svgmaker": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@genwave/svgmaker-mcp"],
      "env": {
        "SVGMAKER_API_KEY": "<your_api_key>"
      }
    }
  }
}

Example usage in VS Code:

Generate a new icon for my app:
<mcp>
{
  "server": "svgmaker",
  "tool": "svgmaker_generate",
  "arguments": {
    "prompt": "Modern app icon with abstract geometric shapes",
    "output_path": "./assets/icon.svg",
    "quality": "high",
    "aspectRatio": "square"
  }
}
</mcp>

🔌 WindSurf

Configure in settings:

{
  "mcpServers": {
    "svgmaker": {
      "command": "npx",
      "args": ["-y", "@genwave/svgmaker-mcp"],
      "env": {
        "SVGMAKER_API_KEY": "<your_api_key>"
      }
    }
  }
}

Example usage in WindSurf:

Convert the company logo to SVG:
<mcp>
{
  "server": "svgmaker",
  "tool": "svgmaker_convert",
  "arguments": {
    "input_path": "./branding/logo.png",
    "output_path": "./branding/vector_logo.svg"
  }
}
</mcp>

🔌 Zed

Configure in settings:

{
  "context_servers": {
    "svgmaker": {
      "command": {
        "path": "npx",
        "args": ["-y", "@genwave/svgmaker-mcp"],
        "env": {
          "SVGMAKER_API_KEY": "<your_api_key>"
        }
      },
      "settings": {}
    }
  }
}

Example usage in Zed:

Edit an existing SVG file:
<mcp>
{
  "server": "svgmaker",
  "tool": "svgmaker_edit",
  "arguments": {
    "input_path": "./diagrams/flowchart.svg",
    "prompt": "Add rounded corners and smooth gradients",
    "output_path": "./diagrams/enhanced_flowchart.svg",
    "quality": "high"
  }
}
</mcp>

🛠️ Available Tools

svgmaker_generate

Transform your ideas into stunning SVG artwork using AI-powered creativity.

How we created the header illustration:

{
  "prompt": "Modern tech illustration showing an MCP server connecting multiple AI assistants to SVG generation capabilities. Show interconnected nodes, data flow, and SVG icons. Use a clean, professional design with blue and purple gradients, geometric shapes, and modern typography elements.",
  "output_path": "./docs/mcp-capabilities-demo.svg",
  "quality": "medium",
  "aspectRatio": "landscape",
  "background": "transparent"
}

svgmaker_edit

Edit existing SVGs or images with natural language.

{
  "input_path": "/path/to/input.svg",
  "prompt": "Add a gradient background and make it more vibrant",
  "output_path": "./enhanced.svg",
  "quality": "high",
  "background": "opaque"
}

svgmaker_convert

Convert images to SVG format.

{
  "input_path": "/path/to/image.png",
  "output_path": "./vector.svg"
}

📚 Documentation

⚙️ Configuration

Environment Variables

Property	Details	Required	Default
`SVGMAKER_API_KEY`	Your SVGMaker API key	✅ Yes	-
`SVGMMAKER_RATE_LIMIT_RPM`	API rate limit (requests per minute)	❌ No	2
`SVGMAKER_BASE_URL`	Custom SVGMaker API base URL	❌ No	`https://svgmaker.io/api`
`SVGMAKER_DEBUG`	Enable debug logging	❌ No	`false`

Debug Logging

The server includes comprehensive logging for debugging and monitoring:

Enable Logging:

# Enable debug logging
SVGMAKER_DEBUG=true npx @genwave/svgmaker-mcp

# Or set NODE_ENV to development
NODE_ENV=development npx @genwave/svgmaker-mcp

Log Files Location:

macOS/Linux: ~/.cache/svgmaker-mcp/logs/
Windows: %LOCALAPPDATA%/svgmaker-mcp/logs/
Fallback: ./logs/ (in project directory)

Log File Format:

mcp-debug-2025-06-04T10-30-45-123Z.log

🔍 Development

Local Setup

Clone and install dependencies:

npm install

Create .env file with your API key

SVGMAKER_API_KEY="your_api_key_here"

Run in development mode:

npm run dev

Testing

Use the MCP Inspector for testing:

npx @modelcontextprotocol/inspector node build/index.js

CI/CD Workflow

This project uses GitHub Actions for continuous integration and deployment:

Continuous Integration
- Runs on every push to main branch and pull requests
- Performs linting, type checking, and building
- Ensures code quality and consistency
Releasing a New Version
- To release a patch version (bug fixes):
```
npm run release:patch
```
- To release a minor version (new features):
```
npm run release:minor
```
- To release a major version (breaking changes):
```
npm run release:major
```
Publishing
- Automatically publishes to npm when a new version tag is pushed