MCP-SVG转换器

@surferdot/mcp-svg-converter

0 Stars 97 次浏览 surferdot 更新于 2026-08-23

一种模型上下文协议服务器，提供将SVG代码转换为高质量PNG和JPG图像的工具，并具有详细的自定义选项。

MCP 服务配置

复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用

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

服务介绍

MCP SVG 转换器

English | 中文

中文

这是一个 Model Context Protocol (MCP) 服务器，提供了将 SVG 代码转换为高质量 PNG 和 JPG 图像的工具，并支持详细的自定义选项。

功能

将 SVG 代码转换为支持透明度的高质量 PNG 图像
将 SVG 代码转换为可自定义质量设置的高质量 JPG 图像
自动检测并保留原始 SVG 的尺寸
支持缩放到更高分辨率
背景颜色自定义
智能路径处理，自动重定向到允许的目录
可配置权限的安全文件系统访问

安装

使用 npx 快速安装

npx mcp-svg-converter /path/to/allowed/directory

全局安装

npm install -g mcp-svg-converter
mcp-svg-converter /path/to/allowed/directory

从源代码安装

前提条件

Node.js 16 或更高版本
npm 或 yarn

安装步骤

克隆此仓库

git clone https://github.com/surferdot/mcp-svg-converter.git
cd mcp-svg-converter

安装依赖项
```
npm install
```
构建项目
```
npm run build
```

使用方法

作为独立服务器使用

通过指定一个或多个允许保存转换后图像的目录来运行服务器：

node build/index.js /path/to/allowed/directory1 /path/to/allowed/directory2

与 Claude Desktop 一起使用

下载并安装 Claude Desktop

创建或确认你有权访问输出目录：

# macOS/Linux
mkdir -p ~/Desktop/svg-output

# Windows
mkdir "%USERPROFILE%\Desktop\svg-output"

通过编辑配置文件来配置 Claude Desktop：
- macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json
打开 Claude 应用程序，点击系统菜单栏中的 Claude 菜单并选择 "Settings..."
在左侧边栏中点击 "Developer"
点击 "Edit Config" 以打开配置文件
添加以下服务器配置：

使用 npx 包（推荐）

{
  "mcpServers": {
    "svg-converter": {
      "command": "npx",
      "args": [
        "mcp-svg-converter",
        "/absolute/path/to/output/directory"
      ]
    }
  }
}

使用全局安装

如果你已经全局安装了该包：

{
  "mcpServers": {
    "svg-converter": {
      "command": "mcp-svg-converter",
      "args": [
        "/absolute/path/to/output/directory"
      ]
    }
  }
}

使用本地构建

如果你是从源代码构建的：

{
  "mcpServers": {
    "svg-converter": {
      "command": "node",
      "args": [
        "/absolute/path/to/mcp-svg-converter/build/index.js",
        "/absolute/path/to/output/directory"
      ]
    }
  }
}

保存文件并重启 Claude Desktop

验证设置

当 Claude Desktop 重新启动时，如果配置正确：

你应该在输入框右下角看到一个锤子图标，表示 MCP 工具可用。
点击锤子图标应该会显示 svg-to-png 和 svg-to-jpg 工具。

Claude Desktop 中的示例

示例 1：将简单的 SVG 转换为 PNG

在 Claude Desktop 中，发送如下消息：

Please convert this SVG to PNG and save it to my output directory:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200" height="100">
  <rect x="10" y="10" width="80" height="80" fill="#4285f4" />
  <circle cx="140" cy="50" r="40" fill="#ea4335" />
  <path d="M10 50 L90 50 L50 90 Z" fill="#fbbc05" />
  <text x="100" y="20" font-family="Arial" font-size="12" text-anchor="middle" fill="#34a853">SVG Example</text>
</svg>

示例 2：高质量 JPG 转换

Please convert this SVG to a JPG with 95% quality and 2x scaling:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect width="200" height="200" fill="#f0f0f0" />
  <circle cx="100" cy="100" r="80" fill="#ff6b6b" />
  <path d="M100 50 L130 150 L70 150 Z" fill="white" />
</svg>

工具

svg-to-png

将 SVG 代码转换为支持透明度的高质量 PNG 图像。

参数：

svgCode (字符串，必需)：要转换的 SVG 代码
outputPath (字符串，必需)：PNG 文件应保存的路径
backgroundColor (字符串，可选)：背景颜色（默认：透明）
scale (数字，可选)：用于更高分辨率的比例因子（默认：1）

svg-to-jpg

将 SVG 代码转换为高质量 JPG 图像。

参数：

svgCode (字符串，必需)：要转换的 SVG 代码
outputPath (字符串，必需)：JPG 文件应保存的路径
backgroundColor (字符串，可选)：背景颜色（默认：白色）
quality (数字，可选)：JPEG 质量从 1-100（默认：90）
scale (数字，可选)：用于更高分辨率的比例因子（默认：1）

