when using safari, svg text element transform-origin is different - svg

There is a difference in how svg of the same code is displayed when checked in chrome and safari.
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg" class="svg4"
style="border: 1px solid rgb(0, 0, 0); overflow: hidden; position: relative; float: left;">
<rect width="100" height="100" x="300" y="300" fill="red"
style="transform-origin:50px 50px;transform: rotate(-40deg);"></rect>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 50px 50px;transform: rotate(-10deg);"
>
<tspan dy="0">jon doe 10</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 50px 50px;transform: rotate(-20deg);"
>
<tspan dy="0">jon doe 20</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 50px 50px;transform: rotate(-30deg);"
>
<tspan dy="0">jon doe 30</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 50px 50px;transform: rotate(-40deg);"
>
<tspan dy="0">jon doe 40</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 10px 10px;transform: rotate(-10deg);"
>
<tspan dy="0">jon doe 10</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 10px 10px;transform: rotate(-20deg);"
>
<tspan dy="0">jon doe 20</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 10px 10px;transform: rotate(-30deg);"
>
<tspan dy="0">jon doe 30</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 10px 10px;transform: rotate(-40deg);"
>
<tspan dy="0">jon doe 40</tspan>
</text>
</svg>
When checked in chrome, the transform-orgin value is applied and rotated.
chrome
When checked in Safari, the transform-orgin value is not applied at all and is displayed the same.
safari
However, this phenomenon is only seen in the text of the svg element, and elements such as rect are normally displayed.
Is there any way to ensure that the transform-orgin is applied normally in Safari?

Related

How to animate group of svg objects along an svg path

I need to animate the alphabet along a path so that it arcs to fit the path as it animates in.
I have tried using the arc path with an animateMotion tag in the hopes that it bends the alphabet group into it, but instead it is following the path while keeping the group of alphabet letters in a straight line.
Is there any way I can achieve this effect?
https://codepen.io/Finches/pen/vYgMBwW
Edit to include mandatory cody snippet (easier to just get the full svg from the codepen):
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1359px"
height="396px" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">

