SVGMaker MCP Server: AI SVG Image Tools Inside Claude Code, Cursor & VS Code
You are deep in a build. The component is almost done, the layout feels right, and then you hit the same wall you always hit: you need an icon. Or a logo. Or that one PNG that has to become a clean vector before it ships.
So you stop. You open a browser tab, find a tool, type a prompt, wait, download a file, rename it, drag it into your assets folder, and fix the import path. By the time you get back to your editor, you have lost your place and most of your focus. A thirty second need just cost you fifteen minutes.
That break in flow is the real problem, and it repeats dozens of times across a project. The SVGMaker MCP Server removes it. Instead of sending you out to a website, it brings the vector tools into the place where you already work. You describe what you need in plain language, your AI assistant calls SVGMaker, and the finished SVG lands in your project. No tab switching, no manual downloads, no lost focus.
This guide explains what the SVGMaker MCP Server is, the tools it exposes, how to connect it to Claude Code, Cursor, VS Code, and other editors, and how to use it in a real coding session.
Why Use an MCP Server
MCP stands for Model Context Protocol. It is an open standard that lets an AI assistant talk to outside tools through a shared interface. Think of it as a universal adapter. Once an editor speaks MCP, any MCP server can plug in and give the assistant new abilities, from reading a database to, in this case, generating vector graphics.
The SVGMaker MCP Server is one of those plug ins. When it is connected, your assistant can create SVGs, edit them, convert raster images to vectors, and manage everything you have made, all without you opening a browser.
The difference in day to day work is easy to see when you place the two workflows side by side.
| Step | Traditional Workflow | SVGMaker MCP Workflow |
|---|---|---|
| Realize you need an asset | Stop coding, switch context | Keep coding, mention the asset |
| Create it | Open a browser, find a tool, prompt, wait | Your assistant calls SVGMaker in place |
| Bring it into the project | Download, rename, move into the repo | Written straight to your chosen path |
| Return to work | Rebuild your focus | Never left your editor |
| Time cost | Often fifteen minutes or more | Around thirty seconds |
The point is not just speed. Staying inside your editor keeps your attention on the code, which is where it does the most good. If you want the fuller pitch and a live view of the workflow, the SVGMaker MCP Server page walks through it visually.
The SVGMaker MCP Tools
The server does far more than generate a single icon. It exposes a full set of tools that cover creation, refinement, and asset management, so your assistant can handle an entire vector pipeline from one conversation.
| Group | Tool | What it does |
|---|---|---|
| Core | svgmaker_generate | Create a new SVG from a text prompt, with control over quality, aspect ratio, and background. |
| Core | svgmaker_edit | Change an existing SVG or raster image using a natural language instruction. |
| Core | svgmaker_convert | Turn a PNG, JPEG, or WebP into a clean, scalable SVG through AI vectorization. |
| Core | svgmaker_preview | Produce a quick preview so you can check a result before saving it. |
| Generations | svgmaker_generations_list | Browse, search, and filter everything you have created. |
| Generations | svgmaker_generations_get | Fetch the details of one saved generation by its ID. |
| Generations | svgmaker_generations_download | Download a generation as SVG, WebP, or PNG. |
| Generations | svgmaker_generations_preview | Preview a specific saved generation. |
| Generations | svgmaker_generations_share | Publish a generation to the public gallery. |
| Generations | svgmaker_generations_delete | Remove a generation you no longer need. |
| Gallery | svgmaker_gallery_list | Explore the public community gallery. |
| Gallery | svgmaker_gallery_get | Open a specific gallery item. |
| Gallery | svgmaker_gallery_download | Download a gallery asset into your project. |
| Gallery | svgmaker_gallery_preview | Preview a gallery item before you pull it in. |
| Account | svgmaker_account_info | Check your account details and credit balance. |
| Account | svgmaker_account_usage | See usage statistics for any period. |
The three you will reach for most are generate, edit, and convert. The rest turn your assistant into a librarian for your vector work, so you can find, reuse, and share assets without leaving the editor either.
Supported Editors
The SVGMaker MCP Server works with any editor or assistant that speaks MCP. That already covers the tools most developers use today:
- Claude Code
- Cursor
- VS Code
- Windsurf
- Zed
- Claude Desktop
- Codex
Because MCP is a shared standard, the same server works the same way across all of them. Learn one setup and you know them all.
Quick Setup
Getting started takes a minute. You need Node.js version 18 or newer, an MCP capable editor, and an API key.
Step 1: Get your API key. Sign in and open your account page to create a key. Keep it handy for the config below.
Step 2: Add the server to your editor.
For Claude Code, a single terminal command does the whole job:
For Cursor, add this to ~/.cursor/mcp.json:
For VS Code, add this to your MCP config:
Windsurf, Zed, and Claude Desktop follow the same pattern with their own config files. For the complete list of editors and their exact config paths, see the SVGMaker MCP documentation.
Step 3: Restart your editor so it picks up the server, and you are ready.
Real Workflow Examples
Once the server is connected, you use it the way you already talk to your assistant. Just describe what you want and add use svgmaker so the assistant knows to reach for the right tool.
Generate a logo while building a page:
Convert a whole folder of raster icons to vectors:
Build a page and let the assistant fill in the assets:
In each case the assistant reads your intent, calls the SVGMaker tool, and writes the results into your project. You stay in the editor the entire time, which is exactly what the whole approach is built to protect.
Input and Output
The tools accept the inputs you already have on hand. For editing and converting, you point the assistant at a source, either a local file path in your project or an image URL. Supported raster formats include PNG, JPEG, WebP, and GIF.
The output is always where you want it. You tell the assistant the destination path, and the finished SVG is written straight into your repository, ready to import. Because the result is a true vector, it stays sharp at any size and slots cleanly into a design system, unlike a flattened raster export.
Credits and the Wider Platform
The creation tools run on a simple credit model. Actions like generate, edit, and convert draw from your account balance, so you pay only for the work you actually do. You can check your remaining credits at any moment by asking the assistant to run svgmaker_account_info, and review your history with svgmaker_account_usage.
The MCP server is one way into a larger platform. The same account and the same credits also power the SVGMaker REST API, which is the right tool when you need vector generation inside a build script, a batch job, or your own product. If your needs grow past interactive editing into automation and scale, the SVGMaker API platform picks up where the MCP server leaves off, using the exact same underlying engine.
Frequently Asked Questions
1. Which editors and assistants can use the SVGMaker MCP Server?
Any tool that supports the Model Context Protocol. That includes Claude Code, Cursor, VS Code, Windsurf, Zed, Claude Desktop, and Codex. Since MCP is a shared standard, new MCP capable editors work automatically.
2. Do I need an API key to use it?
Yes. Create an account, generate an API key on your account page, and add it to your editor config as SVGMAKER_API_KEY. The key is how the server knows which account to use and where to draw credits from.
3. Does it output real vector SVG or a raster image in disguise?
It outputs genuine vector SVG. The generate and convert tools produce scalable vector code, not a bitmap wrapped in SVG tags, so the result stays crisp at any size and integrates cleanly with your styles.
4. Can it convert my existing PNG or JPG icons to SVG?
Yes. The convert tool runs AI vectorization on raster images, including PNG, JPEG, WebP, and GIF, and returns a clean scalable SVG. You can point it at a single file or ask your assistant to process a whole folder.
5. How do credits work?
Creation actions such as generate, edit, and convert consume credits from your account balance. You pay only for what you use. Management actions like listing or previewing your saved work are lightweight, and you can check your balance any time with the account tools.
6. Does the SVGMaker MCP Server work offline?
No. Generation and conversion run on cloud AI, so the server needs an internet connection to reach SVGMaker and return your results.
7. Where do generated files end up?
Wherever you tell the assistant to put them. You choose an output path, and the finished SVG is written directly into your project, so there is no manual download or file moving step.
8. Can I use the same account for automated or large scale work?
Yes. The MCP server and the REST API share one account and one credit pool. Use the MCP server for interactive work inside your editor, and move to the API platform when you need generation inside scripts, pipelines, or your own application.
Conclusion
The friction was never in making a vector. It was in leaving your editor to do it. The SVGMaker MCP Server closes that gap by putting generation, editing, conversion, and asset management right where you already write code. You describe what you need, your assistant handles it, and the SVG appears in your project.
Setup is one config block and an API key. Usage is one phrase, use svgmaker, added to a normal request. Everything runs on a shared credit model, so you pay for the work and nothing else, and when you outgrow interactive editing the same account carries you into the full API platform.
Create your account, add the server to your editor, and the next time you need an icon, you will not have to stop coding to get one.
