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):

{
  "mcpServers": {
    "svg-maker": {
      "command": "npx",
      "args": ["tsx", "/absolute/path/to/svg-mcp-server-ts/src/index.ts"]
    }
  }
}

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