MCP server for converting SVG to Android Vector Drawable XML format
npm install svg2vector-mcpMCP (Model Context Protocol) server for converting SVG files to Android Vector Drawable XML format.
- ✅ 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
``bash`
npm install -g svg2vector-mcp
`bash`
git clone
cd svg2vector-mcp
npm install
npm link
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
`json`
{
"mcpServers": {
"svg2vector": {
"command": "svg2vector-mcp"
}
}
}
Or if installed from source:
`json`
{
"mcpServers": {
"svg2vector": {
"command": "node",
"args": ["/path/to/svg2vector-mcp/src/index.js"]
}
}
}
#### 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:
`javascript
// 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"
}
`
- Path elements
- - Rectangles (converted to paths)
- - Circles (converted to paths)
- - Polygons (converted to paths)
- - Lines (converted to paths)
- - Groups$3
- 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$3
- Text elements
- Gradients
- Filters
- Animations
- Ellipses (use circle or convert manually)
- Polylines (use polygon instead)
- Embedded images
- Clipping pathsOutput Format
The tool generates Android Vector Drawable XML files compatible with Android API 21+:
`xml
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
android:fillColor="#000000"/>
`Development
$3
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
$3
bash
Install dependencies
npm installRun the server
npm startOr directly
node src/index.js
`$3
bash
Run all tests
npm testRun tests in watch mode
npm run test:watch
`$3
javascript
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
2. Login to npm:
3. Publish: Troubleshooting
$3
- Ensure the file contains a valid