MCP SVG 使用指南

安装与配置

MCP SVG 是一个功能强大的工具，用于将 SVG 代码转换为高质量的 PNG 和 JPG 图像。以下是安装和配置的详细步骤：

安装

1. 使用 npm 安装：

   npm install -g mcp-svg-converter
   

2. 全局安装检查： 确保 node_modules 目录存在于你的用户主目录下，例如：/Users/yourusername/node_modules

配置

创建配置文件

在项目根目录或任意位置创建一个名为 mcp-config.json 的文件，并添加以下内容：

{
  "tools": {
    "svg-converter": {
      "command": "npx",
      "args": [
        "mcp-svg-converter"
      ],
      "allowedOutputPaths": [
        "/Users/yourusername/Desktop/svg-output",
        "/Users/yourusername/Documents/svg-images"
      ]
    }
  }
}

配置说明

• command: 指定执行命令（如 npx 或直接使用可执行文件路径）
• args: 命令的参数列表，依次为工具名称和允许的输出目录
• allowedOutputPaths: 允许写入的文件夹路径

启动服务器

在终端中运行以下命令启动 MCP 服务器：

npx mcp-svg-converter /Users/yourusername/Desktop/svg-output /Users/yourusername/Documents/svg-images

参数说明

• 输出目录: 指定允许写入的文件夹路径

功能概述

支持格式

• SVG 转 PNG
• SVG 转 JPG

高级功能

• 自定义背景颜色
• 图像缩放
• JPEG 质量控制
• 自动路径重定向

使用示例

示例 1: 转换为 PNG

{
  "svgCode": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\">\n  <rect width=\"200\" height=\"200\" fill=\"#f0f0f0\" />\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"#ff6b6b\" />\n  <path d=\"M100 50 L130 150 L70 150 Z\" fill=\"white\" />\n</svg>",
  "outputPath": "/Users/yourusername/Desktop/output.png",
  "backgroundColor": "#ffffff",
  "scale": 2
}

示例 2: 转换为 JPG

{
  "svgCode": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\">\n  <rect width=\"200\" height=\"200\" fill=\"#f0f0f0\" />\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"#ff6b6b\" />\n  <path d=\"M100 50 L130 150 L70 150 Z\" fill=\"white\" />\n</svg>",
  "outputPath": "/Users/yourusername/Desktop/output.jpg",
  "quality": 90
}

参数说明

公共参数

• svgCode: SVG 代码字符串
• outputPath: 输出文件路径

特定格式参数

• PNG:
  • backgroundColor: 背景颜色（默认透明）
• JPG:
  • quality: 图像质量，范围为 0-100（默认 85）

故障排除

常见问题

1. 权限问题: 确保输出目录有写入权限。
2. 路径错误: 检查输出路径是否正确。

解决方法

chmod 755 /Users/yourusername/Desktop/svg-output

工具检查

MCP 提供了一个检查工具来验证配置文件和服务器状态：

npx mcp-inspector

检查结果示例

{
  "status": "success",
  "message": "所有配置参数均有效"
}

更多信息

如需更多帮助或深入文档，请访问 MCP 官方网站。