You will need to animate each letter using the same animation and a delay declared with the begin attribute. In the next example I'm animating only the letters A B and C.
If you use the same path for your animation you can use a <mpath xlink:href="#path"></mpath> element to point the path you want to use and save the original path in the defs
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9626, 11.9626;
}
.st2 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9189, 11.9189;
}
.st3 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 6.0125, 6.0125;
}
</style>
<defs>
<path id="path" d="M1214.7,330.9L1214.7,330.9C1214.7,148.2,1047.5,0,841.1,0L373.6,0C167.2,0,0,148.2,0,330.9v0" />
</defs>
<path class="st0" d="M1215.7,395c0-147.7-135.7-267.9-302.4-267.9H445.7C279,127.1,143.3,247.2,143.3,395H1
c0-53.2,11.8-104.8,35-153.4c22.4-46.9,54.5-89,95.3-125.2S219.6,51.8,272.6,32C327.5,11.4,385.7,1,445.7,1h467.6
c60,0,118.3,10.4,173.1,31c53,19.8,100.5,48.2,141.3,84.4s72.9,78.3,95.3,125.2c23.2,48.6,35,100.2,35,153.4L1215.7,395z" />
<g>
<g>
<path class="st0" d="M1230.6,395c0-2,0-4-0.1-6" />
<path class="st1" d="M1230,377c-10.2-156-152.9-263.4-316.7-263.4H445.7c-165.9,0-310.1,110.2-317,269.4" />
<path class="st0" d="M128.5,389c0,2-0.1,4-0.1,6" />
</g>
</g>
<g>
<g>
<path class="st0" d="M16.5,395c0.1-2,0.2-4,0.3-6" />
<path class="st2" d="M17.6,377.1c3.6-43,14.5-92.7,32.4-130.2c21.6-45.3,52.6-86,92-120.9c39.4-34.9,85.3-62.3,136.5-81.5
c53-19.9,109.2-29.9,167.2-29.9h467.6c58,0,114.2,10.1,167.2,29.9c51.1,19.2,97.1,46.6,136.5,81.5c39.4,34.9,70.4,75.6,92,120.9
c18.7,39.2,29.7,91.8,32.9,136.2" />
<path class="st0" d="M1342.2,389c0.1,2,0.2,4,0.3,6" />
</g>
</g>
<g>
<g>
<path class="st0" d="M1286.9,395L1286.9,395c0-1,0-2,0-3" />
<path class="st3" d="M1286.7,385.9C1281.3,207.3,1116.2,64,913.3,64H445.7C241.7,64,75.8,209,72.2,388.9" />
<path class="st0" d="M72.2,392c0,1,0,2,0,3v0" />
</g>
</g>
<!-- Alphabet -->
<g>
<g id="a" transform="translate(-35,-35)">
<animateMotion dur="10s" repeatCount="indefinite">
<mpath xlink:href="#path"></mpath>
</animateMotion>
<rect x="1" y="1" class="st0" width="69.2" height="69.2" />
<path d="M14.7,52.2L31.8,7.6h6.4l18.3,44.6h-6.7l-5.2-13.5H25.9L21,52.2H14.7z M27.6,33.9h15.1L38,21.5c-1.4-3.8-2.5-6.8-3.2-9.3
c-0.6,2.9-1.4,5.7-2.4,8.5L27.6,33.9z" />
</g>
<g id="b" transform="translate(-121,-35)">
<animateMotion dur="10s" repeatCount="indefinite" begin="1s">
<mpath xlink:href="#path"></mpath>
</animateMotion>
<rect x="85.9" y="1" class="st0" width="69.2" height="69.2" />
<path d="M104.2,52.3V7.7h16.7c3.4,0,6.1,0.5,8.2,1.4c2.1,0.9,3.7,2.3,4.8,4.2c1.2,1.9,1.8,3.8,1.8,5.9c0,1.9-0.5,3.7-1.6,5.4
s-2.6,3-4.7,4.1c2.7,0.8,4.8,2.1,6.2,4c1.4,1.9,2.2,4.2,2.2,6.8c0,2.1-0.4,4-1.3,5.8c-0.9,1.8-2,3.2-3.3,4.2
c-1.3,1-2.9,1.7-4.9,2.2c-2,0.5-4.4,0.7-7.2,0.7H104.2z M110.1,26.5h9.6c2.6,0,4.5-0.2,5.6-0.5c1.5-0.4,2.6-1.2,3.4-2.2
c0.8-1,1.1-2.3,1.1-3.9c0-1.5-0.4-2.8-1.1-3.9s-1.7-1.9-3-2.3S122.2,13,119,13h-8.9V26.5z M110.1,47.1h11.1c1.9,0,3.2-0.1,4-0.2
c1.4-0.2,2.5-0.6,3.4-1.2s1.7-1.4,2.3-2.5c0.6-1.1,0.9-2.3,0.9-3.8c0-1.7-0.4-3.1-1.3-4.3s-2-2.1-3.5-2.6s-3.7-0.7-6.5-0.7h-10.3
V47.1z" />
</g>
<g id="c" transform="translate(-209.4,-35)">
<animateMotion dur="10s" repeatCount="indefinite" begin="2s">
<mpath xlink:href="#path"></mpath>
</animateMotion>
<rect x="174.4" y="1.1" class="st0" width="69.2" height="69.2" />
<path d="M224.8,36.7l5.9,1.5c-1.2,4.8-3.5,8.5-6.7,11.1c-3.2,2.5-7.1,3.8-11.8,3.8c-4.8,0-8.7-1-11.7-2.9c-3-2-5.3-4.8-6.9-8.5
c-1.6-3.7-2.4-7.7-2.4-12c0-4.6,0.9-8.7,2.7-12.2c1.8-3.5,4.3-6.1,7.6-7.9S208.4,7,212.3,7c4.5,0,8.2,1.1,11.3,3.4
c3,2.3,5.2,5.5,6.4,9.6l-5.8,1.4c-1-3.2-2.5-5.6-4.5-7.1c-2-1.5-4.4-2.2-7.4-2.2c-3.4,0-6.3,0.8-8.6,2.5s-3.9,3.8-4.9,6.6
c-0.9,2.8-1.4,5.6-1.4,8.6c0,3.8,0.6,7.1,1.7,9.9c1.1,2.8,2.8,4.9,5.2,6.3c2.3,1.4,4.9,2.1,7.6,2.1c3.3,0,6.1-1,8.4-2.9
C222.4,43.3,224,40.4,224.8,36.7z" />
</g>
</g>
</svg>

