# SVG Maker MCP Server (TypeScript)

[![smithery badge](https://smithery.ai/badge/erkamkavak/svg-maker-mcp)](https://smithery.ai/server/erkamkavak/svg-maker-mcp)

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

```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**:
   ```bash
   npm install
   ```

2. **Run Locally**:
   ```bash
   npm start
   ```

3. **Build**:
   ```bash
   npm run build
   ```