Why does this .svg file not convert to a font? - html

I'm trying to convert a .svg file to a font, by using http://icomoon.io/app/ app.
I don't know why, but it is not working. I already tried it before with other files, and it worked.
Here is code for svg image (if you need to see picture just paste it in editor and save as .svg file I guess)
I'm not sure, but I think there could be something wrong in a svg code, is it up to lates standards?
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="128pt" height="128pt" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#ffffff" d=" M 0.00 0.00 L 128.00 0.00 L 128.00 128.00 L 0.00 128.00 L 0.00 0.00 Z" />
<path fill="#010101" d=" M 53.05 7.85 C 69.60 4.58 87.31 9.41 100.07 20.39 C 100.09 32.60 100.02 44.80 100.02 57.00 C 100.22 60.35 98.92 63.52 97.31 66.38 C 94.98 70.57 92.63 74.75 90.33 78.95 C 89.56 78.96 88.03 78.97 87.27 78.97 C 83.90 84.45 80.91 90.15 77.90 95.83 C 79.17 96.72 80.45 97.58 81.74 98.44 C 80.54 100.57 79.09 102.65 78.71 105.13 C 82.31 106.41 82.80 101.95 84.36 99.87 C 85.56 100.39 86.71 101.06 88.00 101.35 C 89.27 100.96 89.70 99.54 90.37 98.54 C 92.93 93.79 95.58 89.09 98.16 84.36 C 97.57 83.89 96.39 82.95 95.80 82.48 C 98.60 76.74 102.24 71.44 104.82 65.58 C 107.10 60.38 106.35 54.59 106.48 49.08 C 106.59 41.93 106.35 34.77 106.69 27.62 C 115.57 37.75 119.81 51.61 119.26 64.98 C 118.75 80.67 111.02 95.89 98.83 105.75 C 87.62 115.07 72.58 119.59 58.09 118.04 C 42.23 116.69 27.40 107.80 18.19 94.90 C 5.63 77.77 4.45 53.31 15.17 35.00 C 23.09 21.06 37.25 10.76 53.05 7.85 Z" />
<path fill="#ffffff" d=" M 42.57 16.50 C 43.91 15.74 46.15 15.18 46.82 17.24 C 45.33 18.71 43.37 19.45 41.53 20.35 C 31.97 25.09 24.31 33.34 20.08 43.11 C 19.81 45.14 15.82 44.62 17.09 42.48 C 21.83 30.96 31.20 21.53 42.57 16.50 Z" />
<path fill="#ffffff" d=" M 24.15 46.38 C 28.38 35.64 37.29 26.97 48.08 22.92 C 49.71 23.36 49.78 25.53 48.24 26.05 C 39.99 29.47 32.89 35.71 28.77 43.65 C 28.00 45.20 27.09 46.68 26.07 48.08 C 25.59 47.66 24.63 46.81 24.15 46.38 Z" />
<path fill="#ffffff" d=" M 49.39 31.08 C 50.87 30.25 51.93 30.60 52.56 32.14 C 51.39 33.88 49.23 34.34 47.52 35.38 C 42.26 38.38 37.89 43.03 35.31 48.53 C 34.85 49.58 34.15 50.46 33.24 51.18 C 32.37 50.60 31.20 49.45 32.06 48.34 C 35.36 40.67 41.73 34.37 49.39 31.08 Z" />
<path fill="#ffffff" d=" M 57.12 43.35 C 64.70 40.81 73.62 43.30 78.78 49.39 C 85.63 57.22 85.03 70.27 77.30 77.29 C 70.25 84.18 58.20 84.72 50.68 78.29 C 44.68 73.57 41.68 65.19 43.75 57.79 C 45.27 51.06 50.57 45.44 57.12 43.35 Z" />
<path fill="#010101" d=" M 59.35 46.59 C 67.78 44.09 77.35 49.99 79.35 58.47 C 82.31 68.10 74.15 79.10 64.08 79.01 C 56.56 79.62 49.36 74.07 47.41 66.90 C 44.96 58.31 50.63 48.59 59.35 46.59 Z" />
<path fill="#ffffff" d=" M 57.86 62.84 C 57.21 57.61 64.96 54.74 67.86 59.24 C 71.45 63.49 66.35 69.54 61.41 68.10 C 59.77 66.76 57.55 65.28 57.86 62.84 Z" />
</svg>


