Understanding SVG dominant-baseline Attribute

The dominant-baseline attribute in Scalable Vector Graphics (SVG) controls the vertical alignment and positioning of text relative to its coordinate point. By defining which typographic baseline is prioritized, this attribute allows developers and designers to achieve precise vertical centering, align mixed-script typography, and correctly position text labels alongside icons or geometric shapes without relying on brittle manual offset hacks.

The Role of Baselines in SVG Typography

In digital typography, text glyphs sit on invisible horizontal lines called baselines. While standard Western text relies primarily on an alphabetic baseline—where letters like “a”, “b”, and “x” rest while descenders like “p” and “y” drop below—different writing systems and graphic layouts require different alignment points.

When you define an SVG <text> element with x and y coordinates, the browser uses a baseline to determine where the text renders relative to that y coordinate. The dominant-baseline attribute explicitly sets which baseline should align with the current typographic coordinate system.

Common dominant-baseline Values

The dominant-baseline attribute supports several values to suit various design and linguistic requirements:

• auto: The default setting. It calculates the baseline based on the current script property or defaults to the standard alphabetic baseline.
• alphabetic: Aligns the standard alphabetic baseline with the y coordinate. This is standard for Latin, Cyrillic, and Greek alphabets.
• middle: Aligns the vertical midpoint of the text’s font box directly with the y coordinate. This is commonly used for perfect vertical centering inside SVG buttons, badges, and shapes.
• central: Similar to middle, but uses the typographic glyph center (often derived from ideographic or mathematical centers) rather than the bounding box.
• hanging: Aligns the top of the characters with the y coordinate. This is standard for certain scripts like Devanagari and Tibetan, but is also useful for top-aligning Western text within a container.
• mathematical: Positions the text so that mathematical operators align neatly with the text baseline.
• text-before-edge / text-top: Aligns the text using the top edge of the font’s em-square.
• text-after-edge / text-bottom: Aligns the text using the bottom edge of the font’s em-square.

Key Use Cases

1. Vertical Centering

Achieving true vertical centering in SVG text traditionally required guessing pixel or em offsets using the dy attribute. Setting dominant-baseline="middle" or dominant-baseline="central" provides clean, automated vertical centering regardless of font size or letter case.

2. Multi-Script Typography

In documents combining different scripts (such as Latin text mixed with Chinese, Japanese, or Devanagari characters), different glyphs have different natural baselines. dominant-baseline ensures that the primary script establishes the reference line so all secondary scripts align naturally.

3. Icon and Label Alignment

When placing text directly beside an SVG icon, setting dominant-baseline="central" allows both the icon and the text label to share the same y center coordinate, preventing text from floating too high or sinking below the icon’s visual axis.