SVG renders incorrectly - svg

I have done this on CodePen and it works but when I see it on a browser it doesn't render correctly. It stays on the original size (145, 90) but the svg seems to be scaling.
Once I change the viewbox property in the browser to something else manually and then back to "0 0 145 90" it works as I want it to.
<svg data-v-1d986156="" viewbox="0 0 145 90">
<g data-v-1d986156="">
<text data-v-1d986156="" text-anchor="end" x="13" y="71" style="font-size: 6px; fill: rgb(0, 51, 102);">7</text>
<text data-v-1d986156="" text-anchor="end" x="13" y="61" style="font-size: 6px; fill: rgb(0, 51, 102);">14</text>
<text data-v-1d986156="" text-anchor="end" x="13" y="51" style="font-size: 6px; fill: rgb(0, 51, 102);">21</text>
<text data-v-1d986156="" text-anchor="end" x="13" y="41" style="font-size: 6px; fill: rgb(0, 51, 102);">28</text>
<text data-v-1d986156="" text-anchor="end" x="13" y="31" style="font-size: 6px; fill: rgb(0, 51, 102);">35</text>
<text data-v-1d986156="" text-anchor="end" x="13" y="21" style="font-size: 6px; fill: rgb(0, 51, 102);">42</text>
<text data-v-1d986156="" text-anchor="end" x="13" y="11" style="font-size: 6px; fill: rgb(0, 51, 102);">49</text>
<line data-v-1d986156="" x1="15" y1="69" x2="145" y2="69" stroke="#003366" stroke-width="0.2"></line>
<line data-v-1d986156="" x1="15" y1="59" x2="145" y2="59" stroke="#003366" stroke-width="0.2"></line>
<line data-v-1d986156="" x1="15" y1="49" x2="145" y2="49" stroke="#003366" stroke-width="0.2"></line>
<line data-v-1d986156="" x1="15" y1="39" x2="145" y2="39" stroke="#003366" stroke-width="0.2"></line>
<line data-v-1d986156="" x1="15" y1="29" x2="145" y2="29" stroke="#003366" stroke-width="0.2"></line>
<line data-v-1d986156="" x1="15" y1="19" x2="145" y2="19" stroke="#003366" stroke-width="0.2"></line>
<line data-v-1d986156="" x1="15" y1="9" x2="145" y2="9" stroke="#003366" stroke-width="0.2"></line>
</g>
<line data-v-1d986156="" x1="0" y1="79" x2="145" y2="79" stroke="#003366"></line>
<g data-v-1d986156="">
<rect data-v-1d986156="" fill="#49e5a6" id="outstanding" x="22.5" y="53" width="25" height="25.57"></rect>
<text data-v-1d986156="" text-anchor="middle" x="35" y="88" class="percent" style="font: 8px serif;">15.8%</text>
</g>
<g data-v-1d986156="">
<rect data-v-1d986156="" fill="#00b9c1" id="good" x="52.5" y="13.3" width="25" height="65.34"></rect>
<text data-v-1d986156="" text-anchor="middle" x="65" y="88" class="percent" style="font: 8px serif;">40.4%</text>
</g>
<g data-v-1d986156="">
<rect data-v-1d986156="" fill="#e76d93" id="requires_improvement" x="82.5" y="21.8" width="25" height="56.82"></rect>
<text data-v-1d986156="" text-anchor="middle" x="95" y="88" class="percent" style="font: 8px serif;">35.1%</text>
</g>
<g data-v-1d986156="">
<rect data-v-1d986156="" fill="#ffcb4b" id="inadequate" x="112.5" y="64.4" width="25" height="14.2"></rect>
<text data-v-1d986156="" text-anchor="middle" x="125" y="88" class="percent" style="font: 8px serif;">8.8%</text>
</g>
</svg>
Images:

Related

SVG Horizontal lines too big

I tried to draw a shape using html/svg. It is a volume control, see below
<svg height="20" width="90" style="background-color: #ccc;">
<g>
<rect x="10" y="0" width="80" height="20" style="stroke: #000; stroke-width: 1; fill: #fff;"></rect>
<!-- Example two of four -->
<polygon points="10,20 50,10 50,20" style="fill: rgba(128,128,128,128)"></polygon>
<line x1="30" y1="0" x2="30" y2="20" style="stroke: #000; stroke-width: 1;"></line>
<line x1="50" y1="0" x2="50" y2="20" style="stroke: #000; stroke-width: 1;"></line>
<line x1="70" y1="0" x2="70" y2="20" style="stroke: #000; stroke-width: 1;"></line>
</g>
</svg>
All browsers draw the horzontal lines double width, except the last one. I even added "stroke-width: 1", but that doesn't work.
I guess anti-aliasing? How can I fix this?

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
- with Internet explorer browser
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!

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).

