Skip to content

Text to SVG

Text to SVG: type a sentence, or outline your type.

A prompt goes in; closed shapes and smooth bezier curves come out. Or bring your own words, outline them to paths for a cutter, and check the result here. Not a picture of a vector — the actual path data, on screen, before you commit it to a repo.

Free credit to start · no card required · editing and export cost nothing

One free credit on sign-up · no card

prompt1024 × 1024

faceted fox head, flat vector, burnt orange and teal facets, transparent background

output
<g id="ears">
  <path d="M22 34 L50 20 L78 34 Z" fill="#F25C05"/>
</g>
<g id="muzzle">
  <path d="M28 78 C40 88, 60 88, 72 78" fill="#0F8A7E"/>
</g>
paths
12
nodes
204
size
8.1 KB

Same phrase, two jobs

Which kind of text to SVG did you mean?

People arrive here wanting two entirely different things, and a third that gets confused with both. Take the one that matches and skip the rest.

  • Meaning one

    A prompt into artwork

    You describe a graphic — a fox mid-stride, a folded map pin, a monoline coffee cup — and get vector geometry back. The text is a brief, not content. This is what the rest of this page is mostly about.

    Generate from a prompt
  • Meaning two

    Type into outlines

    You have words — a wordmark, a name, a quote for a cut file — and you need the letterforms as paths rather than as a font reference. Outline the type in a desktop editor, then bring the paths here to check and tidy them.

    Open the editor
  • Neither, quite

    The <text> element

    Live text inside an SVG stays editable, selectable and searchable, and stays dependent on the font existing wherever it renders. Right for a page you control; wrong for a file you hand to someone else.

    Typography in SVG

What happens to your sentence

Three passes between the prompt and the file.

01

The prompt is expanded

Your sentence is rewritten into a full art direction brief — subject, composition, palette, stroke behaviour, mood. If you did not mention a background, transparency is stated explicitly so nothing paints a rectangle behind your artwork.

02

Geometry is written

A vector model lays down closed shapes with smooth bezier curves. Because it is generating paths rather than pixels, there is no bitmap in the middle and none of the stair-stepped edges a tracer leaves behind.

03

The markup is cleaned

The markup goes through SVGO: editor namespaces and metadata are stripped, numbers are rounded to two decimals, groups that only nest other groups are collapsed, and a viewBox is guaranteed. You get the file you would have hand-tidied anyway.

Prompt anatomy

Six slots decide what the file looks like.

You do not have to fill all six. But each one you leave empty is a decision the model makes for you — and the background slot is the one people regret skipping.

Read the full prompt guide
Prompt components and their effect on generated SVG output
SlotExampleWhat it changes
Subjecta faceted fox headDecides the shape count. Concrete nouns resolve; abstractions sprawl.
Styleflat vector, geometric facetsChooses between fills and strokes. Flat styles give fewer, cleaner paths.
Paletteburnt orange, teal, creamNamed or hex colours become literal fill values you can find and replace.
Strokeno outline, 2px uniform strokeFixes stroke-width across the drawing instead of leaving it per-shape.
Backgroundtransparent backgroundSay it, or you may get a filled rect behind everything.
Compositioncentred, square, even marginKeeps the artwork inside the viewBox with room to breathe.

Fidelity

Two models, and the honest case for each.

Standard

1 credit

The everyday tier. Icons, spot illustrations, badges, marks — anything where the shape language is simple and the palette is small.

Premium

2 credits

The higher-fidelity vector model. Worth it for detailed illustration, layered scenes, subtle gradients and anything you intend to print large.

Credits are only spent on generation. Editing, optimising and exporting an existing file cost nothing.

What lands in the file

Readable enough to review in a pull request.

Scales from its viewBox

Every file arrives with a viewBox and an xmlns and no fixed width or height, so it sizes itself to whatever container you put it in.

Trimmed precision

Coordinates carry the decimals the curve needs and no more. Diffs stay small when you re-export.

No hidden bitmaps

Any embedded <image> is removed on the server, so every fill is vector — gradients included, as defs you can retune.

Component-ready

Copy it out as a React component, with the stroke, font and class attributes already converted to JSX names.

The other job

Converting your own type to SVG paths.

