AI导哈

SVG优化API服务

一个提供SVG优化和JSX兼容驼峰属性转换功能的MCP服务器，包含生产就绪的HTTP API，支持认证、速率限制和使用统计。

  • by ErneG
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 ErneG/svgo-jsx-mcp

使用说明

svgo jsx mcp

用于SVG优化的MCP（模型上下文协议）服务器，具有JSX兼容的camelCase属性转换功能。包括可用于生产的HTTP API，具有身份验证、速率限制和使用情况跟踪功能。

特性

  • SVG优化：用途 SVGO 减小SVG文件大小
  • CamelCase转换：将烤肉串大小写SVG属性转换为camelCase，以实现JSX/React兼容性
  • API密钥验证：使用数据库支持的API密钥进行安全访问
  • 速率限制：可配置每个密钥的速率限制
  • 使用统计：跟踪优化指标和请求历史
  • 批处理：在单个请求中优化多个SVG
  • Docker就绪：部署到Coolify或任何Docker主机

快速开始

本地开发（标准模式）

npx svgo-jsx-mcp

HTTP服务器模式

# 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

部署（Coolify/Docker）

Docker Compose

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

# Start services
docker-compose up -d

冷却部署

  1. 从此GitHub仓库创建新服务
  2. 添加PostgreSQL数据库
  3. 设置环境变量：
    • DATABASE_URL：PostgreSQL的连接字符串
    • API_KEYS：API密钥的逗号分隔列表
    • PORT：3000（默认值）
  4. 部署

API终点

健康检查

GET /health

无需身份验证。返回服务器和数据库状态。

优化SVG

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

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

批量优化

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

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

使用统计

GET /stats
Authorization: Bearer <api-key>

按关键统计数据

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

响应格式

单一优化

{
  "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>"
}

批量优化

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

认证

在请求头中包含您的API密钥：

Authorization: Bearer <your-api-key>

或者：

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

环境变量

变量 描述 默认值
DATABASE_URL PostgreSQL连接字符串 （服务器模式需要）
API_KEYS 逗号分隔的API初始密钥 -
PORT HTTP服务器端口 3000
CORS_ORIGINS 允许的CORS来源 *

CamelCase转换

当 camelCase 是 true （默认），转换烤肉串案例属性：

原始 已转换
stroke-width strokeWidth
fill-opacity fillOpacity
font-size fontSize
stroke-linecap strokeLinecap
clip-path clipPath

发展

# 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

脚本

脚本 描述
pnpm dev 构建并运行HTTP服务器
pnpm dev:stdio 构建并运行stdio模式
pnpm build 编译TypeScript
pnpm start:server 运行HTTP服务器
pnpm start:stdio 运行stdio模式
pnpm prisma:studio Open Prisma工作室

许可证

麻省理工学院

相关 MCP