TranscoderException when converting svg to image using Batik

I was trying to convert an svg document to JPG using batik (I tried both 1.8 and 1.7 versions with the same reuslt). Unluckily some svg elements (clippath, fegaussianblur, fecomponenttransfer, femerge) cause the following (or similar, depending on the svg tag) trace:
org.apache.batik.transcoder.TranscoderException: null
Enclosed Exception:
The current document is unable to create an element of the requested type (namespace: http://www.w3.org/2000/svg, name: clippath).
at org.apache.batik.transcoder.XMLAbstractTranscoder.transcode(Unknown Source)
at org.apache.batik.transcoder.SVGAbstractTranscoder.transcode(Unknown Source)
Can anyone point out any solution for this problem?
Thanks,
Laura
UPDATE: Here is my input file:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- $Id$ -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400"
height="300"> <defs> <clippath id="shielddx"> <rect
rx="0" ry="0" fill="none" x="0" y="0" width="9999" height="300"
stroke-width="0.000001"></rect> </clippath> <clippath id="shielddy"> <rect
fill="none" x="0" y="0" width="331" height="210"></rect> </clippath> <filter
id="a5a87bf2-0ea3-4664-8ceb-bd50b883a117" height="120%"> <fegaussianblur
in="SourceAlpha" stdDeviation="3"></fegaussianblur> <fecomponenttransfer>
<fefunca type="linear" slope="0.2"></fefunca></fecomponenttransfer> <femerge> <femergenode></femergenode>
<femergenode in="SourceGraphic"></femergenode></femerge> </filter></defs> <rect rx="0" ry="0"
fill="#2D2D2D" x="0" y="0" width="400" height="300"
stroke-width="0.000001"></rect> <rect rx="0" ry="0" fill="#2D2D2D"
x="59" y="40" width="331" height="210" stroke-width="0.000001"></rect>
<g zIndex="1"></g> <g zIndex="1"> <path fill="none"
d="M 59 198.5 L 390 198.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 145.5 L 390 145.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 93.5 L 390 93.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 40.5 L 390 40.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 250.5 L 390 250.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path></g> <g zIndex="2"> <path
fill="none" d="M 224.5 250 L 224.5 256" stroke="#7E7E7E"
stroke-width="1"></path> <path fill="none" d="M 306.5 250 L 306.5 256"
stroke="#7E7E7E" stroke-width="1"></path> <path fill="none"
d="M 389.5 250 L 389.5 256" stroke="#7E7E7E" stroke-width="1"></path> <path
fill="none" d="M 141.5 250 L 141.5 256" stroke="#7E7E7E"
stroke-width="1"></path> <path fill="none" d="M 59 250.5 L 390 250.5"
stroke="#7E7E7E" stroke-width="1" zIndex="7" visibility="visible"></path> </g>
<g zIndex="2"> <text x="23" y="145"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;color:#7E7E7E;font-weight:normal;fill:#7E7E7E;"
zIndex="7" transform="rotate(270 23 145)" text-anchor="middle"
visibility="visible"> <tspan x="23">Quarter Overview</tspan></text></g> <g
zIndex="3"> <g visibility="visible" zIndex="0.1"
transform="translate(59,40)" clip-path="url(#shielddy)"> <rect
fill="#1E97E3" x="18" y="110.25" width="47" height="31.55000000000001"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect> <rect
fill="#1E97E3" x="101" y="36.75" width="47" height="57.75"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect> <rect
fill="#1E97E3" x="183" y="68.25" width="47" height="84.05000000000001"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect> <rect
fill="#1E97E3" x="266" y="94.5" width="47" height="78.80000000000001"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect></g> <g
visibility="visible" zIndex="0.1" transform="translate(59,40)"></g></g> <text
x="200" y="25"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:16px;color:#FFFFFF;top:10;fill:#FFFFFF;"
text-anchor="middle" zIndex="4"> <tspan x="200">Quarterly
Performance</tspan></text> <g zIndex="7" transform="translate(166,273)"> <g
zIndex="1" clip-path="url(#shielddx)"> <g> <g zIndex="1"
transform="translate(8,3)"> <path fill="#1E97E3"
d="M 1 6 L 11 6 11 16 1 16 Z" style="cursor:pointer;" stroke="#1E97E3"
stroke-width="0.000001"></path> <text x="17" y="15"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:12px;cursor:pointer;color:#A5A5A5;fill:#A5A5A5;"
text-anchor="start" zIndex="2"> <tspan x="17">Series 1</tspan> </text>
</g> </g> </g> </g> <g zIndex="7"> <text x="100.375" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="100.375">Q1</tspan> </text>
<text x="183.125" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="183.125">Q2</tspan> </text>
<text x="265.875" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="265.875">Q3</tspan></text>
<text x="348.625" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="348.625">Q4</tspan> </text></g>
<g zIndex="7"> <text x="51" y="256.1"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">-10</tspan></text>
<text x="51" y="203.6"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">0</tspan></text>
<text x="51" y="151.1"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">10</tspan></text>
<text x="51" y="98.6"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">20</tspan></text>
<text x="51" y="46.1"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">30</tspan></text></g>
<text x="64" y="60"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="start" zIndex="8"> <tspan x="64">Demo</tspan></text> <text
x="385" y="60"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="end" zIndex="8"> <tspan x="385">Demo</tspan></text> <text
x="64" y="245"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="start" zIndex="8"> <tspan x="64">Demo</tspan></text> <text
x="385" y="245"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="end" zIndex="8"> <tspan x="385">Demo</tspan></text> <g
zIndex="9"> <g visibility="visible" zIndex="1"
transform="translate(59,40)" clip-path="url(#shielddy)"> <rect
fill="rgb(192,192,192)" x="18" y="110.25" width="47"
height="31.55000000000001" isTracker="1463661560361"
fill-opacity="0.0001" visibility="visible" style=""></rect> <rect
fill="rgb(192,192,192)" x="101" y="36.75" width="47" height="57.75"
isTracker="1463661560361" fill-opacity="0.0001" visibility="visible"
style=""></rect> <rect fill="rgb(192,192,192)" x="183" y="68.25"
width="47" height="84.05000000000001" isTracker="1463661560361"
fill-opacity="0.0001" visibility="visible" style=""></rect> <rect
fill="rgb(192,192,192)" x="266" y="94.5" width="47"
height="78.80000000000001" isTracker="1463661560361"
fill-opacity="0.0001" visibility="visible" style=""></rect> </g> </g> </svg>

SVG is a case sensitive language. clippath is invalid, the correct name is clipPath.

svg code is not displaying at all when used inside an <img> tag

I have some SVG here which displays fine inside a div, but not inside an img with src="data:image/svg+xml;utf8, etc .....
I've swapped the svg for more simple ones and its fine, so I know it's something odd about my actual svg code.
<svg width="500" height="420">
<style id="mystyle" type="text/css">.node { cursor: pointer; } .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font: 10px sans-serif; } .link { fill: none; stroke: #000; stroke-width: 1px; } .erd-bc { fill: none; stroke: #aaa; stroke-width: 2px; } marker { fill: none; stroke: #000; stroke-width: 1px; } </style><g transform="translate(120,20)">
<defs>
<marker viewBox="0 0 10 10" id="card-many-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 0 L 0 5 L 10 10 M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-many-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 0 L 10 5 L 0 10 M 10 5 L 0 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 5 L 0 5"/>
</marker>
</defs>
<path class="link" marker-end="" marker-start="url(#card-many-start)" d="M60,275C60,300 60,300 60,325" style="opacity: 1;"/>
<path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,155C130,180 60,180 60,205" style="opacity: 1;"/>
<path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,155C130,180 200,180 200,205" style="opacity: 1;"/>
<path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,45C130,70 130,70 130,95" style="opacity: 1;"/>
<g opacity="1" class="node" transform="translate(200,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation Bindings</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB1</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(60,350)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB2</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g><g opacity="1" class="node" transform="translate(60,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Intersection</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB3</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(130,130)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Port</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB4</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">WEB_SERVICE_ID</text>
</g><g opacity="1" class="node" transform="translate(130,20)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Web Service</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB5</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g>
</g>

You need to URI encode the file and you also need to give it proper namespaces since you're not embedding it in a html file any more. E.g.
<img src='data:image/svg+xml;charset=utf-8,<svg width="500" height="420" xmlns="http://www.w3.org/2000/svg">
<style id="mystyle" type="text/css">.node { cursor: pointer; } .node circle { fill: %23fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font: 10px sans-serif; } .link { fill: none; stroke: %23000; stroke-width: 1px; } .erd-bc { fill: none; stroke: %23aaa; stroke-width: 2px; } marker { fill: none; stroke: %23000; stroke-width: 1px; } </style><g transform="translate(120,20)">
<defs>
<marker viewBox="0 0 10 10" id="card-many-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 0 L 0 5 L 10 10 M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-many-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 0 L 10 5 L 0 10 M 10 5 L 0 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 5 L 0 5"/>
</marker>
</defs>
<path class="link" marker-end="" marker-start="url(%23card-many-start)" d="M60,275C60,300 60,300 60,325" style="opacity: 1;"/>
<path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,155C130,180 60,180 60,205" style="opacity: 1;"/>
<path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,155C130,180 200,180 200,205" style="opacity: 1;"/>
<path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,45C130,70 130,70 130,95" style="opacity: 1;"/>
<g opacity="1" class="node" transform="translate(200,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation Bindings</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB1</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(60,350)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB2</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g><g opacity="1" class="node" transform="translate(60,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Intersection</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB3</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(130,130)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Port</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB4</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">WEB_SERVICE_ID</text>
</g><g opacity="1" class="node" transform="translate(130,20)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Web Service</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB5</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g>
</g>
</svg>'></img>

Image is chopping off while using SVG converter

The image is chopping off when i am trying to convert svg file to png image using org.apache.batik.apps.rasterizer.SVGConverter. The java code is mentioned below.
SVGConverter svgConverter = new SVGConverter();
svgConverter.setDestinationType(DestinationType.PNG);
svgConverter.setSources(new String[]{ new File(svgsource).toURL().toString() });
svgConverter.setDst(new File(imgDest));
svgConverter.execute();
Also please find the code for SVG file.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="10" y1="0" x2="10" y2="500" style="stroke: #000000; stroke-width: 1;" />
<line x1="10" y1="500" x2="500" y2="500" style="stroke: #000000; stroke-width: 1;" />
<text x="0" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >3PA</text>
<line x1="100" y1="0" x2="100" y2="500" style="stroke: darkgray; stroke-width: 0.2" />
<text x="100" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >3PB</text>
<line x1="200" y1="0" x2="200" y2="500" style="stroke: darkgray; stroke-width: 0.2" />
<text x="200" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >3PC</text>
<line x1="300" y1="0" x2="300" y2="500" style="stroke: darkgray; stroke-width: 0.2" />
<text x="300" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >4PA</text>
<line x1="400" y1="0" x2="400" y2="500" style="stroke: darkgray; stroke-width: 0.2" />
<text x="400" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >4PB</text>
<line x1="10" y1="100" x2="500" y2="100" style="stroke: darkgray; stroke-width: 0.2" />
<line x1="10" y1="200" x2="500" y2="200" style="stroke: darkgray; stroke-width: 0.2" />
<line x1="10" y1="300" x2="500" y2="300" style="stroke: darkgray; stroke-width: 0.2" />
<line x1="10" y1="400" x2="500" y2="400" style="stroke: darkgray; stroke-width: 0.2" />
<line x1="10" y1="450" x2="100" y2="450"
style="stroke:yellow; stroke-width:5; stroke-linejoin:miter" />
<line x1="100" y1="450" x2="200" y2="330"
style="stroke:yellow; stroke-width:5; stroke-linejoin:miter" />
<line x1="200" y1="330" x2="300" y2="380"
style="stroke:yellow; stroke-width:5; stroke-linejoin:miter" />
<polygon points="300,380 400,320 400,360 300,380"
style="fill:paleturquoise; stroke: darkturquoise; stroke-width:1" />
<line x1="100" y1="420" x2="100" y2="460"
style="fill:darkturquoise; stroke: darkturquoise; stroke-width:7" />
<line x1="200" y1="340" x2="200" y2="380"
style="stroke:darkturquoise; stroke: darkturquoise; stroke-width:7" />
<line x1="300" y1="310" x2="300" y2="350"
style="stroke:darkturquoise; stroke: darkturquoise; stroke-width:7" />
<line x1="400" y1="320" x2="400" y2="360"
style="stroke:darkturquoise; stroke: darkturquoise; stroke-width:7" />
<text x="400" y="320" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >320</text>
<text x="400" y="360" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >360</text>
</svg>
Please also find the online editor image and png file which is generated by the Java code .
Please help me to get the full image as online image editor.

Mention the height and width in svg tag like
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">

Resources