How would I use inline HTML elements in SVG?

Question

I am wondering if there were a way to use inline HTML like <sup> and <sub> elements in SVG?

For example:

<svg>
  <text x="0" y="12">Some text with a superscript <sup>1</sup> and a subscript <sub>2</sub>.</text>
</svg>

I can not find anything about using inline HTML elements in SVG. I am hoping to use superscript without having to use a styled <tspan>.

Answer 1

A possible solution to your problem is using tspan elements and the attribute baseline-shift like so:

tspan[baseline-shift]{font-size:50%;}

<svg viewBox="0 0 350 40">
  <text x="0" y="12">Some text with a superscript <tspan baseline-shift="super">1</tspan> and a subscript <tspan baseline-shift="sub">2</tspan>.</text>
</svg>