SVG Maker

Provides an MCP server that renders, optimizes, converts, and validates SVGs with automated tools.

typescript

0

GitHub Stars

typescript

Language

6 months ago

First Indexed

3 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "erkamkavak-svg-maker-mcp": {
      "command": "npx",
      "args": [
        "tsx",
        "/absolute/path/to/svg-mcp-server-ts/src/index.ts"
      ]
    }
  }
}

You run an MCP server called SVG Maker MCP Server to create, render, optimize, and convert SVG images through a consistent API. This server helps you validate SVGs, generate PNG previews, convert SVGs to React or React Native components, format code, and extract useful metadata, all through simple tool endpoints and a local or remote MCP client integration.

How to use

To use SVG Maker MCP Server with your MCP client, configure a local stdio connection that runs the server script. You will interact with a set of endpoints that render SVGs to PNGs, optimize SVG code, convert to React or React Native components, format SVG, and obtain data URIs or metadata. Use the render endpoint first to preview visuals and confirm that generated SVGs match your intent, then apply transformations as needed for your UI codebase.

How to install

Prerequisites: Node.js and npm must be installed on your system.

# Install dependencies
npm install

# Start the MCP server locally
npm start

# Build for production if you plan to ship a bundle
npm run build

Additional notes

Configure your MCP client to connect to the local SVG Maker MCP Server by running the server script through a command-line interface. You can use a command like: npx tsx /absolute/path/to/svg-mcp-server-ts/src/index.ts. This starts the server in the current environment and makes its tools available to your MCP client.

Security and practical considerations

If you expose the MCP server remotely, ensure you manage access controls and limit the endpoints that can render or transform SVGs to prevent abuse. Keep dependencies up to date and review SVGO or SVGR configurations to avoid introducing insecure transformations.

Available tools

render_svg

Renders SVG to PNG. Returns image content and can be used to preview visuals.

save_svg_to_server

Saves the SVG to the server's disk for local reuse or backup.

get_svg_code

Returns the (optionally optimized) SVG code for local use.

optimize_svg

Optimizes SVG size and reduces unnecessary attributes using SVGO.

format_svg

Formats SVG code with consistent indentation for readability.

svg_to_react

Converts SVG code into a React functional component (JSX output).

svg_to_react_native

Converts SVG code into a React Native SVG component.

svg_to_data_uri

Converts SVG code into a base64 Data URI for embedding.

validate_svg

Validates SVG for XML correctness and standard SVG compliance.

get_svg_metadata

Extracts dimensions and title metadata from the SVG.