SVG生成器-mcp

Name: SVG生成器-mcp
Author: GenWaveLLC

作者：GenWaveLLC18 星标更新：2025-07-17

安装使用来源：spider==github.com

项目介绍

SVGMaker MCP Server

一个强大的MCP服务器，用于生成、编辑和转换SVG图像，使用SVGMaker API。

🎨 MCP 服务器在行动

MCP 功能演示

此图正是通过我们自己的SVGMaker MCP服务器生成的——AI助手与矢量图形通过模型上下文协议完美协作的一个生动实例。

🌟 高亮功能

🎨 AI驱动的SVG生成：从文本描述创建SVG
✏️ 智能SVG编辑：用自然语言编辑现有的SVG
🔄 图像到SVG转换：将任何图像转换为可缩放的SVG
🔒 安全文件操作：内置路径验证和安全性
⚡ 实时进度：操作期间实时更新
📝 类型安全：完全支持TypeScript及其类型定义

💻 需求

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 密钥 (获取密钥)

📦 包结构

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

🚀 安装

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

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

基础设置

创建 .env 文件：

SVGMAKER_API_KEY="你的API密钥"

启动服务器：

npx svgmaker-mcp

🔌 LLM 集成

🔌 Claude Desktop

添加到 claude_desktop_config.json：

{
  "mcpServers": {
    "svgmaker": {
      "command": "npx",
      "args": ["@genwave/svgmaker-mcp"],
      "transport": "stdio",
      "env": {
        "SVGMAKER_API_KEY": "你的API密钥"
      }
    }
  }
}

示例 Claude 提示：

生成一幅极简主义山景SVG：
<mcp>
{
  "server": "svgmaker",
  "tool": "svgmaker_generate",
  "arguments": {
    "prompt": "极简主义山景带太阳",
    "output_path": "./landscape.svg",
    "quality": "high",
    "aspectRatio": "landscape"
  }
}
</mcp>

🔌 Cursor

或手动配置：

在Cursor设置中配置：

{
  "mcpServers": {
    "svgmaker": {
      "type": "local",
      "command": "npx",
      "args": ["@genwave/svgmaker-mcp"],
      "transport": "stdio",
      "env": {
        "SVGMAKER_API_KEY": "你的API密钥"
      }
    }
  }
}

在Cursor中的示例使用：

使用svgmaker编辑logo.svg文件并使其更现代：
<mcp>
{
  "server": "svgmaker",
  "tool": "svgmaker_edit",
  "arguments": {
    "input_path": "./logo.svg",
    "prompt": "使其更现代和极简主义",
    "output_path": "./modern_logo.svg",
    "quality": "high"
  }
}
</mcp>

🔌 Visual Studio Code

或手动配置：

在settings.json中配置：

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

在VS Code中的示例使用：

为我的应用生成一个新的图标：
<mcp>
{
  "server": "svgmaker",
  "tool": "svgmaker_generate",
  "arguments": {
    "prompt": "具有抽象几何形状的现代应用图标",
    "output_path": "./assets/icon.svg",
    "quality": "high",
    "aspectRatio": "square"
  }
}
</mcp>

🔌 WindSurf

在设置中配置：

{
  "mcpServers": {
    "svgmaker": {
      "command": "npx",
      "args": ["-y", "@genwave/svgmaker-mcp"],
      "env": {
        "SVGMAKER_API_KEY": "<你的API密钥>"
      }
    }
  }
}

在WindSurf中的示例使用：

将公司标志转换为SVG：
<mcp>
{
  "server": "svgmaker",
  "tool": "svgmaker_convert",
  "arguments": {
    "input_path": "./branding/logo.png",
    "output_path": "./branding/vector_logo.svg"
  }
}
</mcp>

🔌 Zed

在设置中配置：

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

在Zed中的示例使用：

编辑现有的SVG文件：
<mcp>
{
  "server": "svgmaker",
  "tool": "svgmaker_edit",
  "arguments": {
    "input_path": "./diagrams/flowchart.svg",
    "prompt": "添加圆角和平滑渐变",
    "output_path": "./diagrams/enhanced_flowchart.svg",
    "quality": "high"
  }
}
</mcp>

🛠️ 可用工具

svgmaker_generate

将您的想法转化为令人惊叹的SVG艺术品，利用AI驱动的创造力。

我们如何创建标题插图：

{
  "prompt": "展示MCP服务器连接多个AI助手到SVG生成能力的现代科技插图。展示互联节点、数据流和SVG图标。使用干净、专业的设计，蓝色和紫色渐变，几何形状和现代排版元素。",
  "output_path": "./docs/mcp-capabilities-demo.svg",
  "quality": "medium",
  "aspectRatio": "landscape",
  "background": "transparent"
}

svgmaker_edit

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

{
  "input_path": "/path/to/input.svg",
  "prompt": "添加渐变背景并使其更加鲜艳",
  "output_path": "./enhanced.svg",
  "quality": "high",
  "background": "opaque"
}

svgmaker_convert

将图像转换为SVG格式。

{
  "input_path": "/path/to/image.png",
  "output_path": "./vector.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为development
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

🔍 开发

本地设置

克隆并安装依赖项：

npm install

创建包含您的API密钥的.env文件

SVGMAKER_API_KEY="你的API密钥"

在开发模式下运行：

npm run dev

测试

使用MCP Inspector进行测试：

npx @modelcontextprotocol/inspector node build/index.js

CI/CD 工作流程

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

持续集成
- 在主分支推送和拉取请求时运行
- 执行代码检查、类型检查和构建
- 确保代码质量和一致性
发布新版本
- 发布补丁版本（修复错误）：
```
npm run release:patch
```
- 发布次要版本（新功能）：
```
npm run release:minor
```
- 发布主要版本（重大更改）：
```
npm run release:major
```
发布
- 当新的版本标签被推送到时自动发布到npm

🔐 安全性

✅ 路径验证防止目录遍历
✅ 输入参数的清理
✅ 安全的文件操作处理
✅ 环境变量保护
✅ 支持速率限制