TTF to SVG Converter

This page turns a TrueType font into an SVG font: one XML file in which every character is a <glyph> element with its outline written as SVG path data. That is useful for icon font tools and font editors, but it is not the same as a picture of your text.

or drop TTF, OTF, WOFF … files here ·

Max 95 MB per file· Up to 20 files· Deleted after 30 minutes

Output

Convert to

Files are processed on our servers and deleted after 30 minutes.

How to use this tool

1
Upload the TTF
Add one or more .ttf files, up to 20 per batch and 95 MB each. Icon fonts and text fonts both work.
2
Keep SVG font as the output
Convert to is set to SVG font. Hinting does not apply to SVG output, so the option disappears; Family name under Advanced settings still renames the font.
3
Convert to SVG
Press Convert to SVG and download the .svg file. Open it in a text editor, Inkscape or FontForge to reach the glyph paths.

SVG font vs SVG image of text

Search for TTF to SVG and you will find two different goals mixed together. One is an SVG font: the font format defined in the W3C's SVG 1.0 Recommendation of 2001, where a <font> element contains a <glyph> per character with a Unicode value, an advance width and the outline as a path. The other is an SVG picture of some text, the letters of a logo or a name already set in a line and saved as shapes. This converter produces the first kind. If what you have is a logo image rather than a font, PNG to SVG traces it into paths instead.

Converting a TrueType outline to SVG path data loses nothing in shape. SVG paths support the same quadratic curves TrueType uses, so each contour is written as it is. What does not survive is everything around the outlines: hinting instructions, OpenType features beyond simple kerning, and the binary tables operating systems need to install a font. An SVG font cannot be installed on Windows or macOS.

What an SVG font file looks like

Shortened example of the markup in an SVG font

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <font id="BrandSans" horiz-adv-x="1229">
      <font-face font-family="Brand Sans" units-per-em="2048" ascent="1638" descent="-410" />
      <glyph unicode="L" glyph-name="L" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

What this page makes: one file, one <glyph> per character, in font units with the y axis pointing up.

Opens in FontForge, Inkscape and icon font tools
Not installable on a computer
Not loaded by current Chrome, Edge or Firefox

A normal OTF or TTF with an extra SVG table holding colored, layered glyphs.

Installed like any font
Used for emoji and multicolor lettering
Support varies by app and browser

Where SVG fonts came from and where they went

SVG 1.0 defines the font element: 2001
last iPhone Safari that needed SVG web fonts: iOS 4.1
removes SVG fonts in 2014: Chrome 38
drops the font chapter: SVG 2

TTF

TrueType font

TTF is the TrueType font format developed by Apple in the late 1980s and released in 1991, then licensed to Microsoft. It defines glyph outlines with quadratic curves and includes hinting instructions that make text look sharp on screens. TrueType is supported by every desktop operating system, word processor and design app. It lacks some advanced typographic features of OpenType and is larger than web font formats.

Compression: Lossless
Transparency: –
Animation: –
Introduced: 1991 · Apple

TTF converter

SVG

Scalable Vector Graphics

SVG is an XML-based vector format standardised by the W3C in 2001. Instead of pixels it describes shapes, paths and text, so it stays sharp at any size and is usually tiny for logos and icons. It supports transparency, CSS styling, scripting and animation, and every browser renders it natively. SVG is unsuitable for photographs, and complex illustrations can become slow to render. Illustrator, Inkscape, Figma and browsers can open and edit it.

Compression: –
Transparency: Yes
Animation: Yes
Introduced: 2001 · W3C

SVG converter

TTF to SVG writes each glyph's outline as editable SVG path data inside an SVG font, which icon font tools, font editors and old webfont kits use; it is not a way to load fonts on modern web pages.

TTF to SVG FAQ

Can I use an SVG font in CSS @font-face today?

Not in most browsers. Chrome removed SVG font support in version 38 in 2014, and Firefox and Internet Explorer never added it. For a website, convert the TTF with TTF to WOFF2 instead.

Why are the glyphs upside down when I paste them into a drawing?

SVG fonts use the font's own coordinate system, where the y axis points up from the baseline, while ordinary SVG drawings count y downward from the top. Flip the path vertically, for example with a scale(1,-1) transform, and it reads correctly.

How do I turn text into SVG paths for Cricut or a laser cutter?

Install the TTF, type your words in Inkscape or Illustrator and convert the text to outlines: Path › Object to Path in Inkscape, Type › Create Outlines in Illustrator. Save that as SVG. An SVG font holds every letter separately and is not laid out as words.

Do SVG fonts keep kerning and ligatures?

Only partly. The SVG font format can store kerning pairs with hkern elements and multi-character glyphs, but it has no equivalent of OpenType feature tables such as small caps, alternates or contextual rules. Keep the TTF if you need those.

Is SVG font output useful for icon fonts?

Yes, that is its main use today. Icon font tools such as IcoMoon import SVG fonts, which lets you pull icons out of an old icon font, edit them and build a new set or export each icon as its own SVG.