For solution one can use SVG: textPath
This will significantly reduce the code, since there will be only one path and the same animation for the movement of letters along this path.
Each letter of the alphabet is wrapped in tags - <tspan dx="0" dy="30">A</tspan>
The spacing between letters can be adjusted with the dx parameter
or with letter-spacing = "0.18em"
I chose letter-spacing as Firefox and Chrome do different spacing adjustments with dx and dy.
Since initially all the letters of the alphabet do not fit on the
traffic route, it must be made longer:
Below is the complete code, the animation of the movement of the letters will start after the click:
.container {
width:100vw;
height:100vh;
}
.st0 {
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9626, 11.9626;
}
.st2 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9189, 11.9189;
}
#st3 {
fill: none;
stroke: #565656;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 6.0125, 6.0125;
}
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">
<path id="st3" d="m73.1 2823.3 0-2367.5L72.2 388.9c0 0 6.7-64.1 17.1-94.2 10.2-29.6 24.9-58 43.6-83.1 19-25.4 42.8-47.4 68.1-66.5 25-18.8 52.8-33.9 81.4-46.5 29.6-13.1 79.6-27.3 92.5-29.8 8.5-1.7 568.1-7.2 597.3-1.8 30.1 5.5 64 14.6 94.4 26.7 25.5 10.2 50.3 22.8 73.1 38.2 25.4 17.2 49.5 36.9 69.8 59.8 21.2 23.9 40.8 50.3 53.2 79.7C1277.7 307.4 1286.7 385.9 1286.7 385.9" />
<!-- Alphabet -->
<text font-size="100px" fill="#565656" letter-spacing="0.18em">
<textPath xlink:href="#st3" startOffset="100%" >
<tspan dx="0" dy="30"> A</tspan>
<tspan dx="0" dy="0"> B</tspan>
<tspan dx="0" dy="0"> C</tspan>
<tspan dx="0" dy="0"> D</tspan>
<tspan dx="0" dy="0"> E</tspan>
<tspan dx="0" dy="0"> F</tspan>
<tspan dx="0" dy="0"> G</tspan>
<tspan dx="0" dy="0"> H</tspan>
<tspan dx="0" dy="0"> I</tspan>
<tspan dx="0" dy="0"> J</tspan>
<tspan dx="0" dy="0"> K</tspan>
<tspan dx="0" dy="0"> L</tspan>
<tspan dx="0" dy="0"> M</tspan>
<tspan dx="0" dy="0"> N</tspan>
<tspan dx="0" dy="0"> O</tspan>
<tspan dx="0" dy="0"> P</tspan>
<tspan dx="0" dy="0"> Q</tspan>
<tspan dx="0" dy="0">R</tspan>
<tspan dx="0" dy="0"> S</tspan>
<tspan dx="0" dy="0"> T</tspan>
<tspan dx="0" dy="0"> U</tspan>
<tspan dx="0" dy="0"> V</tspan>
<tspan dx="0" dy="0"> W</tspan>
<tspan dx="0" dy="0"> X</tspan>
<tspan dx="0" dy="0"> Y</tspan>
<tspan dx="0" dy="0"> Z</tspan>
<animate attributeName="startOffset" from="100%" to="-20%" begin="svg1.click" dur="20s" repeatCount="indefinite"/>
</text>
</textPath>
<path class="st0" d="M1215.7,395c0-147.7-135.7-267.9-302.4-267.9H445.7C279,127.1,143.3,247.2,143.3,395H1 c0-53.2,11.8-104.8,35-153.4c22.4-46.9,54.5-89,95.3-125.2S219.6,51.8,272.6,32C327.5,11.4,385.7,1,445.7,1h467.6 c60,0,118.3,10.4,173.1,31c53,19.8,100.5,48.2,141.3,84.4s72.9,78.3,95.3,125.2c23.2,48.6,35,100.2,35,153.4L1215.7,395z" />
<path class="st1" d="M1230,377c-10.2-156-152.9-263.4-316.7-263.4H445.7c-165.9,0-310.1,110.2-317,269.4" />
<path class="st2" d="M17.6,377.1c3.6-43,14.5-92.7,32.4-130.2c21.6-45.3,52.6-86,92-120.9c39.4-34.9,85.3-62.3,136.5-81.5c53-19.9,109.2-29.9,167.2-29.9h467.6c58,0,114.2,10.1,167.2,29.9c51.1,19.2,97.1,46.6,136.5,81.5c39.4,34.9,70.4,75.6,92,120.9
c18.7,39.2,29.7,91.8,32.9,136.2" />
<rect x="0" y="398" width="1400" height="800" fill="white" />
</svg>
In the question, each letter is wrapped in a frame.
This can be solved by using Unicode characters, which will replace Latin letters with a frame around the letter. Ⓐ - Ⓐ
Since this is essentially a font, you can style it: setting the size, color, etc.
The rest is the same as in the first example. Only letters are replaced with unicode characters
.container {
width:100vw;
height:100vh;
}
.st0 {
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9626, 11.9626;
}
.st2 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9189, 11.9189;
}
#st3 {
fill: none;
stroke: #565656;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 6.0125, 6.0125;
}
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">
<path id="st3" d="m73.1 2823.3 0-2367.5L72.2 388.9c0 0 6.7-64.1 17.1-94.2 10.2-29.6 24.9-58 43.6-83.1 19-25.4 42.8-47.4 68.1-66.5 25-18.8 52.8-33.9 81.4-46.5 29.6-13.1 79.6-27.3 92.5-29.8 8.5-1.7 568.1-7.2 597.3-1.8 30.1 5.5 64 14.6 94.4 26.7 25.5 10.2 50.3 22.8 73.1 38.2 25.4 17.2 49.5 36.9 69.8 59.8 21.2 23.9 40.8 50.3 53.2 79.7C1277.7 307.4 1286.7 385.9 1286.7 385.9" />
<!-- Alphabet -->
<text font-size="100px" fill="#565656">
<textPath xlink:href="#st3" startOffset="100%" >
<tspan dx="0" dy="30"> Ⓐ</tspan>
<tspan dx="0" dy="0"> Ⓑ</tspan>
<tspan dx="0" dy="0"> Ⓒ</tspan>
<tspan dx="0" dy="0"> Ⓓ</tspan>
<tspan dx="0" dy="0"> Ⓔ</tspan>
<tspan dx="0" dy="0"> Ⓕ</tspan>
<tspan dx="0" dy="0"> Ⓖ</tspan>
<tspan dx="0" dy="0"> Ⓗ</tspan>
<tspan dx="0" dy="0"> Ⓘ</tspan>
<tspan dx="0" dy="0"> Ⓙ</tspan>
<tspan dx="0" dy="0"> Ⓚ</tspan>
<tspan dx="0" dy="0"> Ⓛ</tspan>
<tspan dx="0" dy="0"> Ⓜ</tspan>
<tspan dx="0" dy="0"> Ⓝ</tspan>
<tspan dx="0" dy="0"> Ⓞ</tspan>
<tspan dx="0" dy="0"> Ⓟ</tspan>
<tspan dx="0" dy="0"> Ⓠ</tspan>
<tspan dx="0" dy="0"> Ⓡ</tspan>
<tspan dx="0" dy="0"> Ⓢ</tspan>
<tspan dx="0" dy="0"> Ⓣ</tspan>
<tspan dx="0" dy="0"> Ⓤ</tspan>
<tspan dx="0" dy="0"> Ⓥ</tspan>
<tspan dx="0" dy="0"> Ⓦ</tspan>
<tspan dx="0" dy="0"> Ⓧ</tspan>
<tspan dx="0" dy="0"> Ⓨ</tspan>
<tspan dx="0" dy="0"> Ⓩ</tspan>
<animate attributeName="startOffset" from="100%" to="-20%" begin="svg1.click" dur="20s" repeatCount="indefinite"/>
</text>
</textPath>
<path class="st0" d="M1215.7,395c0-147.7-135.7-267.9-302.4-267.9H445.7C279,127.1,143.3,247.2,143.3,395H1 c0-53.2,11.8-104.8,35-153.4c22.4-46.9,54.5-89,95.3-125.2S219.6,51.8,272.6,32C327.5,11.4,385.7,1,445.7,1h467.6 c60,0,118.3,10.4,173.1,31c53,19.8,100.5,48.2,141.3,84.4s72.9,78.3,95.3,125.2c23.2,48.6,35,100.2,35,153.4L1215.7,395z" />
<path class="st1" d="M1230,377c-10.2-156-152.9-263.4-316.7-263.4H445.7c-165.9,0-310.1,110.2-317,269.4" />
<path class="st2" d="M17.6,377.1c3.6-43,14.5-92.7,32.4-130.2c21.6-45.3,52.6-86,92-120.9c39.4-34.9,85.3-62.3,136.5-81.5c53-19.9,109.2-29.9,167.2-29.9h467.6c58,0,114.2,10.1,167.2,29.9c51.1,19.2,97.1,46.6,136.5,81.5c39.4,34.9,70.4,75.6,92,120.9
c18.7,39.2,29.7,91.8,32.9,136.2" />
<rect x="0" y="398" width="1400" height="800" fill="white" />
</svg>
An example of styling individual letters
For the unicode character of the letter A in a circle - Ⓐ
<tspan dx="0" dy="30" style="fill:red; font-size:120px;"> Ⓐ</tspan>
.container {
width:100vw;
height:100vh;
}
.st0 {
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9626, 11.9626;
}
.st2 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9189, 11.9189;
}
#st3 {
fill: none;
stroke: #565656;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 6.0125, 6.0125;
}
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">
<path id="st3" d="m73.1 2823.3 0-2367.5L72.2 388.9c0 0 6.7-64.1 17.1-94.2 10.2-29.6 24.9-58 43.6-83.1 19-25.4 42.8-47.4 68.1-66.5 25-18.8 52.8-33.9 81.4-46.5 29.6-13.1 79.6-27.3 92.5-29.8 8.5-1.7 568.1-7.2 597.3-1.8 30.1 5.5 64 14.6 94.4 26.7 25.5 10.2 50.3 22.8 73.1 38.2 25.4 17.2 49.5 36.9 69.8 59.8 21.2 23.9 40.8 50.3 53.2 79.7C1277.7 307.4 1286.7 385.9 1286.7 385.9" />
<!-- Alphabet -->
<text font-size="100px" fill="#565656">
<textPath xlink:href="#st3" startOffset="100%" >
<tspan dx="0" dy="30" style="fill:red; font-size:120px;"> Ⓐ</tspan>
<tspan dx="0" dy="0"> Ⓑ</tspan>
<tspan dx="0" dy="0"> Ⓒ</tspan>
<tspan dx="0" dy="0"> Ⓓ</tspan>
<tspan dx="0" dy="0"> Ⓔ</tspan>
<tspan dx="0" dy="0"> Ⓕ</tspan>
<tspan dx="0" dy="0"> Ⓖ</tspan>
<tspan dx="0" dy="0"> Ⓗ</tspan>
<tspan dx="0" dy="0"> Ⓘ</tspan>
<tspan dx="0" dy="0" style="fill:dodgerblue; font-size:120px;"> Ⓙ</tspan>
<tspan dx="0" dy="0"> Ⓚ</tspan>
<tspan dx="0" dy="0"> Ⓛ</tspan>
<tspan dx="0" dy="0"> Ⓜ</tspan>
<tspan dx="0" dy="0" style="fill:yellowgreen; font-size:120px;"> Ⓝ</tspan>
<tspan dx="0" dy="0"> Ⓞ</tspan>
<tspan dx="0" dy="0"> Ⓟ</tspan>
<tspan dx="0" dy="0"> Ⓠ</tspan>
<tspan dx="0" dy="0"> Ⓡ</tspan>
<tspan dx="0" dy="0"> Ⓢ</tspan>
<tspan dx="0" dy="0" style="fill:gold; font-size:120px;"> Ⓣ</tspan>
<tspan dx="0" dy="0"> Ⓤ</tspan>
<tspan dx="0" dy="0"> Ⓥ</tspan>
<tspan dx="0" dy="0"> Ⓦ</tspan>
<tspan dx="0" dy="0"> Ⓧ</tspan>
<tspan dx="0" dy="0"> Ⓨ</tspan>
<tspan dx="0" dy="0" style="fill:crimson; font-size:120px;"> Ⓩ</tspan>
<animate attributeName="startOffset" from="100%" to="-20%" begin="svg1.click" dur="20s" repeatCount="indefinite"/>
</text>
</textPath>
<path class="st0" d="M1215.7,395c0-147.7-135.7-267.9-302.4-267.9H445.7C279,127.1,143.3,247.2,143.3,395H1 c0-53.2,11.8-104.8,35-153.4c22.4-46.9,54.5-89,95.3-125.2S219.6,51.8,272.6,32C327.5,11.4,385.7,1,445.7,1h467.6 c60,0,118.3,10.4,173.1,31c53,19.8,100.5,48.2,141.3,84.4s72.9,78.3,95.3,125.2c23.2,48.6,35,100.2,35,153.4L1215.7,395z" />
<path class="st1" d="M1230,377c-10.2-156-152.9-263.4-316.7-263.4H445.7c-165.9,0-310.1,110.2-317,269.4" />
<path class="st2" d="M17.6,377.1c3.6-43,14.5-92.7,32.4-130.2c21.6-45.3,52.6-86,92-120.9c39.4-34.9,85.3-62.3,136.5-81.5c53-19.9,109.2-29.9,167.2-29.9h467.6c58,0,114.2,10.1,167.2,29.9c51.1,19.2,97.1,46.6,136.5,81.5c39.4,34.9,70.4,75.6,92,120.9
c18.7,39.2,29.7,91.8,32.9,136.2" />
<rect x="0" y="398" width="1400" height="800" fill="white" />
</svg>

