MCP SVG Converter

MCP SVG转换器

](https://www.npmjs.com/package/mcp-svg-converter) ](https://www.npmjs.com/package/mcp-svg-converter) 

英语 | 中文

英语

一种模型上下文协议（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或纱线

安装步骤

1. 克隆此存储库

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

1. 安装依赖项

   npm install

1. 构建项目

   npm run build

用法

作为独立服务器

通过指定一个或多个允许的目录来运行服务器，转换后的图像可以保存在这些目录中：

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

使用克劳德桌面

1. 下载并安装 克劳德桌面

1. 创建或确认您有权访问输出目录：

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

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

1. 通过编辑配置文件配置Claude Desktop：

- macOS： ~/Library/Application Support/Claude/claude_desktop_config.json - 窗户： %APPDATA%\Claude\claude_desktop_config.json

1. 打开Claude应用程序，单击系统菜单栏中的Claude菜单，然后选择“设置…”

1. 点击左侧边栏中的“开发人员”

1. 点击“编辑配置”打开配置文件

1. 添加此服务器配置：

使用npx的npm包（推荐）

{
  "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"
      ]
    }
  }
}

1. 保存文件并重新启动Claude Desktop

验证设置

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

1. 你应该看到一个锤子图标 在输入框的右下角，指示MCP工具可用。
2. 点击锤子图标应显示 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 Example

示例2：高质量JPG转换

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

  
  
  

工具

svg转换为png

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

参数：

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

svg转jpg

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

参数：

• svgCode （string，必填）：要转换的SVG代码
• outputPath （string，必填）：保存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.

...

自动路径重定向

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

故障排除

Claude不显示MCP工具图标

1. 验证配置文件是否具有正确的JSON语法
2. 确保所有路径都是绝对路径
3. 确保输出目录存在并且可写
4. 完全退出并重新启动Claude Desktop
5. 检查克劳德日志：

- macOS： ~/Library/Logs/Claude/mcp*.log - 窗户： %APPDATA%\Claude\logs\mcp*.log

工具执行失败

1. 确保 mcp-svg-converter 已正确安装
2. 检查输出目录权限
3. 验证SVG代码是否有效
4. 检查Claude日志以获取详细的错误消息

“找不到命令”错误

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

调试

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

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

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

安全考虑

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

许可证

麻省理工学院

______________________________________________________________________

中文

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

安装步骤

1. 克隆此仓库

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

1. 安装依赖

   npm install

1. 构建项目

   npm run build

使用方法

作为独立服务器运行

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

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

与 Claude Desktop 一起使用

1. 下载并安装 克劳德桌面

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

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

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

1. 配置 Claude Desktop：

- 打开 Claude 应用程序 - 点击系统菜单栏中的 Claude 图标 - 选择"Settings..."（设置） - 在左侧菜单中选择"Developer"（开发者） - 点击"Edit Config"（编辑配置）按钮

1. 编辑配置文件：

- macOS： ~/Library/Application Support/Claude/claude_desktop_config.json - 窗户： %APPDATA%\Claude\claude_desktop_config.json

1. 添加服务器配置：

使用 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"
      ]
    }
  }
}

1. 保存文件并重启 Claude Desktop

验证设置

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

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

Claude Desktop 中的使用示例

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

在 Claude Desktop 中发送以下消息：

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

  
  
  

  SVG 示例

示例 2：高质量 JPG 转换

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

  
  
  

工具

svg转换为png

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

参数：

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

svg转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" 保存到输出目录。

...

自动路径重定向

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

故障排除

Claude 没有显示 MCP 工具图标

1. 确认配置文件格式正确（JSON 语法）
2. 检查所有路径是否为绝对路径
3. 确保输出目录存在且可写
4. 完全退出并重启 Claude Desktop
5. 检查 Claude 日志：

- macOS： ~/Library/Logs/Claude/mcp*.log - 窗户： %APPDATA%\Claude\logs\mcp*.log

工具执行失败

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

“找不到命令”错误

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

调试

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

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

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

安全考虑

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

许可证

麻省理工学院