About

TrueType Font files store glyph outlines as quadratic Bézier splines in a compact binary format. Extracting these outlines as standalone SVG paths requires parsing the glyf, cmap, loca, and head tables from the TTF binary structure. Errors in coordinate transformation - specifically the Y-axis inversion from TTF's upward-positive to SVG's downward-positive system - produce mirrored or inverted glyphs that break visual fidelity. This tool parses the raw binary, reconstructs contour paths with correct winding direction, and outputs production-ready SVG files suitable for inline CSS embedding or icon sprite sheets.

The converter handles both simple and compound glyphs, resolves implicit on-curve control points between consecutive off-curve points per the TrueType specification, and normalizes the viewBox to the glyph's bounding box defined in xMin, yMin, xMax, yMax coordinates. Note: CFF-based OpenType fonts (.otf with cubic Béziers) are not supported. Only TrueType outline fonts with glyf tables are parsed. Font hinting instructions are discarded as they are irrelevant at SVG resolution independence.

Formulas

TrueType glyphs encode outlines as sequences of on-curve and off-curve control points. The conversion to SVG path data follows the quadratic Bézier interpolation rule defined in the TrueType specification.

For two consecutive off-curve points P_i and P_i+1, an implicit on-curve point is inserted at their midpoint:

P_mid = P_i + P_i+12

The Y-axis transformation from TTF coordinates to SVG coordinates:

y_svg = yMax − y_ttf + yMin

Quadratic Bézier curve in SVG path notation:

Q cx,cy ex,ey

Where cx,cy is the off-curve control point and ex,ey is the next on-curve (or implicit) endpoint.

Where P_i = control point coordinates in font units, yMax = maximum Y from glyph header bounding box, unitsPerEm = design units per em square (typically 1000 or 2048). The cmap Format 4 segment lookup maps a Unicode codepoint c to glyph index g via: if idRangeOffset = 0, then g = (c + idDelta) mod 65536.

Reference Data

TTF Table Tag	Purpose	Key Fields Extracted	Required
head	Font header	unitsPerEm, indexToLocFormat	Yes
maxp	Maximum profile	numGlyphs	Yes
cmap	Character-to-glyph mapping	Format 4 segment arrays	Yes
loca	Glyph location index	Offsets into glyf table	Yes
glyf	Glyph outline data	Contours, coordinates, flags	Yes
name	Naming table	Font family, style names	Optional
hhea	Horizontal header	ascent, descent, numOfLongHorMetrics	Optional
hmtx	Horizontal metrics	advanceWidth, lsb	Optional
post	PostScript names	Glyph name mappings	Optional
OS/2	OS/2 and Windows metrics	sTypoAscender, weight class	Optional
Glyph Flag Bits
Bit 0	ON_CURVE_POINT	Point is on the contour curve	-
Bit 1	X_SHORT_VECTOR	X coordinate is 1 byte	-
Bit 2	Y_SHORT_VECTOR	Y coordinate is 1 byte	-
Bit 3	REPEAT_FLAG	Next byte is repeat count	-
Bit 4	X_IS_SAME_OR_POSITIVE	X delta sign or same	-
Bit 5	Y_IS_SAME_OR_POSITIVE	Y delta sign or same	-
SVG Output Specifications
Format	SVG 1.1	W3C namespace, XML declaration	-
Path Commands	M, L, Q, Z	Move, Line, Quadratic, Close	-
Coordinate Precision	2 decimal places	Balances size vs. fidelity	-
viewBox	Per-glyph bounding box	xMin yMin width height	-
Fill Rule	nonzero	TrueType winding convention	-

Frequently Asked Questions

TrueType uses a coordinate system where Y increases upward, while SVG uses Y increasing downward. If the converter fails to apply the Y-axis inversion formula (y_svg = yMax − y_ttf + yMin), glyphs render inverted. This tool applies the transformation automatically using bounding box values from each glyph's header.

Simple glyphs (numberOfContours ≥ 0) contain direct point data. Compound glyphs (numberOfContours = −1) are assemblies of other glyphs with transformation matrices (translate, scale, rotate). For example, accented characters like "é" typically reference the base "e" glyph plus an accent component. This converter recursively resolves compound references and applies their affine transformations before generating the SVG path.

The TrueType specification allows two consecutive off-curve (control) points without an explicit on-curve point between them. In this case, an implicit on-curve point exists at the midpoint: P_mid = (P_i + P_i+1) ÷ 2. Omitting these implicit points produces angular artifacts and broken curves. The converter inserts them automatically during path construction.

No. OpenType fonts with CFF (Compact Font Format) outlines use cubic Bézier curves and a different table structure (CFF/CFF2 tables instead of glyf). This tool specifically targets TrueType outline fonts that contain a glyf table. The magic number check validates the file begins with 0x00010000 (TrueType) or 0x74727565 ('true'). Files with 0x4F54544F ('OTTO') signatures are CFF-based and will be rejected with an appropriate error.

Format 4 uses parallel arrays of segment boundaries. For a Unicode codepoint c, the parser finds the segment where startCode ≤ c ≤ endCode. If idRangeOffset for that segment is 0, the glyph index equals (c + idDelta) mod 65536. Otherwise, it indexes into the glyphIdArray at a calculated offset. Missing mappings (glyph index 0) indicate the .notdef glyph.

Coordinates are rounded to 2 decimal places. TrueType fonts typically use integer coordinates in a 1000 or 2048 unitsPerEm grid, so the raw values are already integers. The decimal precision matters after the Y-axis transformation. Reducing to 0 decimals saves approximately 5 - 15% file size but can cause visible rounding artifacts on complex curves. Two decimals is the standard balance between fidelity and size.