Skip to main content
Glama
ErneG

svgo-jsx-mcp

by ErneG
OverviewSchemaRelated ServersScoreDiscussions
TypeScript

svgo-jsx-mcp

An MCP (Model Context Protocol) server for SVG optimization with JSX-compatible camelCase attribute conversion. Includes a production-ready HTTP API with authentication, rate limiting, and usage tracking.

Features

  • SVG Optimization: Uses SVGO to reduce SVG file sizes

  • CamelCase Conversion: Converts kebab-case SVG attributes to camelCase for JSX/React compatibility

  • API Key Authentication: Secure access with database-backed API keys

  • Rate Limiting: Configurable per-key rate limits

  • Usage Statistics: Track optimization metrics and request history

  • Batch Processing: Optimize multiple SVGs in a single request

  • Docker Ready: Deploy to Coolify or any Docker host

Related MCP server: nakkas

Quick Start

Local Development (stdio mode)

npx svgo-jsx-mcp

HTTP Server Mode

# Clone and install
git clone https://github.com/your-username/svgo-jsx-mcp
cd svgo-jsx-mcp
pnpm install

# Set up database
cp .env.example .env
# Edit .env with your DATABASE_URL and API_KEYS

# Run migrations and start
pnpm prisma migrate dev
pnpm dev

Deployment (Coolify/Docker)

Docker Compose

# Set your API keys
export API_KEYS=your-secret-key-here

# Start services
docker-compose up -d

Coolify Deployment

  1. Create a new service from this GitHub repo

  2. Add a PostgreSQL database

  3. Set environment variables:

    • DATABASE_URL: Connection string to your PostgreSQL

    • API_KEYS: Comma-separated list of API keys

    • PORT: 3000 (default)

  4. Deploy

API Endpoints

Health Check

GET /health

No authentication required. Returns server and database status.

Optimize SVG

POST /mcp/optimize
Authorization: Bearer <api-key>

{
  "content": "<svg>...</svg>",
  "filename": "icon.svg",
  "camelCase": true
}

Batch Optimize

POST /mcp/optimize/batch
Authorization: Bearer <api-key>

{
  "items": [
    { "content": "<svg>...</svg>", "filename": "icon1.svg" },
    { "content": "<svg>...</svg>", "filename": "icon2.svg" }
  ],
  "camelCase": true
}

Usage Statistics

GET /stats
Authorization: Bearer <api-key>

Per-Key Statistics

GET /stats/:keyId
Authorization: Bearer <api-key>

Response Format

Single Optimization

{
  "success": true,
  "filename": "icon.svg",
  "optimization": {
    "originalSize": 1234,
    "optimizedSize": 567,
    "savedBytes": 667,
    "savedPercent": "54.1%",
    "ratio": "0.459"
  },
  "camelCaseApplied": true,
  "result": "<svg strokeWidth=\"2\" fillOpacity=\"0.5\">...</svg>"
}

Batch Optimization

{
  "success": true,
  "total": 5,
  "successful": 5,
  "failed": 0,
  "results": [...]
}

Authentication

Include your API key in the request header:

Authorization: Bearer <your-api-key>

Or:

X-API-Key: <your-api-key>

Environment Variables

Variable

Description

Default

DATABASE_URL

PostgreSQL connection string

(required for server mode)

API_KEYS

Comma-separated initial API keys

-

PORT

HTTP server port

3000

CORS_ORIGINS

Allowed CORS origins

*

CamelCase Conversion

When camelCase is true (default), kebab-case attributes are converted:

Original

Converted

stroke-width

strokeWidth

fill-opacity

fillOpacity

font-size

fontSize

stroke-linecap

strokeLinecap

clip-path

clipPath

Development

# Install dependencies
pnpm install

# Generate Prisma client
pnpm prisma generate

# Run database migrations
pnpm prisma migrate dev

# Start HTTP server
pnpm dev

# Start stdio mode (for MCP clients)
pnpm dev:stdio

# Build
pnpm build

Scripts

Script

Description

pnpm dev

Build and run HTTP server

pnpm dev:stdio

Build and run stdio mode

pnpm build

Compile TypeScript

pnpm start:server

Run HTTP server

pnpm start:stdio

Run stdio mode

pnpm prisma:studio

Open Prisma Studio

License

MIT

This server cannot be installed

A
license - permissive license
-
quality - not tested
D
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

  • icogenie-mcp

    albertnahas
    A
    license
    -
    quality
    C
    maintenance
    AI-powered SVG icon generation MCP server. Generate production-ready SVG icons from text descriptions with customizable styles, sizes, and themes.
    20
    6
    MIT

  • nakkas

    arikusi
    A
    license
    A
    quality
    A
    maintenance
    MCP server that turns AI into an SVG artist. One rendering engine with a rich JSON schema, AI controls all design parameters. Renders animated SVGs with CSS @keyframes and SMIL animations. Supports 16+ element types, parametric curves, pattern groups, gradient/filter/clip/mask definitions, and PNG preview. No external dependencies, runs locally via npx.
    3
    161
    20
    MIT

  • svg2vector-mcp

    SuLG-ik
    A
    license
    A
    quality
    C
    maintenance
    MCP server for converting SVG files to Android Vector Drawable XML, enabling seamless integration with Figma MCP for Android development.
    1
    7
    12
    MIT

View all related MCP servers

Related MCP Connectors

  • Arcjet

    An MCP server for Arcjet - the runtime security platform that ships with your AI code.

  • tinify-ai

    MCP server for Tinify image optimization — one tool, max optimization

  • mcp

    MCP server providing access to the Scorecard API to evaluate and optimize LLM systems.

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/ErneG/svgo-jsx-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server