How do I set SVG dominant-baseline?

Choose alphabetic, middle, hanging, central, ideographic, or text-before-edge, then click Set baseline. The value is written on every and , including style attributes.

How is dominant-baseline different from text-anchor?

text-anchor is horizontal around x (start / middle / end). dominant-baseline is vertical around y (alphabetic sits on the line, hanging hangs from it, middle centers the em box). Align to center translates the whole drawing.

Does dominant-baseline rewrite x or y?

No. Coordinates stay. Only how the glyph box is interpreted against y changes — same idea as text-anchor leaving x alone.

What do alphabetic, middle, and hanging mean?

Alphabetic (the SVG default) sits Latin glyphs on y. Middle centers the em box on y. Hanging puts y at the top of the em box — typical for some Indic scripts. Central is similar to middle for ideographic fonts.

Set SVG dominant-baseline — Free Tool

FAQ

Quick answers

How do I set SVG dominant-baseline?: Choose alphabetic, middle, hanging, central, ideographic, or text-before-edge, then click Set baseline. The value is written on every <text> and <tspan>, including style attributes.
How is dominant-baseline different from text-anchor?: text-anchor is horizontal around x (start / middle / end). dominant-baseline is vertical around y (alphabetic sits on the line, hanging hangs from it, middle centers the em box). Align to center translates the whole drawing.
Does dominant-baseline rewrite x or y?: No. Coordinates stay. Only how the glyph box is interpreted against y changes — same idea as text-anchor leaving x alone.
What do alphabetic, middle, and hanging mean?: Alphabetic (the SVG default) sits Latin glyphs on y. Middle centers the em box on y. Hanging puts y at the top of the em box — typical for some Indic scripts. Central is similar to middle for ideographic fonts.

Set text-anchor → Set baseline-shift → Split text into glyphs → Align to center →

Privacy Terms

Source

Baseline

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Set SVG dominant-baseline

Live preview