Which integrations are available for this server?

Supports configuration through environment variables stored in .env files for API keys, rate limits, and base URL settings Used for package management and running server commands through npm scripts Enables programmatic generation of SVG images from text prompts with customizable quality and aspect ratio, and saving them to the local filesystem Provides full type safety with TypeScript support for the MCP server implementation

How do I use SVGMaker MCP Server?

1. Click on "Install 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., "@SVGMaker MCP Server create a simple blue circle logo and save it as logo.svg" 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.

SVGMaker MCP Server

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

Website npm version License Build Status npm downloads

🎨 MCP Server in Action

MCP Capabilities Demo

This very illustration came to life through our own SVGMaker MCP server—a living example of AI assistants and vector graphics working in perfect harmony via the Model Context Protocol.

Related MCP server: SVG to PNG MCP Server

🌟 Highlights

🎨 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

📋 Table of Contents

💻 Requirements

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 Structure

@genwave/svgmaker-mcp/
├── build/             # Compiled JavaScript files
├── docs/              # Documentation
│   └── api/           # API documentation
├── src/               # Source TypeScript files
│   ├── tools/         # MCP tool implementations
│   ├── services/      # API integration
│   └── utils/         # Utility functions
└── types/             # TypeScript declarations

🚀 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

🔌 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

Install MCP Server

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

Generate SVG images from text prompts. Supports style parameters for fine-grained control over the output.

{
  "prompt": "A minimalist mountain landscape with sun",
  "output_path": "/path/to/landscape.svg",
  "quality": "medium",
  "style": "flat",
  "color_mode": "few_colors",
  "composition": "full_scene",
  "background": "transparent"
}

svgmaker_edit

Edit existing SVGs or images with natural language. Supports the same style parameters as generate.

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

svgmaker_convert

Convert raster images to SVG using AI-powered vectorization.

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

⚙️ Configuration

Environment Variables

Variable	Description	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://api.svgmaker.io`
`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

🔐 Security

✅ Path validation prevents directory traversal
✅ Input sanitization for all parameters
✅ Secure file operation handling
✅ Environment variable protection
✅ Rate limiting support

SVGMaker MCP Server

SVGMaker MCP Server

🎨 MCP Server in Action

🌟 Highlights

📋 Table of Contents

💻 Requirements

📦 Package Structure

🚀 Installation

Basic Setup

🔌 LLM Integrations

🔌 Claude Desktop

🔌 Cursor

🔌 Visual Studio Code

🔌 WindSurf

🔌 Zed

🛠️ Available Tools

svgmaker_generate

svgmaker_edit

svgmaker_convert

⚙️ Configuration

Environment Variables

Debug Logging

🔍 Development

Local Setup

Testing

CI/CD Workflow

🔐 Security

🤝 Contributing

⭐ Features

Input Format Support

Output Capabilities

📝 License

Resources

Looking for Admin?

Appeared in Searches

Latest Blog Posts

MCP directory API