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
- Go to Settings > Features > MCP.
- Add a new server:
- Name:
svg-maker - Type:
command - Command:
npx tsx /absolute/path/to/svg-mcp-server-ts/src/index.ts
- Name:
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
-
Install Dependencies:
npm install -
Run Locally:
npm start -
Build:
npm run build