MCP SVG to Image

MCP server for converting SVG files to raster images (PNG/JPEG/WebP) so that LLMs can visually analyze SVG content.

Features

• Convert SVG files to PNG, JPEG, or WebP formats
• Configurable dimensions and background colors
• Fast conversion using Sharp library
• Returns converted image directly for LLM analysis

Installation

Install globally via npm:

npm install -g mcp-svg-to-image

Or use with npx (no installation required):

npx mcp-svg-to-image

Configuration

Add this MCP server to your MCP-compatible client configuration:

Cursor (~/.cursor/mcp.json):

{
  "mcpServers": {
    "mcp-svg-to-image": {
      "command": "npx",
      "args": ["-y", "mcp-svg-to-image"]
    }
  }
}

Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "mcp-svg-to-image": {
      "command": "npx",
      "args": ["-y", "mcp-svg-to-image"]
    }
  }
}

Alternative (if installed globally):

{
  "mcpServers": {
    "mcp-svg-to-image": {
      "command": "mcp-svg-to-image"
    }
  }
}

Usage

The MCP server provides one tool:

convert_svg_to_image

Converts an SVG file to a raster image format.

Parameters:

• svg_path (required): Absolute path to the SVG file
• output_format (optional): Output format - "png", "jpeg", or "webp" (default: "png")
• width (optional): Output width in pixels (default: 1920)
• height (optional): Output height in pixels (maintains aspect ratio if not specified)
• background (optional): Background color - "transparent", "white", or hex like "#ffffff" (default: "transparent")

Example:

{
  "name": "convert_svg_to_image",
  "arguments": {
    "svg_path": "/path/to/image.svg",
    "output_format": "png",
    "width": 1920,
    "background": "transparent"
  }
}

Returns:

• Text message with conversion details
• Base64-encoded image that the LLM can analyze visually

How It Works

1. Reads the SVG file from the specified path
2. Uses Sharp library to render the SVG
3. Converts to the specified raster format
4. Returns the converted image for visual analysis

Requirements

• Node.js >= 18.0.0
• npm or npx

Dependencies

• @modelcontextprotocol/sdk: MCP SDK for building MCP servers
• sharp: High-performance image processing library
• zod: TypeScript-first schema validation

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Issues

If you encounter any problems, please file an issue on GitHub.

License

MIT

Related

• Model Context Protocol
• MCP Specification
• Sharp Image Processing