shield_lock
JinDaGe
Contact
← Back to MCP directory
publicPublicdnsLocal runtime

svgmaker-mcp

SVGMaker MCP Server是一个基于SVGMaker API的强大服务，用于生成、编辑和转换SVG图像。它支持AI驱动的SVG创作、智能编辑、图像转SVG等功能，并提供安全文件操作和实时进度更新。

article

README

🚀 SVGMaker MCP 服务器

SVGMaker MCP 服务器是一款强大的 MCP 服务器，借助 SVGMaker API 实现 SVG 图像的生成、编辑和转换功能。

网站 npm 版本 许可证 构建状态 npm 下载量

🚀 快速开始

环境要求

  • Node.js：最低版本 18.0.0 
    node --version  # 版本应 >= v18.0.0
  • npm：最低版本 7.0.0 
    npm --version   # 版本应 >= 7.0.0
  • 操作系统：
    • Linux（Ubuntu 20.04+、CentOS 8+）
    • macOS（10.15+）
    • Windows（10+）
  • SVGMaker API 密钥（点击获取）

安装

# 使用 npm 安装
npm install @genwave/svgmaker-mcp

# 使用 yarn 安装
yarn add @genwave/svgmaker-mcp

基本设置

  1. 创建 .env 文件：
SVGMAKER_API_KEY="your_api_key_here"
  1. 启动服务器：
npx svgmaker-mcp

✨ 主要特性

  • 🎨 人工智能驱动的 SVG 生成：根据文本描述创建 SVG 图像。
  • ✏️ 智能 SVG 编辑：使用自然语言编辑现有的 SVG 图像。
  • 🔄 图像转 SVG 格式：将任意图像转换为可缩放的 SVG 格式。
  • 🔒 安全的文件操作：内置路径验证和安全机制。
  • ⚡ 实时进度反馈：操作过程中实时更新进度。
  • 📝 类型安全：全面支持 TypeScript 并提供类型定义。

📦 安装指南

安装命令

# 使用 npm
npm install @genwave/svgmaker-mcp

# 使用 yarn
yarn add @genwave/svgmaker-mcp

基本设置

  1. 创建 .env 文件：
SVGMAKER_API_KEY="your_api_key_here"
  1. 启动服务器：
npx svgmaker-mcp

💻 使用示例

基础用法

生成 SVG

{
  "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"
}

编辑 SVG

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

图像转 SVG

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

高级用法

与不同工具集成

Claude Desktop
  1. 添加到 claude_desktop_config.json：
{
  "mcpServers": {
    "svgmaker": {
      "command": "npx",
      "args": ["@genwave/svgmaker-mcp"],
      "transport": "stdio",
      "env": {
        "SVGMAKER_API_KEY": "your_api_key_here"
      }
    }
  }
}
  1. Claude 示例提示：
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

安装 MCP 服务器

或者手动配置：

  1. 在 Cursor 设置中配置：
{
  "mcpServers": {
    "svgmaker": {
      "type": "local",
      "command": "npx",
      "args": ["@genwave/svgmaker-mcp"],
      "transport": "stdio",
      "env": {
        "SVGMAKER_API_KEY": "your_api_key_here"
      }
    }
  }
}
  1. 在 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

或者手动配置：

  1. 在 settings.json 中配置：
{
  "servers": {
    "svgmaker": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@genwave/svgmaker-mcp"],
      "env": {
        "SVGMAKER_API_KEY": "<your_api_key>"
      }
    }
  }
}
  1. 在 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. 在设置中配置：
{
  "mcpServers": {
    "svgmaker": {
      "command": "npx",
      "args": ["-y", "@genwave/svgmaker-mcp"],
      "env": {
        "SVGMAKER_API_KEY": "<your_api_key>"
      }
    }
  }
}
  1. 在 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. 在设置中配置：
{
  "context_servers": {
    "svgmaker": {
      "command": {
        "path": "npx",
        "args": ["-y", "@genwave/svgmaker-mcp"],
        "env": {
          "SVGMAKER_API_KEY": "<your_api_key>"
        }
      },
      "settings": {}
    }
  }
}
  1. 在 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>

📚 详细文档

包结构

@genwave/svgmaker-mcp/
├── build/             # 编译后的 JavaScript 文件
├── docs/              # 文档
│   └── api/           # API 文档
├── src/               # 源 TypeScript 文件
│   ├── tools/         # MCP 工具实现
│   ├── services/      # API 集成
│   └── utils/         # 工具函数
└── types/             # TypeScript 声明

可用工具

svgmaker_generate

使用人工智能驱动的创造力将您的想法转化为令人惊叹的 SVG 艺术作品。

svgmaker_edit

使用自然语言编辑现有的 SVG 或图像。

svgmaker_convert

将图像转换为 SVG 格式。

配置

环境变量

