Best for
- Users of MCP-enabled AI assistants like Claude, Cursor, or Zed
- Projects needing animated SVGs without JavaScript
- Those embedding animations on GitHub or web pages
- Designers aiming to quickly prototype and iterate generated vector graphics
N
Nakkas MCP Server
Community
MCP server that turns AI into an SVG artist. One rendering engine, AI decides everything.
GitHub source repository ↗
66FMRS · C
Nakkas is an innovative and feature-rich MCP server that provides an efficient workflow for AI-driven animated SVG generation. Its unique feature is the iterative optimization through PNG previews and artifact IDs, reducing context window clutter. The server is highly configurable, supporting a wide range of element types and animations, but users should be aware of limitations such as lack of nested groups, external font support, and JavaScript on GitHub. Overall, it's a high-quality tool suitable for developers looking to leverage AI for vector graphics.
Nakkas is an MCP server that lets AI assistants like Claude create animated SVG graphics from a declarative JSON config: logos, icons, loading spinners, GitHub README banners, badges, and generative art. It renders CSS @keyframes and SMIL animations with no JavaScript, so the output works inside GitHub READMEs and anywhere an <img> tag renders SVG. Every render comes back as a PNG preview plus a server-side artifact id, so the AI sees its own work immediately and iterates without the SVG text ever passing through its context window.
Tools
render_svg
Takes SVGConfig JSON, returns a PNG preview + artifact id (+ design analysis warnings).
preview
Re-renders a stored artifact (or raw SVG) to PNG at any width.
save
Saves a stored artifact (or raw content) to disk as SVG (text) or PNG (raster).
Setup
Add to your Claude Desktop config file (macOS: ~/Library/Application Support/Claude/claude_desktop_config.json; Linux: ~/.config/Claude/claude_desktop_config.json; Windows: %APPDATA%\Claude\claude_desktop_config.json):
{
"mcpServers": {
"nakkas": {
"command": "npx",
"args": ["-y", "nakkas@latest"]
}
}
}
Using Claude Code CLI:
claude mcp add nakkas npx nakkas@latest
Or clone and build locally from GitHub.
claude_desktop_config.json
{
"mcpServers": {
"nakkas": {
"command": "npx",
"args": [
"-y",
"nakkas@latest"
]
}
}
}
Fit and risk
Not for
- SVG applications requiring JavaScript interactivity (e.g., onclick)
- Scenarios depending on external fonts (GitHub won't load them)
- Long-term persistence of artifacts (they live only for the server process, capped at 32)
- Complex nested group structures (nested groups are not supported)
Required permissions
- Local file system write access (for the save tool)
- Access to network to load images if URLs are specified
- Running a local server process (stdio transport)
Risks and side effects
- The save tool can overwrite files (though it appends a counter to avoid overwriting)
- Designs may not render correctly on GitHub if they use scripts or external fonts
- Large or complex animations may result in large output sizes
- MCP client serialization quirks may cause validation errors
Troubleshooting
- MCP error -32602: Check gradient types (use 'linearGradient' or 'radialGradient' not 'linear' or 'radial'), keyframe offsets must be numbers or 'from'/'to', colors must be hex, every element must have a 'type' field.
- Blank preview: Ensure elements have fill or stroke, coordinates are within canvas, and filters are properly defined.
- Animations not working on GitHub: Avoid script and event handlers, stick to generic fonts, and avoid CSS @import.
- Large output: Reduce steps for parametric curves, use minify: true.
Use cases
Create animated SVG graphics: logos, icons, loading spinners, generative art
Generate GitHub README banners and badges
Create data visualizations (e.g., animated bar charts)
Rapidly iterate designs: render → preview → revise → save
Supported clients
Claude DesktopFull support
Claude CodeFull support
CursorPartial support
ZedPartial support