'Problem' lays within the app.
Basicly it changes every path to the same color, so white overlapping paths just blend in. You can delete first path
<path fill="#ffffff" d=" M 0.00 0.00 L 128.00 0.00 L 128.00 128.00 L 0.00 128.00 L 0.00 0.00 Z" />
(which is just unnecessary square in the background) to see that it actually works. You will have to convert your paths into a shape so there will be no overlaps but 'cuts'.
Out of boredom I created working version:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" xml:space="preserve">
<path d="M50,26.1c-0.2,7-3.7,13.9-9.2,18.3c-5,4.2-11.8,6.2-18.3,5.5 c-7.1-0.6-13.8-4.6-17.9-10.4C-1,31.8-1.5,20.8,3.3,12.6c3.6-6.3,9.9-10.9,17-12.2C27.7-1,35.6,1.1,41.4,6.1c0,5.5,0,11,0,16.4 c0.1,1.5-0.5,2.9-1.2,4.2c-1,1.9-2.1,3.8-3.1,5.6c-0.3,0-1,0-1.4,0c-1.5,2.5-2.9,5-4.2,7.6c0.6,0.4,1.1,0.8,1.7,1.2 c-0.5,1-1.2,1.9-1.4,3c1.6,0.6,1.8-1.4,2.5-2.4c0.5,0.2,1.1,0.5,1.6,0.7c0.6-0.2,0.8-0.8,1.1-1.3c1.1-2.1,2.3-4.2,3.5-6.4 c-0.3-0.2-0.8-0.6-1.1-0.8c1.3-2.6,2.9-5,4-7.6c1-2.3,0.7-4.9,0.7-7.4c0-3.2-0.1-6.4,0.1-9.6C48.3,13.9,50.2,20.1,50,26.1z M15.6,4.3C10.5,6.6,6.3,10.8,4.1,16c-0.6,1,1.2,1.2,1.3,0.3c1.9-4.4,5.3-8.1,9.6-10.2c0.8-0.4,1.7-0.7,2.4-1.4 C17.2,3.7,16.2,4,15.6,4.3z M18,7.2C13.2,9,9.2,12.9,7.3,17.7c0.2,0.2,0.6,0.6,0.9,0.8c0.5-0.6,0.9-1.3,1.2-2c1.8-3.6,5-6.4,8.7-7.9 C18.8,8.4,18.8,7.4,18,7.2z M18.6,10.9c-3.4,1.5-6.3,4.3-7.8,7.7c-0.4,0.5,0.1,1,0.5,1.3c0.4-0.3,0.7-0.7,0.9-1.2 c1.2-2.5,3.1-4.6,5.5-5.9c0.8-0.5,1.7-0.7,2.3-1.5C19.8,10.6,19.3,10.5,18.6,10.9z M31.8,19.1c-2.3-2.7-6.3-3.8-9.7-2.7 c-2.9,0.9-5.3,3.5-6,6.5c-0.9,3.3,0.4,7.1,3.1,9.2c3.4,2.9,8.8,2.6,11.9-0.4C34.6,28.4,34.9,22.6,31.8,19.1z M25.2,32.4 c-3.4,0.3-6.6-2.2-7.5-5.4c-1.1-3.9,1.4-8.2,5.4-9.1c3.8-1.1,8.1,1.5,9,5.3C33.4,27.5,29.7,32.4,25.2,32.4z M26.9,23.5 c-1.3-2-4.8-0.7-4.5,1.6c-0.1,1.1,0.9,1.8,1.6,2.4C26.2,28.1,28.5,25.4,26.9,23.5z"/>
</svg>

Related

Adding stroke increases the stroke-width

I have been given this svg file to add to a project, being new to SVG's I am sure I have missed something.
It seems to be fine until I add the stroke to change the colour, as soon as this is applied the stroke-width seems to increase.
I am not sure if this is related to the decimal places which I know can cause blurry lines but I don't think that is the issue here.
I have tried adding stroke to the g tag and also tried it on the path tag.
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="dual-antenna"
version="1.1"
viewBox="0 0 8.4666664 8.4666664"
height="32"
width="32">
<g transform="translate(0,-288.53333)">
<path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" />
</g>
</svg>