SVG does not open properly in vector editors or convert properly using ImageMagick

I've been mightily struggling with being able to properly size and scale an svg image in a web page and have it flow properly. I've decided to give up and convert it to a png.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="1920" height="165px"
viewBox="0 0 1920 165"
>
<defs>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Bitter');
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
#import url('https://fonts.googleapis.com/css?family=Volkhov|Vollkorn');
</style>
<style>
:root {
--graphics: #670309;
--logo-text: #282B28;
--services: #fff;
--bottom-bar-font-size: 0.8em;
}
.house{
fill: none;
stroke: var(--graphics);
}
.bottom{
fill: var(--graphics);
stroke: none;
}
.logo{
fill: var(--logo-text);
stroke: none;
}
.features{
fill: #282B28;
stroke: none;
}
.services {
fill: var(--services);
stroke: none;
text-anchor: start;
alignment-baseline="middle"
font-weight="400"
font-family="Roboto Condensed"
letter-spacing="0.03em"
}
.service {
font-size: var(--bottom-bar-font-size);
font-family="Roboto Condensed";
}
.separator {
font-size: var(--bottom-bar-font-size);
font-family="Roboto Condensed";
}
</style>
</defs>
<g id="whole-logo" transform="translate(0,0)scale(1)">
<svg>
<!-- ROOF -->
<path d="m 5 100 l 90 -50 l 90 50" stroke-width="15" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- CHIMNEY -->
<path d="m 155 60 l 0 20" stroke-width="15" stroke-linecap="butt" class="house"/>
<!-- LEFT WALL -->
<path d="m 25 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- RIGHT WALL -->
<path d="m 165 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- DOOR -->
<rect x="60" y="95" height="45" width="25" class="features"/>
<!-- SINGLE WINDOW DEFINITION -->
<defs>
<rect id="window" x="0" y="0" width="10" height="10" class="features"/>
</defs>
<!-- WINDOWS -->
<g transform="translate(105,95)">
<use href="#window" transform="translate(0 0)"/>
<use href="#window" transform="translate(0 12)"/>
<use href="#window" transform="translate(12 0)"/>
<use href="#window" transform="translate(12 12)"/>
</g>
<!-- BOTTOM BAR AND TEXT -->
<g transform="translate(0,140)">
<svg width="100%" height="25px">
<rect x="0" y="0" width="100%" height="25px" class="bottom" stroke-width="0"/>
<text x="1.5em" y="65%" class="services" font-family="Roboto Condensed" >
<tspan class="service">residential</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">commercial</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">pre-purchase</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">pre-sale</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">warranty</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">expert-witness</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">sewer</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">radon</tspan>
</text>
</svg>
</g>
<!-- HOUSE DETECTIVES LLC -->
<g id="biz-name" transform="translate(265,140)scale(0.8)">
<line x1="0" x2="500" y1="0" y2="0" style="stroke: green"></line>
<text dx="70px" dy="0"
text-anchor="start"
font-size="38px"
font-family="Roboto Slab"
font-weight="bold"
transform="rotate(-90)"
class="logo">the</text>
<text dx="0" dy="0"
text-anchor="start"
font-size="78px"
font-family="Roboto Slab"
font-weight="bold"
class="logo">
<tspan class="name" x="5" dx="0" dy="-73">House</tspan>
<tspan class="name" x="-70" dx="0" dy="65">Detectives</tspan>
<tspan class="name" x="0" dx="330" dy="-2" font-size="24px">llc</tspan>
</text>
</g>
</svg>
</g>
</svg>
My svg renders just fine in a browser, and I've validated it with validator.nu. However, it does not open properly in any vector editor I've tried including Inkscape and others. For instance, Inkscape looks like:
It also does not convert properly with ImageMagick.
I get pretty close with drawsvg.org
What should I try next?

