Skip to main content
Glama

SVGMaker MCP Server

by GenWaveLLC
npmGitHub
TypeScript
MIT License
52
10
  • Linux
  • Apple
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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.

🌟 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

  1. Create .env file:

SVGMAKER_API_KEY="your_api_key_here"

  1. Start the server:

npx svgmaker-mcp

🔌 LLM Integrations

🔌 Claude Desktop

  1. Add to claude_desktop_config.json:

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

  1. 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:

  1. Configure in cursor settings:

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

  1. 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:

  1. Configure in settings.json:

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

  1. 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

  1. Configure in settings:

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

  1. 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

  1. Configure in settings:

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

  1. 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" }

⚙️ 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://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

  1. Clone and install dependencies:

npm install

  1. Create .env file with your API key

SVGMAKER_API_KEY="your_api_key_here"

  1. 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:

  1. Continuous Integration

    • Runs on every push to main branch and pull requests

    • Performs linting, type checking, and building

    • Ensures code quality and consistency

  2. 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

  3. 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

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

⭐ Features

Input Format Support

  • SVG files (.svg)

  • PNG images (.png)

  • JPEG images (.jpg, .jpeg)

  • Other common image formats

Output Capabilities

  • Clean, optimized SVG output

  • Multiple aspect ratio options

  • Background control (transparent/opaque)

  • High-quality vectorization

📝 License

MIT © Genwave AI - see the LICENSE file for details.

This server cannot be installed

-
security - not tested
A
license - permissive license
-
quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Enables LLMs to programmatically generate, edit, and convert SVG images using the SVGMaker API and save them to the local filesystem.

  1. 🎨 MCP Server in Action
    1. 🌟 Highlights
      1. 📋 Table of Contents
        1. 💻 Requirements
          1. 📦 Package Structure
            1. 🚀 Installation
              1. Basic Setup
            2. 🔌 LLM Integrations
              1. 🔌 Claude Desktop
              2. 🔌 Cursor
              3. 🔌 Visual Studio Code
              4. 🔌 WindSurf
              5. 🔌 Zed
            3. 🛠️ Available Tools
              1. svgmaker_generate
              2. svgmaker_edit
              3. svgmaker_convert
            4. ⚙️ Configuration
              1. Environment Variables
              2. Debug Logging
            5. 🔍 Development
              1. Local Setup
              2. Testing
              3. CI/CD Workflow
            6. 🔐 Security
              1. 🤝 Contributing
                1. ⭐ Features
                  1. Input Format Support
                  2. Output Capabilities
                2. 📝 License

                  Related MCP Servers

                  • MCP SVG Converter

                    surferdot
                    -
                    security
                    A
                    license
                    -
                    quality
                    A Model Context Protocol server that provides tools for converting SVG code to high-quality PNG and JPG images with detailed customization options.
                    Last updated -
                    9
                    3
                    MIT License
                    • Apple

                  • SVG to PNG MCP Server

                    longbowzz
                    -
                    security
                    F
                    license
                    -
                    quality
                    A Model Context Protocol server that converts SVG code to PNG images, offering two conversion methods (CairoSVG and Inkscape) with support for custom working directories.
                    Last updated -
                    3
                    • Linux
                    • Apple

                  • PickAPIcon MCP

                    Leee62
                    A
                    security
                    A
                    license
                    A
                    quality
                    MCP server that allows FE/UI/Designers to retrieve SVG icons via the Iconify API by simply asking LLMs rather than manually searching websites.
                    Last updated -
                    3
                    22
                    4
                    MIT License

                  • Allyson MCP Server

                    isaiahbjork
                    A
                    security
                    F
                    license
                    A
                    quality
                    AI-powered animation generator that transforms static images into animated SVG components using the Model Context Protocol, allowing users to create animations through natural language prompts.
                    Last updated -
                    1
                    6
                    3

                  View all related MCP servers

                  Appeared in Searches

                  New MCP Servers

                  MCP directory API

                  We provide all the information about MCP servers via our MCP API.

                  curl -X GET 'https://glama.ai/api/mcp/v1/servers/GenWaveLLC/svgmaker-mcp'

                  If you have feedback or need assistance with the MCP directory API, please join our Discord server