SVG Typography & Font Glyphs Glossary

The primary container element in SVG for rendering accessible, selectable text within a vector coordinate system. Unlike HTML paragraphs, it requires explicit (x, y) coordinate positioning.

A sub-element child of <text> used to apply inline styling variations, positional coordinate offsets (dx, dy), or distinct font weights to specific spans of text without breaking the containing line context.

An element that aligns text along the contour of an arbitrary vector <path>. Enables curved labels, circular badges, and flowing wave text animations in vector illustrations.

An attribute on <textPath> specifying the distance from the start of the reference path at which the first text glyph is rendered. Can be defined as a fixed pixel length or percentage.

Attributes controlling how glyphs conform to a curved path. method="align" renders glyphs perpendicularly without deformation; method="stretch" warps glyph shapes. spacing="exact" preserves glyph widths; spacing="auto" dynamically adjusts kerning.

Defines horizontal text alignment relative to the specified coordinate origin (x, y). Values: start (text begins at origin), middle (origin is horizontal center), and end (text ends at origin).

Determines which baseline of the font glyph is aligned to the y coordinate coordinate. Critical values for icon centering include middle, central, alphabetic, and hanging.

Specifies how an inline <tspan> element aligns vertically relative to its parent text's baseline table. Useful for superscripts, subscripts, and mathematical notation.

Shifts the baseline vertically for superscript or subscript positioning. Accepts super, sub, percentages, or absolute length units.

The standard typographic baseline upon which Western Latin, Greek, and Cyrillic glyphs sit. Glyphs with descenders (such as 'p', 'q', 'y') extend below this line.

A baseline table commonly used in Indic scripts (like Devanagari) where glyphs visually hang down from a top horizontal line. Also used in Latin typography for alignment with caps.

The bottom alignment baseline used for CJK (Chinese, Japanese, Korean) ideographic character grids, sitting below the alphabetic baseline.

Defines whether text lines layout horizontally or vertically, and the direction blocks progress. Supports horizontal-tb (standard), vertical-rl (East Asian vertical), and vertical-lr.

Controls the rotational orientation of glyphs when rendered in a vertical writing-mode. Values: 0deg (upright stack) or 90deg (rotated sideways).

Specifies the total target horizontal width (or vertical height in vertical modes) that the text string must span, forcing the renderer to compress or expand glyph spacing.

Determines how textLength constraints are satisfied: spacing (adjusts letter and word spacing only) or spacingAndGlyphs (scales glyph contours horizontally).

CSS typographic properties supported natively in SVG 2.0 to expand or tighten tracking between individual characters and spaces.

Properties managing bidirectional text rendering (LTR vs RTL) for Arabic, Hebrew, and Persian script integration within vector graphics.

Attributes that supply a list of relative coordinate shifts for each subsequent character in a text string. Allows wavy, scattered, or kerning-adjusted typographic layouts.

An attribute on <text> or <tspan> containing space-separated angle values in degrees to rotate each individual character about its coordinate anchor.

Controls the layering order of fill, stroke, and markers. In text rendering, setting paint-order: stroke fill ensures thick outlines appear behind the letterforms rather than eating into the glyph interiors.

Enables OpenType typographic features inside SVG text, including discretionary ligatures ("dlig"), tabular figures ("tnum"), and stylistic sets ("ss01").

An open specification embedding true SVG vector tables inside OpenType fonts. Powers multi-color icon glyphs, gradients, and transparency in a single font file.

Deprecated W3C SVG 1.1 font elements (replaced in SVG 2 by WOFF2 and OpenType). Modern browsers no longer parse pure SVG font files directly due to web standards modernization.

The practice of stripping unused characters from a web font file using tools like glyphhanger or fonttools, reducing icon font payloads from 150KB to under 4KB.

The coordinate grid upon which font glyph outlines are drawn, typically 1000×1000 (PostScript) or 2048×2048 (TrueType) units, defining relative scaling ratios.

Adjusting continuous design axes—such as weight (wght), optical size (opsz), and slant (slnt)—dynamically within SVG text elements via CSS custom properties.

Exporting text as static Bézier curves (<path d="...">) in tools like Figma or Illustrator. Guarantees 100% visual consistency on all systems, eliminating missing-font bugs at the cost of screen-reader searchability.

A native SVG DOM JavaScript method that calculates the rendered pixel advance width of a substring within a <text> element, factoring in kerning and ligatures.

Returns a DOMPoint indicating the exact coordinates where the glyph for the specified character index begins, enabling precision tooltips and cursor highlights.

Returns the tightest axis-aligned rectangle enclosing the rendered glyph contours in local coordinate space (x, y, width, height).

Screen readers extract readable text from <text> elements by default. If the text is purely decorative or duplicated by an icon, suppress it using aria-hidden="true".

Embedding Base64-encoded WOFF2 font data directly into an SVG's <defs><style> block so that external web font files do not fail CORS checks when loaded via <img> tags.