If you came here with words rather than a description — a wordmark, a name, a quote to cut in vinyl — this is the four-step version. It costs no credits.

  1. 01

    Set the type

    In Inkscape, Illustrator or Figma, set the words, then size and letterspace them. The text stays live at this stage, so keep adjusting until the spacing is right — that is much harder once it is geometry.

  2. 02

    Convert to outlines

    Path, then Object to Path in Inkscape; Type, then Create Outlines in Illustrator; Flatten in Figma. Our editor cannot do this step. The font reference disappears and each letterform becomes a closed shape, so the result renders identically on a machine that has never had your typeface.

  3. 03

    Check the counters

    The holes in a, e, o and g are separate subpaths held in place by fill rules. Paste the exported SVG into our editor's code panel, or open it in a browser, and confirm they survived — a cutter that loses them cuts the middles out of your letters.

  4. 04

    Export for its destination

    A cut file wants one path per colour and no stray shapes. A logo wants tidy groups and your exact brand hex. Both want the width and height dropped so the viewBox does the scaling.

The reason to outline is always the same: a <text> element is a reference to a font that has to exist on the other machine. Outlines are the letters themselves. Cutting software, print shops and anyone you email the file to all need the second thing.

Questions

Text to SVG, answered.

How do I convert text to SVG paths?
Set the type in a vector editor and convert it to outlines: Path, then Object to Path in Inkscape; Type, then Create Outlines in Illustrator; or Flatten in Figma. Our editor can set live text but cannot outline it. The letters stop being a font reference and become closed geometry — what you want once the file leaves your machine, because the recipient almost certainly does not have your font.
What is the difference between SVG text and SVG paths?
A <text> element keeps the letters live: still editable, still searchable, still selectable — and still dependent on the font being available wherever it renders. Outlined text is the same letters converted to path data: no longer editable as words, but guaranteed to look identical everywhere. Live for a web page you control, outlined for anything you hand to someone else.
Does this actually write SVG, or does it trace a generated image?
It writes vector output directly. There is no PNG in the middle to trace, which is why the file comes back with closed shapes and smooth bezier handles rather than the thousands of jagged points a tracer produces.
Can I use my own font?
For live text, yes: set font-family on the text element, and it renders with that font wherever the font is installed. Once you outline the type, the font file is no longer part of the SVG — but embedding or outlining a typeface is still a licensing question, and a few foundries restrict exactly this. Check the EULA before you outline a commercial face for a product you sell.
Can I make curved text as SVG?
Yes, two ways. Live text can follow a path with a <textPath> element referencing any path in the file, which stays editable. Or draw the curve, run the type along it, then outline the result — which is what you need if the file is going to a cutter or to anyone without your font.
Why does Cricut or my laser cutter need text converted to outlines?
Cutting software cuts paths, not typography. A <text> element gives it nothing to follow, so the letters either vanish on import or come in as a box. Outline the type first and each letterform becomes a closed shape the machine can trace — which is also why counters, the holes in a and o, need checking before you send it.
Can ChatGPT make an SVG file?
It can emit SVG markup, and for a handful of primitives that works. What it does not do reliably is produce coherent multi-shape artwork — the paths tend to be plausible-looking coordinates that do not close, overlap correctly or align. The output here comes from a model that draws vector paths directly, rather than a chat model typing coordinates it cannot see.
How long is a good prompt?
Two to three sentences. Name the subject, the style, the palette and the background. Your prompt is expanded automatically before generation, so you are giving direction rather than writing the full spec yourself.
Is it free?
A free account gets a credit on sign-up with no card. Generation spends credits; editing and exporting do not.
Can I edit the result?
Yes. Every generation is saved to your workspace and opens in the editor, where you can recolour fills and strokes, move, resize or delete shapes, and edit the markup directly. There is no node-level anchor editing; for that, open the file in Inkscape or Figma.
What size is the output?
Generation runs at 1024 x 1024 by default. Because the result is vector, that number is only the coordinate space — the graphic renders sharp at any size, from a 16px favicon to a billboard.
Do I own what I generate?
Yes — royalty-free, worldwide, commercial use included, with no attribution required. See the licence page for the full text.

Your first prompt is free.

One credit, no card, and the path data on screen before you decide whether it is any good.

Start generating