Text to SVG

Set a word in a real typeface and download it as outlines. No font needed at the other end, and no colour written into the file, so your site can paint it. Built in your browser.

  • ProcessingOn your device
  • Uploaded to a serverNothing
  • InternetNot needed

Don't take our word for it. Turn off your Wi‑Fi, then use this tool. It will work exactly the same, which is only possible because your file never goes anywhere.

Worth knowing

The result is shapes, not text. Nothing downstream needs the font, which is the point — but the words cannot be edited, searched or selected afterwards. Keep the typed version if you may want to change it.

A typeface downloads the first time you choose it, usually 20 to 50KB, from this site rather than from Google. After that it is cached and works with the network off. Choosing one you have not used before is the only moment this page needs a connection.

The output is always black and names no colour, so your theme can set one. If you need a file that keeps a specific colour, trace a coloured image with PNG to SVG instead.

Every typeface here is from Google Fonts under an open licence, which permits commercial use. Converting letters to outlines does not change the licence the font came under, so check it if you are selling the result.

Latin alphabets only. The list leaves out around 120 families that exist solely for other scripts — Arabic, Devanagari, Thai, Japanese and so on — because the files we hold carry Latin glyphs, so those families would have been listed under their own name and then set nothing.

WordPress blocks SVG uploads by default. Elementor has a setting for it; otherwise a plugin that permits and inlines SVGs does the job.

What outlines buy you

Text on a web page is text: the browser looks up a font and draws it. That is right almost everywhere, and it fails in one specific way — the font has to be there. Send the same page to a machine without it, open the file in software that substitutes freely, or hand the artwork to someone else's system, and your wordmark renders in something that is not your wordmark.

Outlines remove the lookup. Each letter becomes a shape, and a shape has nothing to substitute. That is why a logo is almost never delivered as live text, and why the file you get here has no font dependency at all. The cost is that it is no longer editable as words, which is a real trade rather than a technicality — keep what you typed if it might change.

Why it comes out black

The same decision the icon tracer makes, for the same reason. A colour written into an SVG beats a colour it inherits, so the moment the file names one, the theme trying to paint it has already lost. This file names none. Opened on its own it draws black, because there is nothing to inherit; dropped into a page it takes whatever colour that page gives it, including on hover and in dark mode.

If you want the opposite — a file that keeps one specific colour wherever it goes, which is usually right for a full-colour logo — then PNG to SVG writes the colour in deliberately. And for a symbol rather than a word, Icon to SVG does the same job this page does, starting from an image.

About the typefaces

Over 1,800 of them, and every one is from Google Fonts under an open licence, which permits commercial use. They are not fetched from Google, though: the files are downloaded once when this site is built and served from this domain, so using the tool does not tell anyone else what you are working on. The first time you pick a face your browser fetches it — usually 20 to 50KB; after that it is cached and the page works with the network off. Nothing downloads for a typeface you never choose.

That is the single step on this page that needs a connection, and it is worth being plain about it rather than discovering it offline. Converting letters to outlines does not change the licence the font came under, so if you are selling what you make, check the terms of the specific family.

One limit worth stating: the list is Latin alphabets. Around 120 Google families exist solely for other scripts — Arabic, Devanagari, Thai, Japanese — and they are left out rather than listed under a name they could not live up to, because the files held here carry the Latin character set. Accented Latin is fine throughout, and if a face cannot draw something you typed, the page names the character instead of quietly dropping it.

Getting the spacing right

Letters are laid out using the typeface's own kerning tables rather than placed one after another at nominal widths, so pairs like AV and To close up the way the designer drew them. At wordmark sizes the difference is obvious once you have seen it.

Tracking is the control most worth touching. Display faces are drawn tight for headlines, and a name set at logo size usually wants a little air between the letters — somewhere between 0.02 and 0.1 em for most faces. Set in caps it wants more. The space around the artwork is separate: none trims the file tight to the letters, which is what you want when your layout is doing the spacing.

Putting it into WordPress

WordPress blocks SVG uploads by default, for a real reason — an SVG is code and can carry a script. Yours cannot: it is built here from path data and contains nothing but shapes. Elementor has a setting that allows SVG uploads; otherwise a plugin that permits and inlines them works, and pasting the code into a Custom HTML block always works.

One thing to watch wherever it lands: an SVG placed with an img tag cannot be recoloured by anything, here or elsewhere, because CSS cannot reach inside a separately-loaded file. It has to be in the page. That is the single most common reason a recolourable SVG appears not to work.

Questions people ask

Why is my text black when I wanted a colour?

Because black is what lets your site choose. An SVG that states its own colour overrides the colour a page is trying to apply — a fill written into the file beats one inherited from the block around it. This file names no colour at all, so it is black on its own and whatever colour your theme gives it once it is in the page. That is the same decision Icon to SVG makes, and for the same reason. If you want a file that keeps one specific colour wherever it goes, PNG to SVG writes the colour in deliberately.

Can I edit the words afterwards?

No, and that is the trade you are making. Once letters become outlines they are shapes like any other — there is no text left to retype. That is exactly why a wordmark is delivered this way: nothing on the receiving end needs the font installed, so it cannot render in something else by accident. Keep a note of the typeface and the text, and set it again here if it needs to change.

Why does picking a new typeface need the internet?

Because the font file has to reach your browser before the letters can be turned into shapes, and that is usually 20 to 50KB. It comes from this site, not from Google — no third party learns you are using this page. Once a face has loaded, your browser keeps it, so that typeface works offline from then on. Only a face you have never chosen before needs a connection.

Will the colour control in Elementor work on it?

Yes, provided the SVG is in the page rather than linked from an img tag. Upload it, place it in an Icon or HTML widget, and the colour control behaves as it does for a built-in icon, including on hover and in dark mode. CSS cannot reach inside a separately-loaded file, which is why an img tag is the one case where no SVG can be recoloured — here or anywhere else.

Why not just use the font on my site?

For body copy you should — a webfont is the right tool, and text stays selectable and searchable. This is for the places where that fails: a logo that must look identical everywhere, text inside an icon, a wordmark going into a PDF or an email signature, or artwork for someone else's system where you cannot control which fonts are installed. Outlines remove the dependency entirely.

Can I use it for Hindi, Arabic, Japanese or Thai?

Not at the moment, and the list is honest about it rather than offering families that would fail. The typeface files held here carry the Latin character set, so a family built for another script would appear under its own name and then produce nothing when you typed in that script. Around 120 families are left out for that reason. Accented Latin — French, German, Polish, Turkish, Vietnamese — works normally, and anything a face cannot draw is named on the page rather than silently dropped.

Does kerning come out right?

Yes. The letters are laid out using the typeface's own kerning tables rather than being placed one after another at their nominal widths, so pairs like AV and To close up the way the designer intended. You can add tracking on top if a wordmark wants it, which is common at large sizes.

Is my text uploaded anywhere?

No. The typeface is fetched from this site and everything else happens in your browser — the layout, the outlines and the file you download. What you type is never sent anywhere, and there is nothing here that could send it.

Works well with