Yes it increases because the path is a shape, to change the color you have to use the "fill" attribute. Stroke adds a stroke around the shape and therefore enlarges the shape. Look at the example :
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="dual-antenna"
version="1.1"
viewBox="0 0 8.4666664 8.4666664"
height="32"
width="32">
<g transform="translate(0,-288.53333)" stroke="#f0f" stroke-width="3%">
<path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" />
</g>
</svg>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="dual-antenna"
version="1.1"
viewBox="0 0 8.4666664 8.4666664"
height="32"
width="32">
<g transform="translate(0,-288.53333)" fill="#f0f">
<path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" />
</g>
</svg>

How to render Arabic text in svg with span elements?

I am trying to display Arabic text by replacing English words in span elements. But it interchanged by its words.
I have tried by adding direction, xml: lang, unicode-bidi to svg attributes. It changes to RTL but it did not changes order
Please refer this fiddles:
Expected output with english words modelOutput.
<!DOCTYPE html>
<html>
<head>
<title>SVG with english words</title>
</head>
<body>
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="null" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" transform="" opacity="undefined"
dominant-baseline="undefined"><tspan
x="19" fill="#dbdbdb">Browsers</tspan><tspan
x="25" dy="27" fill="#dbdbdb">Opera : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
</body>
</html>
Actual output actual.
<!DOCTYPE html>
<html>
<head>
<title>SVG with Arabic words</title>
</head>
<body>
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="null" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" transform="" opacity="undefined"
dominant-baseline="undefined"><tspan
x="19" fill="#dbdbdb">ذكي متصفح</tspan><tspan
x="25" dy="27" fill="#dbdbdb">كروم : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
</body>
</html>
I expect that Browsers will be replaced with متصفح ذكي. Similarly opera with ايفون.
Actual output image actual.
Expected output expect.
Can anyone help me to acheive this?

The problem arises because the sequence " : " has no defined direction. Unicode has a group of bidirectional control characters that help with the interpretation of such situations. If you insert a left-to-right mark between the كروم and the following interpunction, it is made clear everything that follows goes left-to-right.
While in HTML the mark could be written as ‎, this does not work inside the SVG namespace, which is pure XML. There you have to use the numeric entity ‎ instead. The extra <tspan> I introduced is not strictly neccesary, but it makes reading of the code a bit easier - otherwise the apparent order on the screen would be a bit confusing.
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="#dbdbdb" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start"
dominant-baseline="undefined"><tspan
x="19">ذكي متصفح</tspan><tspan
x="25" dy="27">كروم</tspan>‎<tspan> : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
Wouldn't live be easier without bugs? Theoretically, that should be the solution, and in Chrome in fact it is. In Firefox, the width of a rtl <tspan> is computed wrong, and the following ltr part disappears to the right. The best workaround I can find is to change the layout a bit so that the percentage number appears right-aligned at the end of the second line:
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="#dbdbdb" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start"
dominant-baseline="undefined"><tspan
x="19">ذكي متصفح</tspan><tspan
x="25" dy="27">كروم</tspan>‎<tspan text-anchor="end" x="107"> : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>

Svg animation not working as expect in my page

