MCP SVG Converter

You can run MCP SVG Converter as a local, configurable server that turns SVG code into high-quality PNG or JPG images. It preserves original dimensions, supports high-resolution scaling, and safely writes outputs to approved directories. This guide shows you how to install, start, and use the server with an MCP client to automate SVG conversions.

How to use

Use the MCP SVG Converter server from your MCP client to convert SVG code into PNG or JPG images. You specify the SVG, choose the output format, and provide an output directory that is allowed by the server. The server handles image generation with options for background color, scale, and JPEG quality. If you request saving to a non-allowed directory, the server automatically redirects the output to an approved directory and informs you where the file was actually stored.

How to install

Prerequisites you need before installing include Node.js 16 or higher and npm or yarn.

# Quick install with npx
npx mcp-svg-converter /path/to/allowed/directory

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

Usage patterns and setup notes

Run the server as a standalone process and point it to one or more allowed output directories. The server will write converted images only to those directories.

If you are integrating with an MCP client like Claude Desktop, you can configure a local stdio MCP server that runs the converter and exposes its tools through MCP endpoints.

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

Examples in practical use

Example 1: Convert a simple SVG to PNG and save to your 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>

Advanced usage tips

You can specify multiple allowed output directories to provide flexible file saving locations.

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

Automatic path redirection and filenames

If you request saving to a directory that isn’t allowed, the converter automatically redirects the output to an allowed directory and informs you of the actual save location.

Troubleshooting

If you don’t see MCP tools or the converter isn’t responding, check that the server is running with the correct output directory permissions, and verify the startup command includes the path to the built index.js.

Debugging

You can use the MCP Inspector to test all available tools directly without Claude Desktop by launching the inspector with the appropriate command.

Security considerations

The server writes files only to directories specified at startup. Path validation prevents directory traversal, and automatic redirection keeps all outputs within allowed locations.

License

MIT license.

Available tools

svg-to-png

Converts SVG code to a high-quality PNG image with transparency support. Parameters include svgCode, outputPath, optional backgroundColor, and optional scale.

svg-to-jpg

Converts SVG code to a high-quality JPG image. Parameters include svgCode, outputPath, optional backgroundColor, optional quality (1-100), and optional scale.