Smartphone Browser break SVG image - html

Question

So i have this SVG image on my site. Which works perfectly on desktop. But on smartphones it is an entirely different story
As you can see it breaks up the image. But it only does that on smartphones.
Any idea why?
Its just a normal img tag:
<img src="brand.svg">
EDIT!!
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320.65 66.28">
<defs>
<style>
.cls-1{
font-size:50px;
}
.cls-1,.cls-4{
font-family:Montserrat-SemiBold, Montserrat;font-weight:700;
}
.cls-2{
letter-spacing:0em;
}
.cls-3{
letter-spacing:-0.01em;
}
.cls-4{
font-size:16px;
}
.cls-5{
letter-spacing:-0.02em;
}
.cls-6{
letter-spacing:0em;
}
.cls-7{
letter-spacing:0em;
}
.cls-8{
letter-spacing:0.01em;
}
</style>
</defs>
<title>Aktiv 3</title>
<g id="Lag_2" data-name="Lag 2">
<g id="Lag_1-2" data-name="Lag 1">
<text class="cls-1" transform="translate(0 42.5)">Designpl<tspan class="cls-2" x="230.3" y="0">a</tspan>
<tspan class="cls-3" x="260.9" y="0">c</tspan>
<tspan x="289.55" y="0">e</tspan></text>
<text class="cls-4" transform="translate(0.35 62.04)">A <tspan class="cls-5" x="16.4" y="0">w</tspan>
<tspan class="cls-6" x="30.86" y="0">o</tspan>
<tspan class="cls-7" x="41.18" y="0">r</tspan>
<tspan x="47.82" y="0">k of A</tspan>
<tspan class="cls-8" x="95.04" y="0">r</tspan>
<tspan class="cls-6" x="102" y="0">t</tspan>
</text>
</g>
</g>
</svg>
I can see in the code that there are sometimes some spans, with only 1 letter. Can that be it? The weird thing is that it works on desktops and laptops perfectly.
EDIT!!
WORKING!
I got it to work. i cleaned up the code by writing how it really should look (deleted spaces, deleted the tspans, and deleted the x and y cordinates) then i imported using another name. Because the smartphones that i was testing it on didn't want to reload using: Javascript:location.reload(true).

Answer 1

Remove the x and y attributes from the <tspan>s and the spaces between the <tspan>s
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320.65 66.28">
<defs>
<style>
.cls-1{
font-size:50px;
}
.cls-1,.cls-4{
font-family:Montserrat-SemiBold, Montserrat;font-weight:700;
}
.cls-2{
letter-spacing:0em;
}
.cls-3{
letter-spacing:-0.01em;
}
.cls-4{
font-size:16px;
}
.cls-5{
letter-spacing:-0.02em;
}
.cls-6{
letter-spacing:0em;
}
.cls-7{
letter-spacing:0em;
}
.cls-8{
letter-spacing:0.01em;
}
</style>
</defs>
<title>Aktiv 3</title>
<g id="Lag_2" data-name="Lag 2">
<g id="Lag_1-2" data-name="Lag 1">
<text class="cls-1" transform="translate(0 42.5)">Designpl<tspan class="cls-2" >a</tspan><!--
--><tspan class="cls-3" >c</tspan><!--
--><tspan>e</tspan></text>
<text class="cls-4" transform="translate(0.35 62.04)">A <tspan class="cls-5" x="16.4" y="0">w</tspan><!--
--><tspan class="cls-6">o</tspan><!--
--><tspan class="cls-7">r</tspan><!--
--><tspan>k of A</tspan><!--
--><tspan class="cls-8" >r</tspan><!--
--><tspan class="cls-6" >t</tspan>
</text>
</g>
</g>
</svg>