SVG to Vector Drawable MCP Server

MCP (Model Context Protocol) server for converting SVG files to Android Vector Drawable XML format.

Features

• ✅ Converts SVG files to Android Vector Drawable XML
• ✅ Supports local files and remote URLs
• ✅ Handles common SVG shapes: path, rect, circle, polygon, line
• ✅ Converts shapes to path elements
• ✅ Preserves stroke and fill properties
• ✅ Handles CSS styles and presentation attributes

Installation

From npm (recommended)

npm install -g svg2vector-mcp

From source

git clone <your-repo>
cd svg2vector-mcp
npm install
npm link

Usage

As an MCP Server

Add to your MCP client configuration (e.g., Claude Desktop):

MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "svg2vector": {
      "command": "svg2vector-mcp"
    }
  }
}

Or if installed from source:

{
  "mcpServers": {
    "svg2vector": {
      "command": "node",
      "args": ["/path/to/svg2vector-mcp/src/index.js"]
    }
  }
}

Available Tools

convert_svg_to_vector

Converts an SVG file to Android Vector Drawable XML format.

Parameters:

• svgPath (string, required): Path to SVG file (local path or URL)
• outputPath (string, required): Output path for the generated XML file

Example:

// Convert local SVG file
{
  "svgPath": "/path/to/icon.svg",
  "outputPath": "/path/to/output/icon.xml"
}

// Convert remote SVG file
{
  "svgPath": "https://example.com/icon.svg",
  "outputPath": "./output/icon.xml"
}

Supported SVG Elements

Fully Supported

• <path> - Path elements
• <rect> - Rectangles (converted to paths)
• <circle> - Circles (converted to paths)
• <polygon> - Polygons (converted to paths)
• <line> - Lines (converted to paths)
• <g> - Groups

Supported Attributes

• stroke - Stroke color
• stroke-opacity - Stroke alpha
• stroke-width - Stroke width
• stroke-linecap - Stroke line cap
• stroke-linejoin - Stroke line join
• fill - Fill color
• fill-opacity - Fill alpha
• opacity - Overall opacity

Not Supported

• Text elements
• Gradients
• Filters
• Animations
• Ellipses (use circle or convert manually)
• Polylines (use polygon instead)
• Embedded images
• Clipping paths

Output Format

The tool generates Android Vector Drawable XML files compatible with Android API 21+:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24"
        android:viewportHeight="24">
    <path
        android:pathData="M12,2 L2,22 L22,22 Z"
        android:fillColor="#000000"/>
</vector>

Development

Project Structure

svg2vector-mcp/
├── src/
│   ├── index.js              # MCP server entry point
│   ├── constants.js          # Shared constants and mappings
│   ├── converter/
│   │   ├── index.js          # Converter module exports
│   │   ├── SvgConverter.js   # Main converter class
│   │   └── XmlWriter.js      # XML output writer
│   ├── parser/
│   │   ├── index.js          # Parser module exports
│   │   └── SvgParser.js      # SVG parsing logic
│   ├── tree/
│   │   ├── index.js          # Tree module exports
│   │   ├── SvgNode.js        # SVG node classes
│   │   └── SvgTree.js        # SVG tree container
│   └── utils/
│       ├── index.js          # Utils module exports
│       ├── ColorUtils.js     # Color conversion utilities
│       └── PathBuilder.js    # Path construction builder
├── test/
│   ├── ColorUtils.test.js    # Color utilities tests
│   ├── PathBuilder.test.js   # Path builder tests
│   ├── SvgParser.test.js     # Parser tests
│   ├── SvgConverter.test.js  # Converter tests
│   └── integration.test.js   # Integration tests
├── test-data/                # Test SVG/XML files
├── package.json
└── README.md

Running Locally

# Install dependencies
npm install

# Run the server
npm start

# Or directly
node src/index.js

Testing

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

Using the Converter Programmatically

import { SvgConverter } from 'svg2vector-mcp/converter';

const converter = new SvgConverter();
const result = converter.convert(svgContent);

if (result.success) {
  console.log(result.xml);
} else {
  console.error(result.errors);
}

Publishing to npm

1. Update version in package.json
2. Login to npm: npm login
3. Publish: npm publish

Troubleshooting

"Not a proper SVG file"

• Ensure the file contains a valid <svg> root element

"Missing viewBox in element"

• Add a viewBox attribute to your SVG element
• Or ensure width and height attributes are present

Unsupported element warnings

• The converter will log warnings for unsupported SVG features
• The conversion will continue but may not include all visual elements

License

MIT

Credits

Based on the Android SVG to VectorDrawable converter from the Android Open Source Project.