svgbrowsermathtype

formula svg file different with different browsers

I have an svg file It is derived from the word file mathtype.
I use it displayed on the browser.
However With Internet explorer it displays quite well with the original file But with other browsers (chrome, firefox) it does not match the original. Error in large brackets. same as the image below

- with chrome browser
enter image description here

- with Internet explorer browser
enter image description here
and this is content file svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill-rule="evenodd" height="0.4722222222222222in" preserveAspectRatio="none" stroke-linecap="round" viewBox="0 0 11264 1088" width="4.888888888888889in">
<style type="text/css">
.brush0 { fill: rgb(255,255,255); }
.pen0 { stroke: rgb(0,0,0); stroke-width: 1; stroke-linejoin: round; }
.pen1 { stroke: rgb(0,0,0); stroke-width: 16; stroke-linejoin: round; }
.font0 { font-size: 413px; font-family: Symbol, serif; }
.pen2 { stroke: rgb(0,0,0); stroke-width: 1; stroke-linejoin: round; }
.brush1 { fill: rgb(0,0,0); }
.pen3 { stroke: none; }
.font1 { font-size: 202px; font-family: "Times New Roman", serif; }
.font2 { font-size: 346px; font-family: "Times New Roman", serif; }
.font3 { font-style: italic; font-size: 346px; font-family: "Times New Roman", serif; }
.font4 { font-size: 313px; font-family: Symbol, serif; }
.brush2 { fill: rgb(0,0,0); }
.font5 { font-weight: bold; font-size: 16px; font-family: System, sans-serif; }
</style>
<g>
<line class="pen1" fill="none" x1="714" x2="714" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="1077" x2="1077" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="1631" x2="1631" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="2036" x2="2036" y1="346" y2="806"/>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3054" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3604" xml:space="preserve" y="700">)</text>
<line class="pen2" fill="none" x1="2816" x2="2854" y1="628" y2="595"/>
<line class="pen2" fill="none" x1="2854" x2="2947" y1="595" y2="840"/>
<line class="pen2" fill="none" x1="2947" x2="3049" y1="840" y2="192"/>
<line class="pen2" fill="none" x1="3049" x2="4582" y1="192" y2="192"/>
<polygon class="pen3 brush1" points="2812,624 2865,578 2947,783 3042,183 4582,183 4582,202 3057,202 2957,840 2938,840 2844,612 2820,633"/>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="5730" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="6280" xml:space="preserve" y="700">)</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="6900" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="7468" xml:space="preserve" y="700">)</text>
<line class="pen2" fill="none" x1="5492" x2="5530" y1="628" y2="595"/>
<line class="pen2" fill="none" x1="5530" x2="5623" y1="595" y2="840"/>
<line class="pen2" fill="none" x1="5623" x2="5725" y1="840" y2="192"/>
<line class="pen2" fill="none" x1="5725" x2="7772" y1="192" y2="192"/>
<polygon class="pen3 brush1" points="5488,624 5541,578 5623,783 5718,183 7772,183 7772,202 5733,202 5633,840 5614,840 5520,612 5496,633"/>
<line class="pen2" fill="none" x1="8371" x2="8410" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="8410" x2="8503" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="8503" x2="8605" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="8605" x2="8978" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="8368,573 8421,544 8504,670 8598,294 8978,294 8978,313 8612,313 8513,710 8494,710 8400,569 8374,584"/>
<line class="pen2" fill="none" x1="9347" x2="9386" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="9386" x2="9479" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="9479" x2="9581" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="9581" x2="9954" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="9344,573 9397,544 9480,670 9574,294 9954,294 9954,313 9588,313 9489,710 9470,710 9376,569 9350,584"/>
<line class="pen2" fill="none" x1="10563" x2="10602" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="10602" x2="10695" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="10695" x2="10797" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="10797" x2="11170" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="10560,573 10613,544 10696,670 10790,294 11170,294 11170,313 10804,313 10705,710 10686,710 10592,569 10566,584"/>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="4797" xml:lang="en" xml:space="preserve" y="245">2</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3739 6415 7603" xml:lang="en" xml:space="preserve" y="438">222</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="1120 2079" xml:lang="en" xml:space="preserve" y="440">22</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="4413" xml:lang="en" xml:space="preserve" y="500">2</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="911 1853" xml:lang="en" xml:space="preserve" y="771">12</text>
<text class="font2" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3422 4224 6098 7268 8580 8772 9556 9748 10356 10772 10964" xml:lang="en" xml:space="preserve" y="672">13131010210</text>
<text class="font3" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="88 780 1697" xml:lang="en" xml:space="preserve" y="672">Azz</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" xml:space="preserve" y="505">
<tspan font-family="serif">⎛⎞⎛⎞</tspan>
</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="400 1335 2318 3212 3954 5012 5888 6630 7058 8062 9056 10056" xml:space="preserve" y="672">=+=<tspan font-family="serif">−</tspan>++<tspan font-family="serif">−</tspan>+<tspan font-family="serif">−</tspan>=+=</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" xml:space="preserve" y="730">
<tspan font-family="serif">⎜⎟⎜⎟</tspan>
</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" xml:space="preserve" y="971">
<tspan font-family="serif">⎝⎠⎝⎠</tspan>
</text>
</g>
</svg>