高级使用技巧

指定多个输出目录

你可以指定多个允许的输出目录，以实现更灵活的文件保存：

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

使用自定义输出文件名

在请求中指定详细的文件路径：

Please convert this SVG to PNG, and save it as "colorful_shapes.png" in my output directory.

<svg>...</svg>

自动路径重定向

如果你请求保存到不允许的目录，转换器会自动重定向到允许的目录，并通知你实际的保存位置。

故障排除

Claude 不显示 MCP 工具图标

确认配置文件具有正确的 JSON 语法
确保所有路径都是绝对路径
确保输出目录存在且可写
完全退出并重新启动 Claude Desktop
检查 Claude 日志：
- macOS: ~/Library/Logs/Claude/mcp*.log
- Windows: %APPDATA%\Claude\logs\mcp*.log

工具执行失败

确保 mcp-svg-converter 正确安装
检查输出目录权限
确认 SVG 代码有效
检查 Claude 日志中的详细错误信息

"命令未找到" 错误

确保 mcp-svg-converter 全局安装或正确引用 npx
确认 npm 的全局 bin 目录在你的 PATH 中
尝试在配置中使用完整路径

调试

你可以使用 MCP Inspector 直接调试和测试服务器：

npx @modelcontextprotocol/inspector npx mcp-svg-converter /path/to/allowed/directory

这将打开一个交互界面，你可以在不通过 Claude Desktop 的情况下测试所有可用工具。

安全考虑

服务器只会将文件写入启动服务器时指定的目录
如果用户尝试保存到不允许的目录，文件将自动重定向到允许的目录
通过适当的路径验证防止路径遍历攻击

许可证

MIT

中文

MCP SVG 转换器是一个基于模型上下文协议 (MCP) 的服务器，提供将 SVG 代码转换为高质量 PNG 和 JPG 图像的工具，支持详细的自定义选项。

特点

将 SVG 代码转换为支持透明度的高质量 PNG 图像
将 SVG 代码转换为可定制质量设置的高质量 JPG 图像
自动检测并保留原始 SVG 的尺寸
支持缩放到更高分辨率
可自定义背景颜色
智能路径处理，自动重定向到允许的目录
可配置权限的安全文件系统访问

安装

使用 npx 快速安装

npx mcp-svg-converter /path/to/allowed/directory

全局安装

npm install -g mcp-svg-converter
mcp-svg-converter /path/to/allowed/directory

从源代码安装

前提条件

Node.js 16 或更高版本
npm 或 yarn

安装步骤

克隆此仓库

git clone https://github.com/surferdot/mcp-svg-converter.git
cd mcp-svg-converter

安装依赖
```
npm install
```
构建项目
```
npm run build
```

使用方法

作为独立服务器运行

通过指定一个或多个允许存储转换后图像的目录来运行服务器：

node build/index.js /path/to/allowed/directory1 /path/to/allowed/directory2

与 Claude Desktop 一起使用

下载并安装 Claude Desktop

创建或确认你有权限访问的输出目录：

# macOS/Linux
mkdir -p ~/Desktop/svg-output

# Windows
mkdir "%USERPROFILE%\Desktop\svg-output"

配置 Claude Desktop：
- 打开 Claude 应用程序
- 点击系统菜单栏中的 Claude 图标
- 选择"Settings..."（设置）
- 在左侧菜单中选择"Developer"（开发者）
- 点击"Edit Config"（编辑配置）按钮
编辑配置文件：
- macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json
添加服务器配置：

使用 npm 包与 npx（推荐）

{
  "mcpServers": {
    "svg-converter": {
      "command": "npx",
      "args": [
        "mcp-svg-converter",
        "/absolute/path/to/output/directory"
      ]
    }
  }
}

使用全局安装

如果你已全局安装了此包：

{
  "mcpServers": {
    "svg-converter": {
      "command": "mcp-svg-converter",
      "args": [
        "/absolute/path/to/output/directory"
      ]
    }
  }
}

使用本地构建

如果你从源代码构建：

{
  "mcpServers": {
    "svg-converter": {
      "command": "node",
      "args": [
        "/absolute/path/to/mcp-svg-converter/build/index.js",
        "/absolute/path/to/output/directory"
      ]
    }
  }
}

保存文件并重启 Claude Desktop

验证设置

当 Claude Desktop 重启后，如果配置正确：

你应该在输入框右下角看到一个锤子图标，表示 MCP 工具可用。
点击锤子图标应显示 svg-to-png 和 svg-to-jpg 工具。

Claude Desktop 中的使用示例

示例 1：将简单 SVG 转换为 PNG

在 Claude Desktop 中发送以下消息：