My Svg animation not working as my expectation in my page,The preview looks good, but it not work on my page. here is my svg code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="450" width="450" margin-top="20px">
<image x="0" y="0" width="450" height="450" xlink:href="https://test.creapowa.com/ke/data/User/Minty/home/desktop/Elastic/img/roundtripplain.svg"></image>
<defs>
<path id="basePath" d="M 120,150 A 280 500 0 0 1 320,145 L320 145 360 150 "></path>
<mask id="mask">
<use xlink:href="#basePath" stroke-width="3" stroke="white" stroke-dasharray="1000,0" fill="none">
<animate attributeName="stroke-dasharray" from="0,348.5" to="348.5,0" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"></animate>
</use>
</mask>
</defs>
<circle r="4" cx="120" cy="150" fill="#c86706"></circle>
<circle fill="#c86706" cy="150" cx="360" r="4"></circle>
<use xlink:href="#basePath" stroke-width="2" stroke-dasharray="10" stroke="#c86706" fill="none" mask="url(#mask)"></use>
<path d="M 27,3 H 21 L 13,15 H 9 L 12,3 H 5 L 3,7 H -1 L 1,0 -1,-7 H 3 L 5,-3 H 12 L 9,-15 H 13 L 21,-3 H 27 C 33,-3 33,3 27,3 Z" fill="#fef1ba" stroke="black" stroke-width="1.5">
<animatemotion rotate="auto" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite">
<mpath xlink:href="#basePath"></mpath>
</animatemotion>
</path>
<defs>
<path id="basePath1" d="M 330,330 A 500 1500 0 0 1 120,330"></path>
<mask id="mask1">
<use xlink:href="#basePath1" stroke-width="3" stroke="white" stroke-dasharray="1000,0" fill="none">
<animate attributeName="stroke-dasharray" from="0,348.5" to="348.5,0" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"></animate>
</use>
</mask>
</defs>
<circle r="4" cx="120" cy="330" fill="#c86706"></circle>
<circle fill="#c86706" cy="330" cx="330" r="4"></circle>
<use xlink:href="#basePath1" stroke-width="2" stroke-dasharray="10" stroke="#c86706" fill="none" mask="url(#mask1)"></use>
<path d="M 27,3 H 21 L 13,15 H 9 L 12,3 H 5 L 3,7 H -1 L 1,0 -1,-7 H 3 L 5,-3 H 12 L 9,-15 H 13 L 21,-3 H 27 C 33,-3 33,3 27,3 Z" fill="#fef1ba" stroke="black" stroke-width="1.5">
<animatemotion rotate="auto" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite">
<mpath xlink:href="#basePath1"></mpath>
</animatemotion>
</path>
</svg>
But in my page( Chrome browser ), The stroke-dasharray and are missing and the coordinate isn't in the right place as my expectation in the upper part, its good in the lower part. like image below:
Stroke-dash are missing in the top part and coordinate is not in the right place
Did i need to add more function? Please help me to figure out,
Thank you,

SVG - circle stretched in responsive lines

I made a responsive animation grid with SVG, but I dont know why my circles are stretched. When I resize window in some proportions, then circles looks nice.
There you can see - JSFiddle
This is my SVG Code
<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<path id="firstLine" d="M 0 100 L 50 0, M 50 0 L 100 100 ,M 100 100 L 0 50 ,M 0 50 L 100 0,M 100 0 L 0 100" class="first-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />
<path id="secondLine" d="M 100 100 L 0 0, M 0 0 L 100 50, M 100 50 L 0 100, M 0 100 L 25 0, M 25 0 L 50 100, M 50 100 L 75 0, M 75 0 L 100 100" class="second-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />
<path id="thirdLine" d="M 50 100 L 0 0, M 0 0 L 25 100, M 25 100 L 50 0, M 50 0 L 75 100, M 75 100 L 100 0, M 100 0 L 50 100" class="third-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />
<circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
<animateMotion dur="60s" repeatCount="indefinite">
<mpath xlink:href="#firstLine"/>
</animateMotion>
</circle>
<circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
<animateMotion dur="60s" repeatCount="indefinite">
<mpath xlink:href="#secondLine"/>
</animateMotion>
</circle>
<circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
<animateMotion dur="60s" repeatCount="indefinite">
<mpath xlink:href="#thirdLine"/>
</animateMotion>
</circle>
<circle cx="35" cy="20" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
</circle>
</svg>

Maybe you dont need it now but I could do it giving the viewbox the desired ratio:
i.e: 0 0 100 100 for an square ratio
0 0 25 100 for an vertical ratio
0 0 100 25 for a horizontal ratio.
Then give to the svg tag a width and height of 100% and put the svg tag inside a div, this way I can keep the ratio of the circles, lines, other draws without stretching when the user resizes the window.

SVG fill not filling properly