Percentage values are not valid in viewBox attributes. The purpose of the viewBox attribute is to tell the browser the dimensions of the bounding box around the content in the SVG.
In the case of your SVG a suitabel viewBox would be:
viewBox="0 0 620 165"
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="100%" height="165px"
viewBox="0 0 620 165"
>
<defs>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Bitter');
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
#import url('https://fonts.googleapis.com/css?family=Volkhov|Vollkorn');
</style>
<style>
:root {
--graphics: #670309;
--logo-text: #282B28;
--services: #fff;
--bottom-bar-font-size: 0.8em;
}
.house{
fill: none;
stroke: var(--graphics);
}
.bottom{
fill: var(--graphics);
stroke: none;
}
.logo{
fill: var(--logo-text);
stroke: none;
}
.features{
fill: #282B28;
stroke: none;
}
.services {
fill: var(--services);
stroke: none;
text-anchor: start;
alignment-baseline="middle"
font-weight="400"
font-family="Roboto Condensed"
letter-spacing="0.03em"
}
.service {
font-size: var(--bottom-bar-font-size);
font-family="Roboto Condensed";
}
.separator {
font-size: var(--bottom-bar-font-size);
font-family="Roboto Condensed";
}
</style>
</defs>
<g id="whole-logo" transform="translate(0,0)scale(1)">
<svg>
<!-- ROOF -->
<path d="m 5 100 l 90 -50 l 90 50" stroke-width="15" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- CHIMNEY -->
<path d="m 155 60 l 0 20" stroke-width="15" stroke-linecap="butt" class="house"/>
<!-- LEFT WALL -->
<path d="m 25 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- RIGHT WALL -->
<path d="m 165 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- DOOR -->
<rect x="60" y="95" height="45" width="25" class="features"/>
<!-- SINGLE WINDOW DEFINITION -->
<defs>
<rect id="window" x="0" y="0" width="10" height="10" class="features"/>
</defs>
<!-- WINDOWS -->
<g transform="translate(105,95)">
<use href="#window" transform="translate(0 0)"/>
<use href="#window" transform="translate(0 12)"/>
<use href="#window" transform="translate(12 0)"/>
<use href="#window" transform="translate(12 12)"/>
</g>
<!-- BOTTOM BAR AND TEXT -->
<g transform="translate(0,140)">
<svg width="100%" height="25px">
<rect x="0" y="0" width="100%" height="25px" class="bottom" stroke-width="0"/>
<text x="1.5em" y="65%" class="services" font-family="Roboto Condensed" >
<tspan class="service">residential</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">commercial</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">pre-purchase</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">pre-sale</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">warranty</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">expert-witness</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">sewer</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">radon</tspan>
</text>
</svg>
</g>
<!-- HOUSE DETECTIVES LLC -->
<g id="biz-name" transform="translate(265,140)scale(0.8)">
<line x1="0" x2="500" y1="0" y2="0" style="stroke: green"></line>
<text dx="70px" dy="0"
text-anchor="start"
font-size="38px"
font-family="Roboto Slab"
font-weight="bold"
transform="rotate(-90)"
class="logo">the</text>
<text dx="0" dy="0"
text-anchor="start"
font-size="78px"
font-family="Roboto Slab"
font-weight="bold"
class="logo">
<tspan class="name" x="5" dx="0" dy="-73">House</tspan>
<tspan class="name" x="-70" dx="0" dy="65">Detectives</tspan>
<tspan class="name" x="0" dx="330" dy="-2" font-size="24px">llc</tspan>
</text>
</g>
</svg>
</g>
</svg>

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>

