How do I set SVG baseline-shift?

Pick super, sub, or baseline and click Set shift. If the markup has tspans, only those tspans are updated — so H2O can raise the 2. A bare gets the attribute on the whole run. Same value again is a no-op.

How is baseline-shift different from dominant-baseline?

dominant-baseline chooses which baseline of the em-box sits on y (alphabetic, hanging, middle). baseline-shift then offsets glyphs from that baseline — superscript and subscript. y numbers stay.

Does baseline-shift rewrite y or dy?

No. Coordinates stay. Only baseline-shift is written. Tspan → text unwraps tspans if you need a single node afterward.

Why does only the inner tspan move in the sample?

The sample is H2O with a tspan around 2. This tool prefers tspans so the surrounding letters keep their baseline. Wrap the characters you want super/sub in a tspan.

Set SVG baseline-shift — Free Tool

FAQ

Quick answers

How do I set SVG baseline-shift?: Pick super, sub, or baseline and click Set shift. If the markup has tspans, only those tspans are updated — so H2O can raise the 2. A bare <text> gets the attribute on the whole run. Same value again is a no-op.
How is baseline-shift different from dominant-baseline?: dominant-baseline chooses which baseline of the em-box sits on y (alphabetic, hanging, middle). baseline-shift then offsets glyphs from that baseline — superscript and subscript. y numbers stay.
Does baseline-shift rewrite y or dy?: No. Coordinates stay. Only baseline-shift is written. Tspan → text unwraps tspans if you need a single node afterward.
Why does only the inner tspan move in the sample?: The sample is H2O with a tspan around 2. This tool prefers tspans so the surrounding letters keep their baseline. Wrap the characters you want super/sub in a tspan.

Set dominant-baseline → Set text-anchor → Set font-size → Tspan → text →

Privacy Terms

Source

Shift

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Set SVG baseline-shift

Live preview