Who has experience in this issue please help me!

Solution

  • Internet Explorer's rendering seems like the one that's wrong to me here. That's assuming the file has been accurately copied to this question.

    So, actually, the file looks wrong, not Chrome or Firefox.

    The problem:

    The large brackets are positioned using the multi-coordinate version of the x attribute.

    x="2606 4638 5282 7828"

    What this means is that you should position the first character of the text (the top of the first opening bracket) at x=2606. The second (the top of the first closing bracket) at x=4638 etc.

    However there is a problem. The <text> element specifies xml:space="preserve". That tells the browser to treat every character in the text as significant. Even white-space characters such as newlines. And that's exactly what the problem is. Those large bracket text elements look like the following:

    <text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" xml:space="preserve" y="505">
<tspan font-family="serif">⎛⎞⎛⎞</tspan>
</text>

    There are newlines between the <text> and <tspan> tags, and also between the </tspan> and </text> tags. So there are actually six characters in the <text> element, not four.

    <newline> ( ) ( ) <newline>

    So the first newline is erroneously taking the first x=2606 coordinate.

    There are three ways to fix this:

    1. Remove the aforementioned newlines

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill-rule="evenodd" height="0.4722222222222222in" preserveAspectRatio="none" stroke-linecap="round" viewBox="0 0 11264 1088" width="4.888888888888889in">
<style type="text/css">
.brush0 { fill: rgb(255,255,255); }
.pen0 { stroke: rgb(0,0,0); stroke-width: 1; stroke-linejoin: round; }
.pen1 { stroke: rgb(0,0,0); stroke-width: 16; stroke-linejoin: round; }
.font0 { font-size: 413px; font-family: Symbol, serif; }
.pen2 { stroke: rgb(0,0,0); stroke-width: 1; stroke-linejoin: round; }
.brush1 { fill: rgb(0,0,0); }
.pen3 { stroke: none; }
.font1 { font-size: 202px; font-family: "Times New Roman", serif; }
.font2 { font-size: 346px; font-family: "Times New Roman", serif; }
.font3 { font-style: italic; font-size: 346px; font-family: "Times New Roman", serif; }
.font4 { font-size: 313px; font-family: Symbol, serif; }
.brush2 { fill: rgb(0,0,0); }
.font5 { font-weight: bold; font-size: 16px; font-family: System, sans-serif; }
</style>
<g>
<line class="pen1" fill="none" x1="714" x2="714" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="1077" x2="1077" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="1631" x2="1631" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="2036" x2="2036" y1="346" y2="806"/>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3054" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3604" xml:space="preserve" y="700">)</text>
<line class="pen2" fill="none" x1="2816" x2="2854" y1="628" y2="595"/>
<line class="pen2" fill="none" x1="2854" x2="2947" y1="595" y2="840"/>
<line class="pen2" fill="none" x1="2947" x2="3049" y1="840" y2="192"/>
<line class="pen2" fill="none" x1="3049" x2="4582" y1="192" y2="192"/>
<polygon class="pen3 brush1" points="2812,624 2865,578 2947,783 3042,183 4582,183 4582,202 3057,202 2957,840 2938,840 2844,612 2820,633"/>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="5730" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="6280" xml:space="preserve" y="700">)</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="6900" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="7468" xml:space="preserve" y="700">)</text>
<line class="pen2" fill="none" x1="5492" x2="5530" y1="628" y2="595"/>
<line class="pen2" fill="none" x1="5530" x2="5623" y1="595" y2="840"/>
<line class="pen2" fill="none" x1="5623" x2="5725" y1="840" y2="192"/>
<line class="pen2" fill="none" x1="5725" x2="7772" y1="192" y2="192"/>
<polygon class="pen3 brush1" points="5488,624 5541,578 5623,783 5718,183 7772,183 7772,202 5733,202 5633,840 5614,840 5520,612 5496,633"/>
<line class="pen2" fill="none" x1="8371" x2="8410" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="8410" x2="8503" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="8503" x2="8605" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="8605" x2="8978" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="8368,573 8421,544 8504,670 8598,294 8978,294 8978,313 8612,313 8513,710 8494,710 8400,569 8374,584"/>
<line class="pen2" fill="none" x1="9347" x2="9386" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="9386" x2="9479" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="9479" x2="9581" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="9581" x2="9954" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="9344,573 9397,544 9480,670 9574,294 9954,294 9954,313 9588,313 9489,710 9470,710 9376,569 9350,584"/>
<line class="pen2" fill="none" x1="10563" x2="10602" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="10602" x2="10695" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="10695" x2="10797" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="10797" x2="11170" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="10560,573 10613,544 10696,670 10790,294 11170,294 11170,313 10804,313 10705,710 10686,710 10592,569 10566,584"/>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="4797" xml:lang="en" xml:space="preserve" y="245">2</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3739 6415 7603" xml:lang="en" xml:space="preserve" y="438">222</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="1120 2079" xml:lang="en" xml:space="preserve" y="440">22</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="4413" xml:lang="en" xml:space="preserve" y="500">2</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="911 1853" xml:lang="en" xml:space="preserve" y="771">12</text>
<text class="font2" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3422 4224 6098 7268 8580 8772 9556 9748 10356 10772 10964" xml:lang="en" xml:space="preserve" y="672">13131010210</text>
<text class="font3" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="88 780 1697" xml:lang="en" xml:space="preserve" y="672">Azz</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" xml:space="preserve" y="505"><tspan font-family="serif">⎛⎞⎛⎞</tspan></text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="400 1335 2318 3212 3954 5012 5888 6630 7058 8062 9056 10056" xml:space="preserve" y="672">=+=<tspan font-family="serif">−</tspan>++<tspan font-family="serif">−</tspan>+<tspan font-family="serif">−</tspan>=+=</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" xml:space="preserve" y="730"><tspan font-family="serif">⎜⎟⎜⎟</tspan></text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" xml:space="preserve" y="971"><tspan font-family="serif">⎝⎠⎝⎠</tspan></text>
</g>
</svg>

    2. Remove the xml:space="preserve" attributes

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill-rule="evenodd" height="0.4722222222222222in" preserveAspectRatio="none" stroke-linecap="round" viewBox="0 0 11264 1088" width="4.888888888888889in">
<style type="text/css">
.brush0 { fill: rgb(255,255,255); }
.pen0 { stroke: rgb(0,0,0); stroke-width: 1; stroke-linejoin: round; }
.pen1 { stroke: rgb(0,0,0); stroke-width: 16; stroke-linejoin: round; }
.font0 { font-size: 413px; font-family: Symbol, serif; }
.pen2 { stroke: rgb(0,0,0); stroke-width: 1; stroke-linejoin: round; }
.brush1 { fill: rgb(0,0,0); }
.pen3 { stroke: none; }
.font1 { font-size: 202px; font-family: "Times New Roman", serif; }
.font2 { font-size: 346px; font-family: "Times New Roman", serif; }
.font3 { font-style: italic; font-size: 346px; font-family: "Times New Roman", serif; }
.font4 { font-size: 313px; font-family: Symbol, serif; }
.brush2 { fill: rgb(0,0,0); }
.font5 { font-weight: bold; font-size: 16px; font-family: System, sans-serif; }
</style>
<g>
<line class="pen1" fill="none" x1="714" x2="714" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="1077" x2="1077" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="1631" x2="1631" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="2036" x2="2036" y1="346" y2="806"/>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3054" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3604" xml:space="preserve" y="700">)</text>
<line class="pen2" fill="none" x1="2816" x2="2854" y1="628" y2="595"/>
<line class="pen2" fill="none" x1="2854" x2="2947" y1="595" y2="840"/>
<line class="pen2" fill="none" x1="2947" x2="3049" y1="840" y2="192"/>
<line class="pen2" fill="none" x1="3049" x2="4582" y1="192" y2="192"/>
<polygon class="pen3 brush1" points="2812,624 2865,578 2947,783 3042,183 4582,183 4582,202 3057,202 2957,840 2938,840 2844,612 2820,633"/>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="5730" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="6280" xml:space="preserve" y="700">)</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="6900" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="7468" xml:space="preserve" y="700">)</text>
<line class="pen2" fill="none" x1="5492" x2="5530" y1="628" y2="595"/>
<line class="pen2" fill="none" x1="5530" x2="5623" y1="595" y2="840"/>
<line class="pen2" fill="none" x1="5623" x2="5725" y1="840" y2="192"/>
<line class="pen2" fill="none" x1="5725" x2="7772" y1="192" y2="192"/>
<polygon class="pen3 brush1" points="5488,624 5541,578 5623,783 5718,183 7772,183 7772,202 5733,202 5633,840 5614,840 5520,612 5496,633"/>
<line class="pen2" fill="none" x1="8371" x2="8410" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="8410" x2="8503" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="8503" x2="8605" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="8605" x2="8978" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="8368,573 8421,544 8504,670 8598,294 8978,294 8978,313 8612,313 8513,710 8494,710 8400,569 8374,584"/>
<line class="pen2" fill="none" x1="9347" x2="9386" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="9386" x2="9479" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="9479" x2="9581" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="9581" x2="9954" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="9344,573 9397,544 9480,670 9574,294 9954,294 9954,313 9588,313 9489,710 9470,710 9376,569 9350,584"/>
<line class="pen2" fill="none" x1="10563" x2="10602" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="10602" x2="10695" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="10695" x2="10797" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="10797" x2="11170" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="10560,573 10613,544 10696,670 10790,294 11170,294 11170,313 10804,313 10705,710 10686,710 10592,569 10566,584"/>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="4797" xml:lang="en" xml:space="preserve" y="245">2</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3739 6415 7603" xml:lang="en" xml:space="preserve" y="438">222</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="1120 2079" xml:lang="en" xml:space="preserve" y="440">22</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="4413" xml:lang="en" xml:space="preserve" y="500">2</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="911 1853" xml:lang="en" xml:space="preserve" y="771">12</text>
<text class="font2" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3422 4224 6098 7268 8580 8772 9556 9748 10356 10772 10964" xml:lang="en" xml:space="preserve" y="672">13131010210</text>
<text class="font3" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="88 780 1697" xml:lang="en" xml:space="preserve" y="672">Azz</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" y="505">
<tspan font-family="serif">⎛⎞⎛⎞</tspan>
</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="400 1335 2318 3212 3954 5012 5888 6630 7058 8062 9056 10056" xml:space="preserve" y="672">=+=<tspan font-family="serif">−</tspan>++<tspan font-family="serif">−</tspan>+<tspan font-family="serif">−</tspan>=+=</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" y="730">
<tspan font-family="serif">⎜⎟⎜⎟</tspan>
</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" y="971">
<tspan font-family="serif">⎝⎠⎝⎠</tspan>
</text>
</g>
</svg>

    3. Remove the <tspan> elements, which appear to be unnecessary

    (I haven't bothered with an example for this, as the other two solutions are better).