Imagemagick svg conversion

I have a svg file which I want to be converted into jpg/png. Probem is that conversion is fine if there is no background image. But when I try to put some background image its not being rendered in the converted image and showing plain background color.
content of svg:
<svg height="370" version="1.1" width="350" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.5px;">
<defs>
<pattern id="38A07B9C-47E8-4E02-A005-E6E4443FE5D0" x="0" y="0" patternUnits="userSpaceOnUse" height="300" width="300" patternTransform="matrix(1,0,0,1,0,0) translate(0,20)">
<image x="0" y="0" href="/home/mahad/public_html/svg/user-backgrounds/4f41f6a2a75dc_back.png" width="300" height="300"/>
</pattern>
</defs>
<rect x="0" y="0" width="350" height="370" r="0" rx="0" ry="0" fill="#ffffff" stroke="none" style=""/>
<rect x="0" y="20" width="350" height="350" r="0" rx="0" ry="0" fill="url(#38A07B9C-47E8-4E02-A005-E6E4443FE5D0)" stroke="none" style="fill: url("#38A07B9C-47E8-4E02-A005-E6E4443FE5D0") rgb(0, 0, 0); opacity: 0.38;" opacity="0.38"/>
<rect x="0" y="20" width="14" height="14" r="0" rx="0" ry="0" fill="#000000" stroke="none" style=""/>
<text style="text-anchor: middle; font: 12px "Arial"; opacity: 1;" x="100" y="100" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#ff0000" font-size="12px" opacity="1" transform="matrix(1,0,0,1,73,92)">
<tspan dy="4.5">helllloooo...</tspan>
</text>
</svg>
conversion command:
echo exec("/usr/bin/convert /home/public_html/qr.svg /home/public_html/qr.png");
please help

In my case, installing librsvg2-bin fixed the problem:
sudo apt-get install librsvg2-bin

Resources