SVG Converter

🚀 MCP SVG Usage Guide

MCP SVG is a powerful tool designed to convert SVG code into high-quality PNG and JPG images. This guide provides a detailed walkthrough on how to install, configure, and use MCP SVG effectively.

🚀 Quick Start

✨ Features

• Supported Formats: Convert SVG to PNG and JPG.
• Advanced Features: Customize background color, scale images, control JPEG quality, and enable automatic path redirection.

📦 Installation

1. Install via npm:

   npm install -g mcp-svg-converter
   

2. Verify Global Installation: Ensure that the node_modules directory exists in your user's home directory, for example: /Users/yourusername/node_modules

Configuration

Create a Configuration File

Create a file named mcp-config.json in the project root directory or any location, and add the following content:

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

Configuration Explanation

• command: Specify the execution command (e.g., npx or the direct path to the executable file).
• args: A list of command arguments, including the tool name and allowed output directories.
• allowedOutputPaths: Folders where writing is permitted.

Start the Server

Run the following command in the terminal to start the MCP server:

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

Parameter Explanation

• Output Directory: Specify the folders where writing is allowed.

💻 Usage Examples

Basic Usage

Example 1: Convert to 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
}

Example 2: Convert to 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
}

📚 Documentation

Parameter Explanation

Common Parameters

• svgCode: A string of SVG code.
• outputPath: The path to the output file.

Format-Specific Parameters

• PNG:
  • backgroundColor: Background color (default is transparent).
• JPG:
  • quality: Image quality, ranging from 0 - 100 (default is 85).

Troubleshooting

Common Issues

1. Permission Issues: Ensure that the output directory has write permissions.
2. Path Errors: Check if the output path is correct.

Solutions

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

Tool Check

MCP provides a checking tool to verify the configuration file and server status:

npx mcp-inspector

Example Check Result

{
  "status": "success",
  "message": "All configuration parameters are valid"
}

More Information

For more help or in-depth documentation, please visit MCP Official Website.