| 变量 | 描述 | 是否必需 | 默认值 | |------|------|----------|--------| | SVGMAKER_API_KEY | 您的 SVGMaker API 密钥 | ✅ 是 | - | | SVGMMAKER_RATE_LIMIT_RPM | API 速率限制（每分钟请求数） | ❌ 否 | 2 | | SVGMAKER_BASE_URL | 自定义 SVGMaker API 基础 URL | ❌ 否 | https://svgmaker.io/api | | SVGMAKER_DEBUG | 启用调试日志记录 | ❌ 否 | false |

调试日志

服务器包含全面的日志记录，用于调试和监控：

启用日志记录：

# 启用调试日志记录
SVGMAKER_DEBUG=true npx @genwave/svgmaker-mcp

# 或者将 NODE_ENV 设置为开发环境
NODE_ENV=development npx @genwave/svgmaker-mcp

日志文件位置：

  • macOS/Linux：~/.cache/svgmaker-mcp/logs/
  • Windows：%LOCALAPPDATA%/svgmaker-mcp/logs/
  • 备用位置：./logs/（项目目录下）

日志文件格式：

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

开发

本地设置

  1. 克隆项目并安装依赖：
npm install
  1. 创建包含您的 API 密钥的 .env 文件
SVGMAKER_API_KEY="your_api_key_here"
  1. 以开发模式运行：
npm run dev

测试

使用 MCP Inspector 进行测试：

npx @modelcontextprotocol/inspector node build/index.js

CI/CD 工作流

本项目使用 GitHub Actions 进行持续集成和部署：

  1. 持续集成

    • 在每次推送到主分支和拉取请求时运行。
    • 执行代码检查、类型检查和构建。
    • 确保代码质量和一致性。

  2. 发布新版本

    • 发布补丁版本（修复 bug）： 
      npm run release:patch
    • 发布次要版本（新增功能）： 
      npm run release:minor
    • 发布主要版本（重大变更）： 
      npm run release:major

  3. 发布到 npm

    • 当推送新的版本标签时，自动发布到 npm。

安全

  • ✅ 路径验证可防止目录遍历攻击。
  • ✅ 对所有参数进行输入清理。
  • ✅ 安全的文件操作处理。
  • ✅ 环境变量保护。
  • ✅ 支持速率限制。

贡献

我们欢迎贡献！请参阅我们的 贡献指南 了解详细信息。

特性

输入格式支持

  • SVG 文件（.svg）
  • PNG 图像（.png）
  • JPEG 图像（.jpg、.jpeg）
  • 其他常见图像格式

输出能力

  • 干净、优化的 SVG 输出。
  • 多种宽高比选项。
  • 背景控制（透明/不透明）。
  • 高质量矢量化。

🔧 技术细节

环境要求

  • Node.js 最低版本 18.0.0，以确保服务器的兼容性和性能。
  • npm 最低版本 7.0.0，用于依赖管理。
  • 支持多种操作系统，包括 Linux（Ubuntu 20.04+、CentOS 8+）、macOS（10.15+）和 Windows（10+），方便不同环境下的使用。

安全机制

  • 路径验证：通过内置的路径验证机制，防止目录遍历攻击，确保文件操作的安全性。
  • 输入清理：对所有输入参数进行清理，防止潜在的安全漏洞。
  • 环境变量保护：保护环境变量不被非法访问，确保 API 密钥等敏感信息的安全。

日志系统

  • 全面的日志记录：服务器包含详细的日志记录，用于调试和监控。可以通过环境变量 SVGMAKER_DEBUG 或 NODE_ENV=development 启用调试日志。
  • 日志文件位置：根据不同的操作系统，日志文件存储在不同的位置，如 macOS/Linux 的 ~/.cache/svgmaker-mcp/logs/、Windows 的 %LOCALAPPDATA%/svgmaker-mcp/logs/，如果没有合适的位置，则存储在项目目录下的 ./logs/。

持续集成和部署

  • 使用 GitHub Actions 进行持续集成和部署，确保代码质量和一致性。在每次推送到主分支和拉取请求时，执行代码检查、类型检查和构建。
  • 支持自动发布到 npm，当推送新的版本标签时，自动完成发布流程。

📄 许可证

本项目采用 MIT 许可证，版权归 Genwave AI 所有。详情请参阅 LICENSE 文件。

help

Runtime guide

cloud

Hosted runtime

Hosted servers run from a provider-managed environment. You usually connect the MCP client to the hosted endpoint or follow the provider's authorization flow, without keeping a local process alive

  1. Open provider connection page
  2. Authorize or copy endpoint
  3. Connect from your MCP client
terminal

Local runtime / other methods

Local servers run on your own machine or infrastructure. You normally copy the server_config into your MCP client, install the required package, and provide env variables from env_schema when needed

  1. Copy server_config
  2. Install required package
  3. Fill env variables and restart client