SVG Text Super- and subscript


Example

Using the baseline-shift parameter, you can specify super- or subscript. But this is not supported by all major browsers.

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="20">x<tspan baseline-shift="super">2</tspan></text>
    <text x="10" y="60">f<tspan baseline-shift="sub">x</tspan></text>
</svg>

For a cross-browser solution, you can use dy, dx and relative font size.

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="40">x<tspan dy="-7" font-size=".7em">2</tspan></text>
    <text x="10" y="80">f<tspan dy="3" font-size=".7em">x</tspan></text>
</svg>