SVG text shifted on Edge and IE - svg

I have isolated a case where SVG text is shifted only on Microsoft browsers (EDGE & IE)
<svg width="360" height="186" viewBox="0 0 120 64" preserveAspectRatio="none">
<text font-size="72" font-family="Arial" fill="#ff2204" x="0" y="62" text-anchor="middle">
<tspan x="50%" dy="0">test</tspan>
</text>
</svg>
Is there a way to make the text centered as in other browsers?
Here's the sample code in jsfiddle


Removing the whitespace between </tspan> and </text> resolves the issue
<svg width="360" height="186" viewBox="0 0 120 64" preserveAspectRatio="none">
<text font-size="72" font-family="Arial" fill="#ff2204" x="0" y="62" text-anchor="middle">
<tspan x="50%" dy="0">test</tspan></text>
</svg>
jsfiddle

Related

How to add text inside an SVG path

I have an svg image, I want to add text inside the path element however it doesn't seem to inside the image, just around it.
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g id="Templates">
<path id="cloud"
d="M17,10.57a3,3,0,0,1,1.18.23,3.11,3.11,0,0,1,1,.64,2.82,2.82,0,0,1,.65,1,3,3,0,0,1-1.6,3.95,3.08,3.08,0,0,1-1.16.23H8a4,4,0,0,1-1.56-.31,4,4,0,0,1,0-7.38A4,4,0,0,1,8,8.57a3.54,3.54,0,0,1,.73.07,4.63,4.63,0,0,1,.72-.87,4.72,4.72,0,0,1,.89-.65,4.58,4.58,0,0,1,1-.41,4.79,4.79,0,0,1,1.13-.14,4.37,4.37,0,0,1,1.64.3,4.55,4.55,0,0,1,1.36.84,4.39,4.39,0,0,1,1,1.27A4.66,4.66,0,0,1,17,10.57Z"
style="fill:#1d2639" />
</g>
<text font-size="2">
<textPath href="#cloud" text-anchor="middle">
CLOUDD
</textPath>
</text>
</svg>
How to place the text in the center of the cloud.

The side="left|right" attribute can be used for placing the text on a specific side. This can be used in combination with dominant-baseline="auto|hanging" to make the text stick to the bottom or top of the text.
In this example I also added the pathLength attribute to the <path> to control the position along the path together with startOffset on the <textPath>. And a stroke to the <path> so that the text is not directly on the edge of the cloud.
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g id="Templates">
<path id="cloud" d="M17,10.57a3,3,0,0,1,1.18.23,3.11,3.11,0,0,1,1,.64,2.82,2.82,0,0,1,.65,1,3,3,0,0,1-1.6,3.95,3.08,3.08,0,0,1-1.16.23H8a4,4,0,0,1-1.56-.31,4,4,0,0,1,0-7.38A4,4,0,0,1,8,8.57a3.54,3.54,0,0,1,.73.07,4.63,4.63,0,0,1,.72-.87,4.72,4.72,0,0,1,.89-.65,4.58,4.58,0,0,1,1-.41,4.79,4.79,0,0,1,1.13-.14,4.37,4.37,0,0,1,1.64.3,4.55,4.55,0,0,1,1.36.84,4.39,4.39,0,0,1,1,1.27A4.66,4.66,0,0,1,17,10.57Z"
style="fill:#1d2639" stroke="#1d2639"
stroke-width="1" pathLength="100"/>
</g>
<text font-size="2">
<textPath href="#cloud" fill="white" text-anchor="start"
dominant-baseline="auto" side="right" startOffset="55">
CLOUDD
</textPath>
</text>
</svg>
Update
Here is a version where the text is just placed in the middle of the SVG.
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g id="Templates">
<path id="cloud" d="M17,10.57a3,3,0,0,1,1.18.23,3.11,3.11,0,0,1,1,.64,2.82,2.82,0,0,1,.65,1,3,3,0,0,1-1.6,3.95,3.08,3.08,0,0,1-1.16.23H8a4,4,0,0,1-1.56-.31,4,4,0,0,1,0-7.38A4,4,0,0,1,8,8.57a3.54,3.54,0,0,1,.73.07,4.63,4.63,0,0,1,.72-.87,4.72,4.72,0,0,1,.89-.65,4.58,4.58,0,0,1,1-.41,4.79,4.79,0,0,1,1.13-.14,4.37,4.37,0,0,1,1.64.3,4.55,4.55,0,0,1,1.36.84,4.39,4.39,0,0,1,1,1.27A4.66,4.66,0,0,1,17,10.57Z"
style="fill:#1d2639" />
</g>
<text font-size="2" x="12" y="12" text-anchor="middle"
dominant-baseline="middle" fill="white">CLOUDD</text>
</svg>

