SVG Maker MCP Server (TypeScript)

A robust Model Context Protocol (MCP) server for creating, rendering, converting, and optimizing SVG images.

Features

• Render SVG: Validate and convert SVG code to high-quality PNG images (returned as image content).

• Optimize SVG: Minify and optimize SVG code using svgo.

• Convert to React: Generate React functional components from SVG code using @svgr/core.

• Convert to React Native: Generate React Native SVG components.

• Format SVG: Prettify SVG code.

• Data URI: Convert SVG to base64 Data URI.

• Validate SVG: Check for XML errors and standard SVG compliance.

• Get Metadata: Extract dimensions and title.

Configuration

To use this server with your favorite MCP client (like Claude Desktop, Cursor, Gemini CLI, etc.), use the following settings.

1. Claude Desktop / Gemini CLI

Add this to your configuration file (e.g., ~/.gemini/settings.json or claude_desktop_config.json):

2. Cursor

1. Go to Settings > Features > MCP.

2. Add a new server:

   • Name: svg-maker

   • Type: command

   • Command: npx tsx /absolute/path/to/svg-mcp-server-ts/src/index.ts

Tools

render_svg

• Arguments: svg_code (str), width (number, opt), height (number, opt)

• Returns: Image Content (PNG).

• Description: Renders SVG to PNG. IMPORTANT: Always use this to preview generated SVGs to ensure they match visual intent.

save_svg_to_server

• Arguments: svg_code (str), filename (str), optimize (boolean)

• Returns: Text (Success/Error).

• Description: Saves the SVG to the SERVER'S disk. Only use for local servers.

get_svg_code

• Arguments: svg_code (str), optimize (boolean)

• Returns: String (SVG Code).

• Description: Returns SVG code (optionally optimized) for the AI to save to your local machine.

optimize_svg

• Arguments: svg_code (str)

• Description: Optimizes SVG size using SVGO.

format_svg

• Arguments: svg_code (str)

• Description: Formats SVG with indentation.

svg_to_react

• Arguments: svg_code (str), component_name (str)

• Returns: String (JSX code).

svg_to_react_native

• Arguments: svg_code (str), component_name (str)

• Returns: String (React Native JSX).

svg_to_data_uri

• Arguments: svg_code (str)

• Returns: String (Base64 Data URI).

validate_svg

• Arguments: svg_code (str)

• Returns: JSON object with validation status.

get_svg_metadata

• Arguments: svg_code (str)

• Returns: JSON object with metadata.

Development

1. Install Dependencies:

   npm install

2. Run Locally:

   npm start

3. Build:

   npm run build