SVG text to path

How text becomes a path

Drop a font file and type. The font is parsed in your browser by opentype.js — fetched on demand, so the page stays light until you need it — into glyph outlines, metrics and kerning tables; nothing is uploaded, which is also why you need the actual font file rather than a font name. Your text is then set as one combined <path>: glyph outlines placed along a baseline, kerning pairs applied, letter spacing added in em units so it scales with the size. The viewBox is fitted to the ink with a small pad — the file is exactly as big as the word, descenders included — and coordinates are rounded to two decimals to keep the path data compact. What comes out is a complete, self-contained SVG with the fill baked in, re-rendered live as you type.

ttf, otf and woff — but not woff2

Any .ttf, .otf or .woff up to 15 MB can be read. woff is a compact wrapper around the same tables, so it parses fine; woff2 is the one common format that cannot be read here, because it wraps the font in Brotli compression that would need its own decoder. The woff2 pulled from a website's network tab is therefore the wrong file — but nearly every typeface is also distributed as ttf or otf. Google Fonts' download button hands you ttf files; foundries ship otf or ttf with the licence. Use the desktop cut of the same face and the outlines are identical.

Size, spacing, fill

Size (24–360 px) sets the em size — the type size a layout program would report, not the height of the capitals, so the drawn letters come out somewhat smaller than the number while the viewBox hugs whatever they actually cover. Letter spacing runs from −0.1 em to 0.3 em and is applied between every pair of glyphs on top of kerning — a few percent of positive tracking suits spaced-out display settings, negative suits tight lockups. Fill is written into the path as a literal colour, and since it is a plain attribute it stays editable afterwards — in the markup, in the Color Editor, or via Open in full editor, which loads the result into the SVG editor for aligning with the rest of your artwork.

Why outline text — and what it costs

An SVG <text> element renders with whatever font the viewing machine can find; when the font is missing, the text reflows in a substitute and the design is gone. Outlines remove the dependency by shipping geometry instead: the file renders identically in every browser, in PDFs, on machines that have never seen the font, and in tools that never had font support to begin with — cutting machines, plotters and laser engravers consume paths, not fonts. The costs are real and permanent. Outlined text is not text: not selectable, not searchable, not translatable, invisible to screen readers, and editable only by retyping from the source. The file is also heavier — a paragraph of outlines dwarfs the same paragraph as text — which is why this is a display-type technique: wordmarks, logos, a heading bound for a cutter, never body copy. And check the font's licence — converting to outlines is a form of embedding, and some licences restrict it.

Kerning yes, full shaping no

Kerning is read from the font and applied, so pairs like AV and To close up as the designer intended. What is not performed is full OpenType shaping: contextual alternates, required ligatures, and the joining behaviour of Arabic, Indic and other connected scripts all need a shaping engine, and this tool sets glyphs one after another as the font maps them. Latin, Cyrillic and Greek display type comes out as designed; for connected scripts, outline in a design tool with a real shaper. Variable fonts load but render at their default instance — named weights and axes are not resolved, so use a static cut of the weight you want. And it sets one line at a time; for a multi-line lockup, generate each line and stack them in the editor.

Common problems

• woff2 won't open. It is Brotli-compressed and cannot be unpacked here. Nearly every font is distributed as ttf or otf too — use that file.
• Nothing appears after typing. Either the text is only whitespace, or none of the characters exist in the font — missing characters fall back to the font's .notdef glyph, which in many fonts is empty. Try characters the font actually covers, and check you loaded the right file of a family.
• The letters look smaller than the size you set. Size is the em size, and most faces draw capitals at 65–75% of it. The viewBox is fitted to the ink, so scale the finished SVG to the visual size you need — it is a vector, nothing is lost.
• A variable font renders as its default weight. Named instances are not resolved. Export or download a static cut of the weight you want and outline that.
• The text is gone for screen readers. Outlines are geometry. Add an aria-label where you place the SVG — the accessible icons guide covers the pattern — and keep a copy of the original wording with the source file.
• The file is bigger than expected. Every curve of every glyph is now literal path data. The Optimizer's precision pass trims the coordinates, and the file-size guide explains where the rest of the weight sits.