How to make SVG black bar with centered text responsive?

I'm trying to make an SVG element fit to the bottom of the page with "Loading..." text centered regardless of the container's width. This is my current code which isn't working as the message is always in a fixed position.
<svg id="svg-bottom" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="bottom">
<rect height="40" width="100%" y="0" x="0" fill="#000000" fill-opacity="0.676460598" id="panel"></rect>
<text id="status" font-family="GothamRounded-Medium, Gotham Rounded" font-size="20" font-weight="400" fill="#FFFFFF">
<tspan x="190.97" y="16">Loading…</tspan>
</text>
</g>

I solved the above with the following:
<text font-family="GothamRounded-Medium, Gotham Rounded" font-size="20" font-weight="400" fill="#FFFFFF" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">Loading…</text>

Mouseover on SVG text in the way

I’m trying to make an infographic that changes colour as you mouseover and click various sections. I have managed to do the mouseover colour change and click, however there is text over the block and when the mouse goes over that the SVG thinks that i’m Mousing a different layer. I’ve tried adding the :hover to the group but had no joy. Any thoughts would be welcome:
https://jsfiddle.net/dxv0paco/2/
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 798">
<defs>
<style>.cls-25,.cls-31,.cls-32{font-family:MyriadPro-Regular, Myriad Pro;}.cls-25{font-size:24px;}.cls-25,.cls-30,.cls-31{fill:#fff;}.cls-31{font-size:14px;}.cls-32{letter-spacing:-0.03em;}.cls-48{fill:#d4145a;}.cls-49{letter-spacing:0em;}.cls-48:hover{fill: #fbb03b;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-ms-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}g#two a{cursor: pointer;}
</style>
</defs>
<title>Artboard2</title>
<g id="two"><a href="#">
<path class="cls-48" d="M733.28,197q6.06,12.34-.55,25.78Q725.28,237.92,703,251.9a145.37,145.37,0,0,1-27.38,13.7,135.53,135.53,0,0,1-24,6.54q-10.92,1.78-26.33,3.1-11,.83-19.18,2t-16.5,3.15l18.68,29.82-32.27,20.21a188.93,188.93,0,0,1-10.65,160.66q7.26-5.6,17.68-4.67,15.64,1.39,39.69,16.8l17.74,11.36-13.26,20.69L609.4,523.89q-7.68-4.92-12.68-6.46t-7.25,2q-1.58,2.46.66,5.48a28.51,28.51,0,0,0,6.13,5.83q3.88,2.82,11.58,7.75l4.14,2.65q21.87,14,27.37,5.43a7.51,7.51,0,0,0,1.09-2.12l30.35,19.44q-3.46,5.4-1.16,10.7t11.18,11q14.38,9.21,17.55,4.27,1.95-3.06,0-5.58a31.44,31.44,0,0,0-5.75-5.34c-2.51-1.88-4.32-3.24-5.45-4.07L682,571.56l13.41-20.93,6,3.67q23.18,15,30,28.49a24.8,24.8,0,0,1,1.77,19.46A389.85,389.85,0,0,0,733.28,197Z"/>
<text class="cls-25" transform="translate(644 309.14)">Business
<tspan class="cls-49" x="0" y="28.8">Planning</tspan>
</text>
<text class="cls-31" transform="translate(604.83 358.31)">
<tspan class="cls-32">We Formulate a plan that</tspan>
<tspan x="0" y="16.8">achieves your goals then we</tspan>
<tspan x="0" y="33.6">manage and evolve that plan</tspan>
<tspan x="0" y="50.4">as your business develops. Not</tspan>
<tspan x="0" y="67.2">a document but a model in</tspan>
<tspan x="0" y="84">which you test scenarios and</tspan>
<tspan x="0" y="100.8">that evolves with you.</tspan>
</text>
<path class="cls-30" d="M686.15,528.26c1-2.4,2.38-4.36,5-5.13a6.33,6.33,0,0,1,4.55.34,1.46,1.46,0,0,0,1.85-.28,11.1,11.1,0,0,1,2.12-1.66c.92-.48,1.77-.53,2.4.32a2,2,0,0,1-.26,2.55,3,3,0,0,1-.69.58,2.87,2.87,0,0,0-1.42,3.65c.91,3.28-1.34,6.71-4.61,7.74a6.94,6.94,0,0,1-8.33-3.66c-.18-.39-.18-.89-.63-1.13Zm10,1.53a3.18,3.18,0,0,0-3.12-3.21,3.32,3.32,0,0,0-3.25,3.29,3.39,3.39,0,0,0,3.26,3.14A3.2,3.2,0,0,0,696.19,529.79Z"/>
<path class="cls-30" d="M754,509.56c-.42.27-.41.78-.6,1.17a6.17,6.17,0,0,1-5.58,3.69,5.87,5.87,0,0,1-5.89-3.37,1.79,1.79,0,0,0-2.07-1.18,4.35,4.35,0,0,1-1.35,0,1.69,1.69,0,0,1-1.48-2.07c.14-.92.56-1.36,1.71-1.32s2.58,0,3.36-1.67a4.92,4.92,0,0,1,4.51-2.87c1.78-.09,3.38-.18,4.78,1a8,8,0,0,1,2.61,3.94Zm-3.68-1.45a2.76,2.76,0,0,0-2.76-2.77A2.73,2.73,0,0,0,744.8,508c-.06,1.16,1.28,2.94,2.23,3A3.12,3.12,0,0,0,750.32,508.11Z"/>
<path class="cls-30" d="M719.84,522a13.2,13.2,0,0,1-9.28-3.67c-.78-.73-1.25-.71-1.93,0a13.68,13.68,0,0,1-1.82,1.57,1.67,1.67,0,0,1-2.53-.25,1.64,1.64,0,0,1,.21-2.54c2.58-1.56,2.87-3.38,2-6.24-1.29-4-.11-7.93,2.45-11.32.48-.64.53-1,0-1.63-1.79-2-3.55-4-5.25-6a1.4,1.4,0,0,0-1.79-.44,6.82,6.82,0,0,1-8.58-4.79A6.87,6.87,0,0,1,706.48,483a6.6,6.6,0,0,1-.39,4.84,1.25,1.25,0,0,0,.31,1.75c1.87,1.94,3.61,4,5.35,6,.38.44.59.7,1.2.34a14.29,14.29,0,0,1,6.35-1.68,13.09,13.09,0,0,1,8.11,1.91.84.84,0,0,0,1.17-.12c1.24-1.11,2.46-2.23,3.76-3.26.58-.46.38-.88.27-1.43a5.4,5.4,0,0,1,1.8-5.57,5.09,5.09,0,0,1,5.49-.95,5.5,5.5,0,0,1-3.37,10.47,1.86,1.86,0,0,0-2.1.52,31.71,31.71,0,0,1-2.85,2.47c-.74.55-.72,1-.24,1.68,3.33,4.78,3.49,9.78.82,14.88a12.13,12.13,0,0,1-5.26,5.23,1.61,1.61,0,0,0-1,2.32c.45,1.38.45,2.92,1,4.22s2.36,1,3.53,1.69A7.3,7.3,0,0,1,727.2,542a7.41,7.41,0,0,1-7.24-4.64,7.23,7.23,0,0,1,2.28-8.39,2,2,0,0,0,.84-2.6c-.24-.71-.33-1.47-.5-2.2C722.07,522,722.07,522,719.84,522Zm10.41-14A10.19,10.19,0,0,0,719.5,497.8,10.26,10.26,0,1,0,730.25,508Zm-3.53,30.3a3.6,3.6,0,0,0,3.75-3.49,3.72,3.72,0,0,0-3.63-3.79,3.63,3.63,0,0,0-3.64,3.6A3.54,3.54,0,0,0,726.72,538.27ZM703.05,484.9a3.07,3.07,0,0,0-3.13-3.13,3.12,3.12,0,0,0-3.22,3.2c0,1.42,1.71,3.4,2.88,3.4A3.7,3.7,0,0,0,703.05,484.9Zm36.78,5.32a2,2,0,0,0-1.84-2,1.86,1.86,0,0,0-1.81,2,1.66,1.66,0,0,0,1.87,1.72A1.72,1.72,0,0,0,739.83,490.22Z"/>
<path class="cls-48" d="M696.19,529.79a3.2,3.2,0,0,1-3.11,3.22,3.39,3.39,0,0,1-3.26-3.14,3.32,3.32,0,0,1,3.25-3.29A3.18,3.18,0,0,1,696.19,529.79Z"/>
<path class="cls-48" d="M750.32,508.11a3.12,3.12,0,0,1-3.29,2.81c-.95,0-2.29-1.81-2.23-3a2.73,2.73,0,0,1,2.76-2.61A2.76,2.76,0,0,1,750.32,508.11Z"/>
<path class="cls-48" d="M730.25,508A10.28,10.28,0,1,1,719.5,497.8,10.24,10.24,0,0,1,730.25,508Z"/>
<path class="cls-48" d="M726.72,538.27a3.54,3.54,0,0,1-3.52-3.68,3.63,3.63,0,0,1,3.64-3.6,3.72,3.72,0,0,1,3.63,3.79A3.6,3.6,0,0,1,726.72,538.27Z"/>
<path class="cls-48" d="M703.05,484.9a3.7,3.7,0,0,1-3.47,3.47c-1.17,0-2.85-2-2.88-3.4a3.12,3.12,0,0,1,3.22-3.2A3.07,3.07,0,0,1,703.05,484.9Z"/>
<path class="cls-48" d="M739.83,490.22a1.72,1.72,0,0,1-1.78,1.66,1.66,1.66,0,0,1-1.87-1.72,1.86,1.86,0,0,1,1.81-2A2,2,0,0,1,739.83,490.22Z"/></a>
</g>
</svg>

Just make the text pointer-events: none if you want it to be ignored when moused over.
text {
pointer-events: none;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 798">
<defs>
<style>.cls-25,.cls-31,.cls-32{font-family:MyriadPro-Regular, Myriad Pro;}.cls-25{font-size:24px;}.cls-25,.cls-30,.cls-31{fill:#fff;}.cls-31{font-size:14px;}.cls-32{letter-spacing:-0.03em;}.cls-48{fill:#d4145a;}.cls-49{letter-spacing:0em;}.cls-48:hover{fill: #fbb03b;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-ms-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}g#two a{cursor: pointer;}
</style>
</defs>
<title>Artboard2</title>
<g id="two"><a href="#">
<path class="cls-48" d="M733.28,197q6.06,12.34-.55,25.78Q725.28,237.92,703,251.9a145.37,145.37,0,0,1-27.38,13.7,135.53,135.53,0,0,1-24,6.54q-10.92,1.78-26.33,3.1-11,.83-19.18,2t-16.5,3.15l18.68,29.82-32.27,20.21a188.93,188.93,0,0,1-10.65,160.66q7.26-5.6,17.68-4.67,15.64,1.39,39.69,16.8l17.74,11.36-13.26,20.69L609.4,523.89q-7.68-4.92-12.68-6.46t-7.25,2q-1.58,2.46.66,5.48a28.51,28.51,0,0,0,6.13,5.83q3.88,2.82,11.58,7.75l4.14,2.65q21.87,14,27.37,5.43a7.51,7.51,0,0,0,1.09-2.12l30.35,19.44q-3.46,5.4-1.16,10.7t11.18,11q14.38,9.21,17.55,4.27,1.95-3.06,0-5.58a31.44,31.44,0,0,0-5.75-5.34c-2.51-1.88-4.32-3.24-5.45-4.07L682,571.56l13.41-20.93,6,3.67q23.18,15,30,28.49a24.8,24.8,0,0,1,1.77,19.46A389.85,389.85,0,0,0,733.28,197Z"/>
<text class="cls-25" transform="translate(644 309.14)">Business
<tspan class="cls-49" x="0" y="28.8">Planning</tspan>
</text>
<text class="cls-31" transform="translate(604.83 358.31)">
<tspan class="cls-32">We Formulate a plan that</tspan>
<tspan x="0" y="16.8">achieves your goals then we</tspan>
<tspan x="0" y="33.6">manage and evolve that plan</tspan>
<tspan x="0" y="50.4">as your business develops. Not</tspan>
<tspan x="0" y="67.2">a document but a model in</tspan>
<tspan x="0" y="84">which you test scenarios and</tspan>
<tspan x="0" y="100.8">that evolves with you.</tspan>
</text>
<path class="cls-30" d="M686.15,528.26c1-2.4,2.38-4.36,5-5.13a6.33,6.33,0,0,1,4.55.34,1.46,1.46,0,0,0,1.85-.28,11.1,11.1,0,0,1,2.12-1.66c.92-.48,1.77-.53,2.4.32a2,2,0,0,1-.26,2.55,3,3,0,0,1-.69.58,2.87,2.87,0,0,0-1.42,3.65c.91,3.28-1.34,6.71-4.61,7.74a6.94,6.94,0,0,1-8.33-3.66c-.18-.39-.18-.89-.63-1.13Zm10,1.53a3.18,3.18,0,0,0-3.12-3.21,3.32,3.32,0,0,0-3.25,3.29,3.39,3.39,0,0,0,3.26,3.14A3.2,3.2,0,0,0,696.19,529.79Z"/>
<path class="cls-30" d="M754,509.56c-.42.27-.41.78-.6,1.17a6.17,6.17,0,0,1-5.58,3.69,5.87,5.87,0,0,1-5.89-3.37,1.79,1.79,0,0,0-2.07-1.18,4.35,4.35,0,0,1-1.35,0,1.69,1.69,0,0,1-1.48-2.07c.14-.92.56-1.36,1.71-1.32s2.58,0,3.36-1.67a4.92,4.92,0,0,1,4.51-2.87c1.78-.09,3.38-.18,4.78,1a8,8,0,0,1,2.61,3.94Zm-3.68-1.45a2.76,2.76,0,0,0-2.76-2.77A2.73,2.73,0,0,0,744.8,508c-.06,1.16,1.28,2.94,2.23,3A3.12,3.12,0,0,0,750.32,508.11Z"/>
<path class="cls-30" d="M719.84,522a13.2,13.2,0,0,1-9.28-3.67c-.78-.73-1.25-.71-1.93,0a13.68,13.68,0,0,1-1.82,1.57,1.67,1.67,0,0,1-2.53-.25,1.64,1.64,0,0,1,.21-2.54c2.58-1.56,2.87-3.38,2-6.24-1.29-4-.11-7.93,2.45-11.32.48-.64.53-1,0-1.63-1.79-2-3.55-4-5.25-6a1.4,1.4,0,0,0-1.79-.44,6.82,6.82,0,0,1-8.58-4.79A6.87,6.87,0,0,1,706.48,483a6.6,6.6,0,0,1-.39,4.84,1.25,1.25,0,0,0,.31,1.75c1.87,1.94,3.61,4,5.35,6,.38.44.59.7,1.2.34a14.29,14.29,0,0,1,6.35-1.68,13.09,13.09,0,0,1,8.11,1.91.84.84,0,0,0,1.17-.12c1.24-1.11,2.46-2.23,3.76-3.26.58-.46.38-.88.27-1.43a5.4,5.4,0,0,1,1.8-5.57,5.09,5.09,0,0,1,5.49-.95,5.5,5.5,0,0,1-3.37,10.47,1.86,1.86,0,0,0-2.1.52,31.71,31.71,0,0,1-2.85,2.47c-.74.55-.72,1-.24,1.68,3.33,4.78,3.49,9.78.82,14.88a12.13,12.13,0,0,1-5.26,5.23,1.61,1.61,0,0,0-1,2.32c.45,1.38.45,2.92,1,4.22s2.36,1,3.53,1.69A7.3,7.3,0,0,1,727.2,542a7.41,7.41,0,0,1-7.24-4.64,7.23,7.23,0,0,1,2.28-8.39,2,2,0,0,0,.84-2.6c-.24-.71-.33-1.47-.5-2.2C722.07,522,722.07,522,719.84,522Zm10.41-14A10.19,10.19,0,0,0,719.5,497.8,10.26,10.26,0,1,0,730.25,508Zm-3.53,30.3a3.6,3.6,0,0,0,3.75-3.49,3.72,3.72,0,0,0-3.63-3.79,3.63,3.63,0,0,0-3.64,3.6A3.54,3.54,0,0,0,726.72,538.27ZM703.05,484.9a3.07,3.07,0,0,0-3.13-3.13,3.12,3.12,0,0,0-3.22,3.2c0,1.42,1.71,3.4,2.88,3.4A3.7,3.7,0,0,0,703.05,484.9Zm36.78,5.32a2,2,0,0,0-1.84-2,1.86,1.86,0,0,0-1.81,2,1.66,1.66,0,0,0,1.87,1.72A1.72,1.72,0,0,0,739.83,490.22Z"/>
<path class="cls-48" d="M696.19,529.79a3.2,3.2,0,0,1-3.11,3.22,3.39,3.39,0,0,1-3.26-3.14,3.32,3.32,0,0,1,3.25-3.29A3.18,3.18,0,0,1,696.19,529.79Z"/>
<path class="cls-48" d="M750.32,508.11a3.12,3.12,0,0,1-3.29,2.81c-.95,0-2.29-1.81-2.23-3a2.73,2.73,0,0,1,2.76-2.61A2.76,2.76,0,0,1,750.32,508.11Z"/>
<path class="cls-48" d="M730.25,508A10.28,10.28,0,1,1,719.5,497.8,10.24,10.24,0,0,1,730.25,508Z"/>
<path class="cls-48" d="M726.72,538.27a3.54,3.54,0,0,1-3.52-3.68,3.63,3.63,0,0,1,3.64-3.6,3.72,3.72,0,0,1,3.63,3.79A3.6,3.6,0,0,1,726.72,538.27Z"/>
<path class="cls-48" d="M703.05,484.9a3.7,3.7,0,0,1-3.47,3.47c-1.17,0-2.85-2-2.88-3.4a3.12,3.12,0,0,1,3.22-3.2A3.07,3.07,0,0,1,703.05,484.9Z"/>
<path class="cls-48" d="M739.83,490.22a1.72,1.72,0,0,1-1.78,1.66,1.66,1.66,0,0,1-1.87-1.72,1.86,1.86,0,0,1,1.81-2A2,2,0,0,1,739.83,490.22Z"/></a>
</g>
</svg>

Centering SVG text on IE11 with text-anchor: middle and alignment-baseline: middle / central

I need to perfectly center a text element in an SVG using IE11.
Desired result (all Evergreen browsers):
IE11 result:
// SVG CODE:
<svg xmlns="http://www.w3.org/2000/svg" width=100% height="100%" viewBox="0 0 130 130">
<circle fill="dodgerblue" cx="50%" cy="50%" r="65"></circle>
<text text-anchor="middle"
alignment-baseline="central"
font-size="75"
font-family="Arial"
x="50%" y="50%">1</text>
</svg>
Codepen

IE doesn't support alignment-baseline. The best cross-browser way to achieve what you want is to use the dy attribute with a fractional em value.
A value of around dy="0.35" works for Arial.
<svg xmlns="http://www.w3.org/2000/svg" width=100% height="100%" viewBox="0 0 130 130">
<circle fill="dodgerblue" cx="50%" cy="50%" r="65"></circle>
<text text-anchor="middle"
font-size="75"
font-family="Arial"
x="50%" y="50%" dy="0.35em">1</text>
</svg>

Also agreed with #Paul LeBeau. In addition, I used this tool https://petercollingridge.appspot.com/svg-editor to remove whitespace. The following worked well for me:
<svg viewBox="0 0 130 130" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><circle fill="dodgerblue" cx="50%" cy="50%" r="65"/><text font-family="Arial" font-size="75" text-anchor="middle" x="50%" y="50%" dy="0.36em">1</text></svg>
I could handle the removing whitespace task with Javascript:
let svg = `
<svg viewBox="0 0 130 130" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<circle fill="dodgerblue" cx="50%" cy="50%" r="65"/>
<text font-family="Arial" font-size="75" text-anchor="middle" x="50%" y="50%" dy="0.36em">1</text>
</svg>
`;
// Note: Hack for IE11
// Optimize HTML by removing whitespace
// Ref: https://jaketrent.com/post/remove-whitespace-html-javascript/
svg = svg.replace(/\n/g, '') // remove newline/carriage return
.replace(/[\t ]+\</g, '<') // remove whitespace (space and tabs) before tags
.replace(/\>[\t ]+\</g, '><') // remove whitespace between tags
.replace(/\>[\t ]+$/g, '>'); // remove whitespace after tags

SVG image preview issue

I have an editor in my ionic 1 app, using which SVG images are getting created.
Below is the SVG image:
But when I am displaying same image in my app.
<ion-view>
<ion-content>
<img src= "img.svg">
</ion-content>
</ion-view>
It is looking like:
The text got shifted to left. What can be the issue?
EDIT : SVG Image:
<svg width="226.77168" height="226.77168" xmlns="http://www.w3.org/2000/svg">
<g>
<title>background</title>
<rect fill="#ffff00" id="canvas_background" height="228.77168" width="228.77168" y="-1" x="-1"/>
</g>
<g id="maingroup">
<title>Layer 1</title>
<text height="61.921875" width="110.890625" data-size="5" class="text_data" autocomplete="false" editable-text="true" text-anchor="start" font-family="Arial" font-size="18.8976377952755" id="svg_1" y="99.93397766491398" x="57.941792488098145" stroke-width="0" stroke="#000" fill="#000000">
<tspan dx="0" stroke-width="0" class="helpTspan"/>
<tspan dx="4.22119140625" data-text="The label is" class="inner-text" stroke-width="0">The label is
<tspan visibility="hidden"></tspan></tspan>
<tspan dy="1.05em" dx="-106.66162109375" data-text="or for testing" class="inner-text" stroke-width="0">or for testing
<tspan visibility="hidden"></tspan></tspan>
<tspan dy="1.05em" dx="-107.1904296875" data-text="test the text" class="inner-text" stroke-width="0">test the text
<tspan visibility="hidden"></tspan></tspan>
</text>
<path stroke="null" height="137.00021362304688" width="122.99990844726562" class="shape" data-type="shape" data-name="Square" data-id="11" id="svg_4" d="M52.386104583740234,44.885799407958984L52.386104583740234,181.88600158691406L175.38600158691406,181.88600158691406L175.38600158691406,44.885799407958984L52.386104583740234,44.885799407958984L52.386104583740234,44.885799407958984zM170.26231384277344,176.1790008544922L57.50979232788086,176.1790008544922L57.50979232788086,50.59700012207031L170.26231384277344,50.59700012207031L170.26231384277344,176.1790008544922L170.26231384277344,176.1790008544922z" fill-opacity="null" stroke-opacity="null" stroke-width="null" fill="#000000"/>
</g>
</svg>

I believe the problem is that you are positioning each line of text relative to the end of the previous line of text. It would only take minor differences in the font rendering engines of the mobile browsers to end up with the line of text being a pixel or two shorter or longer. That would mean that the start of the next line would end up in a slight different place.
If this is the problem, then you should be able to avoid it by setting a specific start x for each line of text, rather than using dx.
Try this version of the file and see if it is any better.
<svg width="226.77168" height="226.77168" xmlns="http://www.w3.org/2000/svg">
<g>
<title>background</title>
<rect fill="#ffff00" id="canvas_background" height="228.77168" width="228.77168" y="-1" x="-1"/>
</g>
<g id="maingroup">
<title>Layer 1</title>
<text height="61.921875" width="110.890625" data-size="5" class="text_data" autocomplete="false" editable-text="true" text-anchor="start" font-family="Arial" font-size="18.8976377952755" id="svg_1" y="99.93397766491398" x="57.941792488098145" stroke-width="0" stroke="#000" fill="#000000">
<tspan dx="4.22119140625" data-text="The label is" class="inner-text" stroke-width="0">The label is</tspan>
<tspan dy="1.05em" x="57.344" data-text="or for testing" class="inner-text" stroke-width="0">or for testing</tspan>
<tspan dy="1.05em" x="61" data-text="test the text" class="inner-text" stroke-width="0">test the text</tspan>
</text>
<path stroke="null" height="137.00021362304688" width="122.99990844726562" class="shape" data-type="shape" data-name="Square" data-id="11" id="svg_4" d="M52.386104583740234,44.885799407958984L52.386104583740234,181.88600158691406L175.38600158691406,181.88600158691406L175.38600158691406,44.885799407958984L52.386104583740234,44.885799407958984L52.386104583740234,44.885799407958984zM170.26231384277344,176.1790008544922L57.50979232788086,176.1790008544922L57.50979232788086,50.59700012207031L170.26231384277344,50.59700012207031L170.26231384277344,176.1790008544922L170.26231384277344,176.1790008544922z" fill-opacity="null" stroke-opacity="null" stroke-width="null" fill="#000000"/>
</g>
</svg>

Resources