请将这个 SVG 转换为 PNG 并保存到我的输出目录：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200" height="100">
  <rect x="10" y="10" width="80" height="80" fill="#4285f4" />
  <circle cx="140" cy="50" r="40" fill="#ea4335" />
  <path d="M10 50 L90 50 L50 90 Z" fill="#fbbc05" />
  <text x="100" y="20" font-family="Arial" font-size="12" text-anchor="middle" fill="#34a853">SVG 示例</text>
</svg>

示例 2：高质量 JPG 转换

请将这个 SVG 转换为 95% 质量和 2 倍缩放的 JPG 图像：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect width="200" height="200" fill="#f0f0f0" />
  <circle cx="100" cy="100" r="80" fill="#ff6b6b" />
  <path d="M100 50 L130 150 L70 150 Z" fill="white" />
</svg>

工具

svg-to-png

将 SVG 代码转换为支持透明度的高质量 PNG 图像。

参数：

svgCode (字符串，必需)：要转换的 SVG 代码
outputPath (字符串，必需)：PNG 文件的保存路径
backgroundColor (字符串，可选)：背景颜色 (默认：透明)
scale (数字，可选)：更高分辨率的缩放因子 (默认：1)

svg-to-jpg

将 SVG 代码转换为高质量 JPG 图像。

参数：

svgCode (字符串，必需)：要转换的 SVG 代码
outputPath (字符串，必需)：JPG 文件的保存路径
backgroundColor (字符串，可选)：背景颜色 (默认：白色)
quality (数字，可选)：JPEG 质量，范围从 1 到 100 (默认：90)
scale (数字，可选)：更高分辨率的缩放因子 (默认：1)

高级使用技巧

指定多个输出目录

你可以指定多个允许的输出目录，以提供更灵活的文件保存选项：

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

使用自定义输出文件名

在请求中指定详细的文件路径：

请将这个 SVG 转换为 PNG，并以文件名 "colorful_shapes.png" 保存到输出目录。

<svg>...</svg>

自动路径重定向

如果你请求保存到一个不允许的目录，转换器会自动将文件重定向到允许的目录，并在响应中告知你实际的保存位置。

故障排除

Claude 没有显示 MCP 工具图标

确认配置文件格式正确（JSON 语法）
检查所有路径是否为绝对路径
确保输出目录存在且可写
完全退出并重启 Claude Desktop
检查 Claude 日志：
- macOS: ~/Library/Logs/Claude/mcp*.log
- Windows: %APPDATA%\Claude\logs\mcp*.log

工具执行失败

确保已正确安装 mcp-svg-converter
检查输出目录的权限
验证 SVG 代码是否有效
检查 Claude 日志了解详细错误信息

"command not found" 错误

确保已全局安装 mcp-svg-converter 或正确引用 npx
确认 npm 的全局 bin 目录在系统 PATH 中
尝试在配置中使用完整路径

调试

您可以使用 MCP Inspector 直接调试和测试服务器：

npx @modelcontextprotocol/inspector npx mcp-svg-converter /path/to/allowed/directory

这将打开一个交互式界面，你可以在其中测试所有可用工具，而无需通过 Claude Desktop。

安全考虑

服务器只会将文件写入启动服务器时指定的目录
如果用户尝试保存到非允许目录，文件将自动重定向到允许的目录
通过适当的路径验证防止路径遍历攻击

许可证

MIT

查看源码项目主页

MCP 服务配置

服务介绍

MCP SVG 转换器

中文

功能

安装

使用 npx 快速安装

全局安装

从源代码安装

前提条件

安装步骤

使用方法

作为独立服务器使用

与 Claude Desktop 一起使用

使用 npx 包（推荐）

使用全局安装

使用本地构建

验证设置

Claude Desktop 中的示例

示例 1：将简单的 SVG 转换为 PNG

示例 2：高质量 JPG 转换

工具

svg-to-png

svg-to-jpg

高级使用技巧

指定多个输出目录

使用自定义输出文件名

自动路径重定向

故障排除

Claude 不显示 MCP 工具图标

工具执行失败

"命令未找到" 错误

调试

安全考虑

许可证

中文

特点

安装

使用 npx 快速安装

全局安装

从源代码安装

前提条件

安装步骤

使用方法

作为独立服务器运行

与 Claude Desktop 一起使用

使用 npm 包与 npx（推荐）

使用全局安装

使用本地构建

验证设置

Claude Desktop 中的使用示例

示例 1：将简单 SVG 转换为 PNG

示例 2：高质量 JPG 转换

工具

svg-to-png

svg-to-jpg

高级使用技巧

指定多个输出目录

使用自定义输出文件名

自动路径重定向

故障排除

Claude 没有显示 MCP 工具图标

工具执行失败

"command not found" 错误

调试

安全考虑

许可证

开源版 与 企业版

企业版（含 FDE 交付）

技能定制开发服务

开源版与企业版