I'm testing out a gradient fill in my logo. I can't seem to move the centre point to the bottom left corner of the petal. What am I doing wrong? I've googled like crazy and fiddled all over. How to be able to adjust the starting point of my radial gradient to the bottom left (or any for that matter) corner (or side)?
<?xml version="1.0" encoding="UTF-8" ?>
<svg width="347pt" height="366pt" viewBox="0 0 347 366" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradpetal" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffdcfd" offset=".01" />
<stop stop-color="#ff94dd" offset="0.15" />
<stop stop-color="#ff92dd" offset="0.17" />
<stop stop-color="#feadef" offset=".32" />
<stop stop-color="#fec3ff" offset=".49" />
<stop stop-color="#fec3ff" offset=".8" />
<stop stop-color="#fe9bee" offset="1" />
</radialGradient>
</defs>
<path id="svgmoon" d=" M 125.71 4.83 C 132.21 2.77 139.01 1.97 145.66 0.59 C 133.00 9.73 120.78 19.62 110.14 31.11 C 95.76 46.55 84.01 64.51 76.14 84.11 C 58.65 127.32 60.32 176.94 76.88 220.16 C 82.95 234.74 89.81 249.48 101.01 260.89 C 110.02 269.31 119.13 277.77 129.66 284.30 C 148.41 296.68 169.88 304.84 192.02 308.51 C 216.22 312.44 241.09 311.13 265.04 306.14 C 286.12 301.57 306.41 293.94 325.81 284.60 C 332.75 280.95 339.69 277.31 346.63 273.65 C 338.54 285.17 330.90 297.05 321.77 307.80 C 309.52 322.73 294.55 335.51 277.40 344.48 C 247.85 359.93 213.98 364.68 181.02 365.43 C 146.84 365.46 112.77 355.39 83.93 337.08 C 54.54 318.15 30.44 290.79 16.33 258.74 C 7.91 239.92 2.64 219.67 0.89 199.12 C 0.42 190.44 0.54 181.74 0.82 173.06 C 3.04 133.90 17.63 95.66 41.68 64.69 C 63.28 37.42 92.09 14.92 125.71 4.83 Z"
/>
<path id="svgpetal" fill="url(#gradpetal)" x1="0" y1="0" x2="50" width="350" height="370" d=" M 238.54 53.89 C 246.99 52.67 255.63 52.63 264.04 54.18 C 266.61 54.66 269.01 56.33 269.99 58.80 C 273.60 68.31 270.50 78.82 273.54 88.44 C 274.39 91.28 276.62 93.61 279.36 94.71 C 288.28 98.60 298.56 96.58 307.45 100.58 C 310.41 101.97 312.32 105.01 312.36 108.28 C 314.10 131.28 305.41 153.92 292.57 172.66 C 283.39 185.84 272.24 197.87 258.68 206.66 C 236.86 220.77 210.61 226.11 184.96 227.17 C 174.33 227.35 163.68 228.06 153.07 227.17 C 146.99 226.56 140.17 224.70 136.60 219.33 C 131.70 210.74 131.82 200.46 132.27 190.89 C 133.16 171.85 134.93 152.54 141.46 134.50 C 147.98 115.64 159.29 98.46 174.28 85.27 C 192.18 69.14 214.50 57.22 238.54 53.89 Z"
/>
<path id="svgspine" d=" M 273.33 92.20 C 273.84 92.35 274.88 92.65 275.39 92.80 C 271.04 106.15 262.39 117.73 252.21 127.23 C 245.23 134.25 238.16 141.26 230.01 146.95 C 220.43 154.24 209.84 159.99 199.02 165.20 C 191.88 168.52 186.16 174.09 180.76 179.69 C 173.54 187.94 168.46 197.87 160.80 205.75 C 154.38 212.01 146.82 216.96 139.02 221.31 C 137.69 220.37 137.65 219.57 138.90 218.94 C 143.54 216.35 148.01 213.49 152.21 210.23 C 163.70 202.21 170.01 189.31 178.67 178.68 C 184.55 172.81 190.49 166.69 198.11 163.10 C 213.73 155.96 228.45 146.73 241.11 135.10 C 245.70 130.69 250.19 126.18 254.78 121.78 C 262.78 113.26 269.72 103.41 273.33 92.20 Z"
/>
</svg>

