Font · 11 tools · nothing uploads

Convert text to an SVG path

Set a line of text in a font and get back one SVG with a single `<path>` element, the outlines, not a `<text>` tag, so it renders identically everywhere without the font installed.

Input

Options

Convert text to an SVG path renders one line of typed text in a chosen font and returns one SVG built from a single traced path, not a text tag. Font size runs 8 to 500 pixels, 48 by default, with the margin scaling to match. Characters the font cannot render are dropped before the text is set.

Questions

Why is the output a path element instead of a text element?

So the SVG renders identically everywhere without the font being installed on the viewing device; the text is converted into its actual outline shapes at build time using the font's own bezier curves, rather than referencing a font by name.

What is the allowed range for the size option?

8 to 500 pixels, defaulting to 48; anything outside that range is refused with a message quoting exactly what you gave.

What happens to characters my font does not have?

They are silently dropped from the text before it is set, except for the space character, which is always kept even if the font has no explicit space glyph; if every character ends up dropped, the run fails on zero rendered width.

What if the text option is left empty?

It refuses with a message naming the file, saying text is empty and to set it to the line you want as an SVG path.

How is the margin around the text decided?

It scales with the chosen font size: the margin is 10 percent of the size, or 2 pixels, whichever is larger, applied on all four sides of the resulting SVG.

Compare

Related Font tools

1→1Convert a font to OTFRe-encode a TTF, OTF or WOFF font as OpenType/CFF (.otf). This build of opentype.js only writes CFF outlines (verified by execution: it always emits the OTTO sfnt tag, never TrueType glyf, regardless of the source format), so OTF is the one honest direction: a real outline-format change coming from a TrueType source, a clean re-serialize coming from an OTF one.Takes one file1→1Subset a font to specific charactersDrop every glyph except the characters you list. A smaller file that still renders exactly the text you use.Takes one file1→1Render a font specimen sheetDraw a sample of a font's own glyphs to a PNG. It flattens the real bézier outlines and fills them with a nonzero-winding scanline rasterizer (no <canvas>, no upload), so what you see is what the font file contains.Takes one file1→1Export font glyphs as SVGTurn specific characters into standalone SVG files, one per glyph, using the font's own bézier outlines, normalised to a 1000-unit em so files from different fonts are comparably sized.Takes one file1→1Embed a font as a CSS data URIBase64 a font file into a self-contained `@font-face` rule, no separate file to host, at the cost of the file growing about a third larger as text. Fine for a small icon font, wasteful for a large family.Takes one file1→1Turn an icon font into an SVG spriteConvert every mapped glyph in an icon font (Font Awesome, Material Icons, ...) into one SVG sprite of `<symbol id="uXXXX">` elements, so a page can `<use href="#u...">` an icon without loading the font at all. Capped at 2000 glyphs.Takes one file