SVG Converter

🚀 MCP SVG 使用指南

MCP SVG 是一个强大的工具，可将 SVG 代码转换为高质量的 PNG 和 JPG 图像。以下为你详细介绍其安装、配置、使用等方面的内容。

🚀 快速开始

安装与配置

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. 使用 npm 进行全局安装：

   npm install -g mcp-svg-converter
   

2. 检查全局安装情况，确保 node_modules 目录存在于用户主目录下，如 /Users/yourusername/node_modules。

配置过程

1. 创建配置文件 mcp-config.json，可放在项目根目录或任意位置，内容如下：

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

2. 对配置文件中的参数进行说明：
   • command：指定执行命令，可使用 npx 或直接使用可执行文件路径。
   • args：命令的参数列表，依次为工具名称和允许的输出目录。
   • allowedOutputPaths：允许写入的文件夹路径。

启动服务器

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

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

这里的参数为允许写入的文件夹路径。

💻 使用示例

基础用法

示例 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 官方网站 获取更多帮助或深入文档。