cx and cy define the centre point of a radial gradient.
<?xml version="1.0" encoding="UTF-8" ?>
<svg width="347pt" height="366pt" viewBox="0 0 347 366" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradpetal" gradientUnits="userSpaceOnUse" cx="40%" cy="60%">
<stop stop-color="#ffdcfd" offset=".01" />
<stop stop-color="#ff94dd" offset="0.15" />
<stop stop-color="#ff92dd" offset="0.17" />
<stop stop-color="#feadef" offset=".32" />
<stop stop-color="#fec3ff" offset=".49" />
<stop stop-color="#fec3ff" offset=".8" />
<stop stop-color="#fe9bee" offset="1" />
</radialGradient>
</defs>
<path id="svgmoon" d=" M 125.71 4.83 C 132.21 2.77 139.01 1.97 145.66 0.59 C 133.00 9.73 120.78 19.62 110.14 31.11 C 95.76 46.55 84.01 64.51 76.14 84.11 C 58.65 127.32 60.32 176.94 76.88 220.16 C 82.95 234.74 89.81 249.48 101.01 260.89 C 110.02 269.31 119.13 277.77 129.66 284.30 C 148.41 296.68 169.88 304.84 192.02 308.51 C 216.22 312.44 241.09 311.13 265.04 306.14 C 286.12 301.57 306.41 293.94 325.81 284.60 C 332.75 280.95 339.69 277.31 346.63 273.65 C 338.54 285.17 330.90 297.05 321.77 307.80 C 309.52 322.73 294.55 335.51 277.40 344.48 C 247.85 359.93 213.98 364.68 181.02 365.43 C 146.84 365.46 112.77 355.39 83.93 337.08 C 54.54 318.15 30.44 290.79 16.33 258.74 C 7.91 239.92 2.64 219.67 0.89 199.12 C 0.42 190.44 0.54 181.74 0.82 173.06 C 3.04 133.90 17.63 95.66 41.68 64.69 C 63.28 37.42 92.09 14.92 125.71 4.83 Z"
/>
<path id="svgpetal" fill="url(#gradpetal)" d=" M 238.54 53.89 C 246.99 52.67 255.63 52.63 264.04 54.18 C 266.61 54.66 269.01 56.33 269.99 58.80 C 273.60 68.31 270.50 78.82 273.54 88.44 C 274.39 91.28 276.62 93.61 279.36 94.71 C 288.28 98.60 298.56 96.58 307.45 100.58 C 310.41 101.97 312.32 105.01 312.36 108.28 C 314.10 131.28 305.41 153.92 292.57 172.66 C 283.39 185.84 272.24 197.87 258.68 206.66 C 236.86 220.77 210.61 226.11 184.96 227.17 C 174.33 227.35 163.68 228.06 153.07 227.17 C 146.99 226.56 140.17 224.70 136.60 219.33 C 131.70 210.74 131.82 200.46 132.27 190.89 C 133.16 171.85 134.93 152.54 141.46 134.50 C 147.98 115.64 159.29 98.46 174.28 85.27 C 192.18 69.14 214.50 57.22 238.54 53.89 Z"
/>
<path id="svgspine" d=" M 273.33 92.20 C 273.84 92.35 274.88 92.65 275.39 92.80 C 271.04 106.15 262.39 117.73 252.21 127.23 C 245.23 134.25 238.16 141.26 230.01 146.95 C 220.43 154.24 209.84 159.99 199.02 165.20 C 191.88 168.52 186.16 174.09 180.76 179.69 C 173.54 187.94 168.46 197.87 160.80 205.75 C 154.38 212.01 146.82 216.96 139.02 221.31 C 137.69 220.37 137.65 219.57 138.90 218.94 C 143.54 216.35 148.01 213.49 152.21 210.23 C 163.70 202.21 170.01 189.31 178.67 178.68 C 184.55 172.81 190.49 166.69 198.11 163.10 C 213.73 155.96 228.45 146.73 241.11 135.10 C 245.70 130.69 250.19 126.18 254.78 121.78 C 262.78 113.26 269.72 103.41 273.33 92.20 Z"
/>
</svg>