关键词

SVGPNGJPG图像转换矢量图格式转换

项目简介

本项目是一个基于 Model Context Protocol (MCP) 的服务器实现，专注于将 SVG 矢量图形转换为 PNG 和 JPG 位图图像。它通过 MCP 协议与 LLM 客户端（如 Claude Desktop）通信，提供 'svg-to-png' 和 'svg-to-jpg' 两个工具，允许 LLM 应用方便地将 SVG 代码转换为可以在各种场景下使用的图像格式。服务器端负责安全地处理文件存储，并允许用户自定义转换参数，如图像质量、缩放比例和背景颜色。

主要功能点

  • SVG 到 PNG 转换: 将 SVG 代码转换为高质量的 PNG 图像，支持透明背景。
  • SVG 到 JPG 转换: 将 SVG 代码转换为高质量的 JPG 图像，可自定义图像质量和背景颜色。
  • 灵活的输出配置: 支持设置输出图像的缩放比例，调整图像分辨率。
  • 安全的文件管理: 只允许将转换后的图像保存到预先配置的目录中，保障文件系统的安全。
  • 易于集成: 可以通过简单的配置与支持 MCP 协议的 LLM 客户端（如 Claude Desktop）集成，扩展 LLM 的图像处理能力。

安装步骤

本仓库提供了多种安装方式：

1. 使用 npx 快速安装 (推荐):

如果你只是想快速体验或集成到 Claude Desktop，推荐使用 'npx' 直接运行，无需全局安装。

npx mcp-svg-converter <允许的输出目录>

例如：

npx mcp-svg-converter ~/Desktop/svg-output

2. 全局安装:

如果你希望更方便地从命令行启动服务器，可以进行全局安装。

npm install -g mcp-svg-converter
mcp-svg-converter <允许的输出目录>

例如：

npm install -g mcp-svg-converter
mcp-svg-converter ~/Desktop/svg-output

3. 从源代码安装:

如果你需要修改代码或进行更深入的定制，可以选择从源代码安装。

git clone https://github.com/surferdot/mcp-svg-converter.git
cd mcp-svg-converter
npm install
npm run build
node build/index.js <允许的输出目录>

例如：

git clone https://github.com/surferdot/mcp-svg-converter.git
cd mcp-svg-converter
npm install
npm run build
node build/index.js ~/Desktop/svg-output

注意: '<允许的输出目录>' 是你需要替换的实际路径，用于指定允许服务器保存转换后图像的目录。为了安全，你可以指定多个允许目录。

服务器配置 (Claude Desktop 客户端)

要将此 MCP 服务器与 Claude Desktop 客户端配合使用，你需要编辑 Claude Desktop 的配置文件 'claude_desktop_config.json'，添加 'mcpServers' 配置。根据你的安装方式，选择相应的配置添加到配置文件中：

使用 npx 快速安装 (推荐):

{
  "mcpServers": {
    "svg-converter": {
      "command": "npx",
      "args": [
        "mcp-svg-converter",
        "/absolute/path/to/output/directory"  //  请替换为你的允许输出目录的绝对路径，例如: "/Users/yourusername/Desktop/svg-output" (macOS/Linux) 或 "C:\\Users\\YourUsername\\Desktop\\svg-output" (Windows)
      ]
    }
  }
}

使用全局安装:

{
  "mcpServers": {
    "svg-converter": {
      "command": "mcp-svg-converter",
      "args": [
        "/absolute/path/to/output/directory"  //  请替换为你的允许输出目录的绝对路径，例如: "/Users/yourusername/Desktop/svg-output" (macOS/Linux) 或 "C:\\Users\\YourUsername\\Desktop\\svg-output" (Windows)
      ]
    }
  }
}

使用本地构建:

{
  "mcpServers": {
    "svg-converter": {
      "command": "node",
      "args": [
        "/absolute/path/to/mcp-svg-converter/build/index.js", // 请替换为你的 mcp-svg-converter 项目 build 目录下的 index.js 文件的绝对路径
        "/absolute/path/to/output/directory"  //  请替换为你的允许输出目录的绝对路径，例如: "/Users/yourusername/Desktop/svg-output" (macOS/Linux) 或 "C:\\Users\\YourUsername\\Desktop\\svg-output" (Windows)
      ]
    }
  }
}

配置步骤:

  1. 打开 Claude Desktop 配置文件: 按照 README.md 中的指引找到 'claude_desktop_config.json' 文件。
  2. 编辑配置文件: 复制上面对应安装方式的 JSON 配置代码段，粘贴到 'claude_desktop_config.json' 文件中的 'mcpServers' 字段中 (如果不存在 'mcpServers' 字段，请手动创建)。
  3. 替换路径: 将配置代码中的 '/absolute/path/to/output/directory' 替换为你实际的允许输出目录的绝对路径。 确保路径是绝对路径。
  4. 保存并重启 Claude Desktop: 保存 'claude_desktop_config.json' 文件，并完全退出 Claude Desktop 客户端，然后重新启动。

重启后，如果配置正确，在 Claude Desktop 的输入框下方会显示一个锤子图标，点击后应该能看到 'svg-to-png' 和 'svg-to-jpg' 两个工具。

基本使用方法 (Claude Desktop 客户端)

在 Claude Desktop 中，你可以通过自然语言指令来调用 'svg-converter' 服务器提供的工具。例如：

将 SVG 转换为 PNG:

请将以下 SVG 代码转换为 PNG 图片，并保存到我的输出目录：

<svg>
  ... 你的 SVG 代码 ...
</svg>

将 SVG 转换为 JPG 并指定质量和缩放:

请将以下 SVG 代码转换为 JPG 图片，质量设置为 90%，缩放比例为 2，并保存到我的输出目录：

<svg>
  ... 你的 SVG 代码 ...
</svg>

你还可以通过更明确的指令来指定输出文件名和更详细的参数，具体可以参考 README.md 中的示例。

注意: 在 Claude Desktop 中使用工具时，请确保你的指令中包含了有效的 SVG 代码，并告知 Claude Desktop 将转换后的图片保存到 "你的输出目录"。服务器会自动将文件保存到你配置的允许输出目录中，并返回保存路径等信息。

信息

分类

AI与计算

访问项目