text_to_svg · 5 credits · real paths

Vectors from a sentence. Editable ones.

Most AI image tools hand you pixels. This one returns SVG path data — so the icon your agent just made can be recoloured to your brand, scaled to any size and dropped into a React component as markup.

every shape above is path data — resize it, recolour it, animate it

Four things a raster icon can never do

Scale without limit

The same file serves a 16px favicon and a 4-metre trade-show banner. No 1x/2x/3x export matrix.

Recolour in CSS

Set fill to currentColor and the icon follows your theme, dark mode included, with no second asset.

Weigh almost nothing

A few hundred bytes of path data instead of a few hundred kilobytes of pixels — inlined, it costs zero extra requests.

Animate per shape

Individual paths can be transformed, drawn on, or staggered. A PNG can only fade.

Five styles, one parameter

The style field changes how much complexity the model allows itself. Asking for an icon and getting a scene back is usually a sign this was left on the default.

icon

Icon

Single-concept marks that stay legible at 16 and 24 pixels. The default, and the one you want for UI.

"A rounded shield with a checkmark, two-tone, thick strokes"

logo

Logo

Balanced marks with room for a wordmark beside them. Good for placeholder branding while a project finds its feet.

"Minimal wordless logomark for a coffee subscription, warm palette"

mascot

Mascot

A character with a face and a pose. Useful for empty states, onboarding and 404 pages.

"Friendly paper-plane mascot waving, flat vector, soft cream palette"

illustration

Illustration

Full scenes with depth. The style to reach for when a section header needs art rather than a symbol.

"Isometric scene of a small server room with plants, flat vector"

pattern

Pattern

Repeating motifs for backgrounds and section dividers, where a raster tile would show its seams.

"Seamless pattern of tiny geometric mountains, two colours"

Straight into a component

Ask for b64_json and the response carries the SVG source. An agent editing your codebase can decode it and write the markup directly into a .jsx file, which is a genuinely different workflow from downloading a file and remembering to commit it.

💡 Prompt tip

Name the stroke weight and the colour count. “Two colours, thick uniform strokes, no gradients” produces icons that sit together as a set; leaving it open produces five icons that look like five different libraries.

request
curl -X POST \
  "https://api.imagemcpserver.com/playground/text-to-svg" \
  -H "Authorization: Bearer $IMAGEMCP_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "A rounded shield with a checkmark,
               two colours, thick uniform strokes",
    "style": "icon",
    "responseFormat": "b64_json"
  }'

Text to SVG questions

Is this a real SVG or a PNG with an .svg extension?

A real SVG. The output is vector path data, which is why you can open it, recolour a shape, change a stroke width and scale it to a billboard without a single soft edge.

Can I convert an existing photo into an SVG?

No — and neither can convert_format, which is deliberate. A photograph has no paths to recover; auto-tracing one produces thousands of junk shapes. Describe what you want in words and generate the vector directly instead.

What styles are supported?

Five: icon (the default), logo, mascot, illustration and pattern. The style steers composition and complexity — icon output stays simple enough to read at 24px, illustration is allowed far more detail.

How do I get the SVG source rather than a URL?

Pass responseFormat: "b64_json" and the SVG code comes back in the response alongside the hosted URL, which is what you want when an agent is writing the markup straight into a component file.

What does it cost?

A flat 5 credits per generation — the cheapest creative call on the platform. It runs on our own provider account, so BYOK does not change the price.

Related