SVG baseline-shift for Text
baseline-shift moves text above or below its normal baseline, commonly used for superscript, subscript, and fine text alignment.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Using baseline-shift for Superscript and Subscript
Setting baseline-shift="super" or baseline-shift="sub" on a <tspan> element raises or lowers that specific portion of text relative to the surrounding baseline, letting a single text element mix normal text with superscript footnote markers or subscript chemical formula notation without needing separate positioned text elements.
- baseline-shift="super" and "sub" handle common superscript/subscript needs
- Applied to individual tspan elements within a larger text block
- Avoids needing entirely separate, manually positioned text elements
Using Percentage and Length Values for Custom Offsets
Beyond the preset super and sub keywords, baseline-shift also accepts percentage values (relative to the font size) or absolute length values, giving precise custom control over vertical text offset for cases needing a specific alignment adjustment that the standard superscript or subscript presets don't quite match.
- Percentage values offset text relative to the current font size
- Absolute length values give precise pixel-level positioning control
- Useful for custom alignment needs beyond standard superscript/subscript
Frequently Asked Questions
Is baseline-shift still supported in modern browsers?
Support varies somewhat and it's technically deprecated in the SVG2 specification in favor of CSS's vertical-align in some contexts, though it remains widely functional in current browsers for typical superscript/subscript SVG text needs.
Can I achieve the same superscript effect with a smaller font-size and a manual y offset?
Yes, that's a common alternative approach — using a separate tspan with a reduced font-size and manually adjusted dy offset achieves a similar visual result without relying on baseline-shift specifically.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG