Error in Converting sup/sub script text

[ronak1009]

I generate a svg using Plotly which correctly adds the superscript/subscript characters to the chart title/label as seen in the fig below:

But when the svglib is used to convert the svg into flowables and then pdf is printed using reportlab, the subscript/superscript characters in the chart is not correct.

using the latest svglib=1.1.0

attaching the svg file:

<svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="439.37007874015757" height="315.6307589210924" style="" viewBox="0 0 439.37007874015757 315.6307589210924"><rect x="0" y="0" width="439.37007874015757" height="315.6307589210924" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/><defs id="defs-095ace"><g class="clips"><clipPath id="clip095acexyplot" class="plotclip"><rect width="279" height="176"/></clipPath><clipPath class="axesclip" id="clip095acex"><rect x="80" y="0" width="279" height="315.6307589210924"/></clipPath><clipPath class="axesclip" id="clip095acey"><rect x="0" y="60" width="439.37007874015757" height="176"/></clipPath><clipPath class="axesclip" id="clip095acexy"><rect x="80" y="60" width="279" height="176"/></clipPath></g><g class="gradients"/><g class="patterns"/></defs><g class="bglayer"/><g class="layer-below"><g class="imagelayer"/><g class="shapelayer"/></g><g class="cartesianlayer"><g class="subplot xy"><g class="layer-subplot"><g class="shapelayer"/><g class="imagelayer"/></g><g class="gridlayer"><g class="x"><path class="xgrid crisp" transform="translate(135.8,0)" d="M0,60v176" style="stroke: rgb(224, 224, 224); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" transform="translate(247.4,0)" d="M0,60v176" style="stroke: rgb(224, 224, 224); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" transform="translate(303.2,0)" d="M0,60v176" style="stroke: rgb(224, 224, 224); stroke-opacity: 1; stroke-width: 1px;"/></g><g class="y"><path class="ygrid crisp" transform="translate(0,192)" d="M80,0h279" style="stroke: rgb(224, 224, 224); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,148)" d="M80,0h279" style="stroke: rgb(224, 224, 224); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,104)" d="M80,0h279" style="stroke: rgb(224, 224, 224); stroke-opacity: 1; stroke-width: 1px;"/></g></g><g class="zerolinelayer"><path class="xzl zl crisp" transform="translate(191.6,0)" d="M0,60v176" style="stroke: rgb(82, 82, 82); stroke-opacity: 1; stroke-width: 1px;"/></g><path class="xlines-below"/><path class="ylines-below"/><g class="overlines-below"/><g class="xaxislayer-below"/><g class="yaxislayer-below"/><g class="overaxes-below"/><g class="plot" transform="translate(80,60)" clip-path="url(#clip095acexyplot)"><g class="scatterlayer mlayer"><g class="trace scatter tracef156a3" style="stroke-miterlimit: 2; opacity: 1;"><g class="fills"/><g class="errorbars"/><g class="lines"><path class="js-line" d="M0,132Q125.52,43.27 175.77,22C209.23,7.84 262.94,-5.21 265.05,0C268.89,9.51 0.78,155.3 0,154C-0.64,152.93 125.52,65.27 175.77,44Q209.23,29.84 265.05,22" style="vector-effect: non-scaling-stroke; fill: none; stroke: rgb(0, 156, 222); stroke-opacity: 1; stroke-width: 2px; opacity: 1;"/></g><g class="points"/><g class="text"/></g></g></g><g class="overplot"/><path class="xlines-above crisp" d="M79,236.5H360M79,59.5H360" style="fill: none; stroke-width: 1px; stroke: rgb(82, 82, 82); stroke-opacity: 1;"/><path class="ylines-above crisp" d="M79.5,60V236M359.5,60V236" style="fill: none; stroke-width: 1px; stroke: rgb(82, 82, 82); stroke-opacity: 1;"/><g class="overlines-above"/><g class="xaxislayer-above"><g class="xtick"><text text-anchor="middle" x="0" y="251.4" transform="translate(80,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;">−40</text></g><g class="xtick"><text text-anchor="middle" x="0" y="251.4" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(135.8,0)">−20</text></g><g class="xtick"><text text-anchor="middle" x="0" y="251.4" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(191.6,0)">0</text></g><g class="xtick"><text text-anchor="middle" x="0" y="251.4" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(247.4,0)">20</text></g><g class="xtick"><text text-anchor="middle" x="0" y="251.4" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(303.2,0)">40</text></g><g class="xtick"><text text-anchor="middle" x="0" y="251.4" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(359,0)">60</text></g></g><g class="yaxislayer-above"><g class="ytick"><text text-anchor="end" x="76.6" y="4.199999999999999" transform="translate(0,236)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;">40</text></g><g class="ytick"><text text-anchor="end" x="76.6" y="4.199999999999999" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(0,192)">60</text></g><g class="ytick"><text text-anchor="end" x="76.6" y="4.199999999999999" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(0,148)">80</text></g><g class="ytick"><text text-anchor="end" x="76.6" y="4.199999999999999" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(0,104)">100</text></g><g class="ytick"><text text-anchor="end" x="76.6" y="4.199999999999999" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre; opacity: 1;" transform="translate(0,60)">120</text></g></g><g class="overaxes-above"/></g></g><g class="polarlayer"/><g class="smithlayer"/><g class="ternarylayer"/><g class="geolayer"/><g class="funnelarealayer"/><g class="pielayer"/><g class="iciclelayer"/><g class="treemaplayer"/><g class="sunburstlayer"/><g class="glimages"/><defs id="topdefs-095ace"><g class="clips"/></defs><g class="layer-above"><g class="imagelayer"/><g class="shapelayer"/></g><g class="infolayer"><g class="g-gtitle"><text class="gtitle" x="219.68503937007878" y="30" text-anchor="middle" dy="0em" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 17px; fill: rgb(42, 63, 95); opacity: 1; font-weight: normal; white-space: pre;">Chart title</text></g><g class="g-xtitle"><text class="xtitle" x="219.5" y="280.20625" text-anchor="middle" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 14px; fill: rgb(42, 63, 95); opacity: 1; font-weight: normal; white-space: pre;">xtitle with unicode °C</text></g><g class="g-ytitle"><text class="ytitle" transform="rotate(-90,31.215625000000003,148)" x="31.215625000000003" y="148" text-anchor="middle" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 14px; fill: rgb(42, 63, 95); opacity: 1; font-weight: normal; white-space: pre;">α​<tspan style="font-size:70%" dy="0.3em">n</tspan><tspan dy="-0.21em">​</tspan> E-6/K</text></g></g></svg>

[github-actions]

Thank you for raising your first issue! Your help to improve svglib is much appreciated!

[ronak1009]

I could figure out that the lib is not able to correctly interpret font-size attribute with % units. It seems that it is looking for absolute values.
<tspan style="font-size:70%" dy="0.3em">

[deeplook]

This could be a low hanging fruit. Do you want to give it a try?

[ronak1009]

If you give me some heads-up, I can give it a try.

[deeplook]

I see only a few lines related to sub/sub, but no test whatsoever. Maybe that is because it would be a visual result for an eyeball test. Maybe you want to start by writing such a test, an see if the baseline-shift is handled correctly, and extend from there?

[claudep]

Part of the issue (E-6/K missing) will be fixed by #344.