subscripts and superscripts in SVG

Question

I am trying to display sub- and superscripts with SVG using the following code from this site

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
    <text x = "10" y = "25" font-size = "20">
        <tspan>
            e = mc 
            <tspan baseline-shift = "super">2</tspan>
        </tspan>
        <tspan x = "10" y = "60">
            T 
            <tspan baseline-shift = "sub">i+2</tspan>
            =T 
            <tspan baseline-shift = "sub">i</tspan>
            + T 
            <tspan baseline-shift = "sub">i+1</tspan>
        </tspan>
    </text>
</g>

but the sub/superscripts do not display in IE or Firefox. Is this unimplemented or is there another problem? [Are you able to see the subscripts displayed properly?]

Answer 1

Baseline-shift is not supported in IE9, IE10, and Firefox, see:

http://msdn.microsoft.com/en-us/library/gg558060(v=vs.85).aspx https://bugzilla.mozilla.org/show_bug.cgi?id=308338

If you're acually trying to display formulas, a better fit would be MathML embedded within SVG, see:

https://developer.mozilla.org/en-US/docs/Web/MathML

If you want a quickfix for the example you provided, you can emulate baseline-shift with dy...

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
    <text x = "10" y = "25" font-size = "20">
        <tspan>
            e = mc 
            <tspan dy ="-10">2</tspan>
        </tspan>
        <tspan x = "10" y = "60">
            T 
            <tspan dy="10">i+2</tspan>
            <tspan dy="-10">=T </tspan>
            <tspan dy="10">i</tspan>
            <tspan dy="-10">+ T</tspan> 
            <tspan dy="10">i+1</tspan>
        </tspan>
    </text>
    </g>
</svg>

​http://jsfiddle.net/UQ5Dp/