Смартфон Браузер перерыв SVG изображение

Question

Так что у меня есть это изображение SVG на моем сайте. Который отлично работает на рабочем столе. Но на смартфонах это совсем другая история

Как видите, изображение разбивается. Но это происходит только на смартфонах.

Есть идеи почему? Это просто обычный тег img:

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

Я могу видеть в коде, что иногда есть некоторые промежутки, содержащие только одну букву. Может ли это быть? Странно то, что он отлично работает на настольных компьютерах и ноутбуках.

EDIT !!

РАБОЧАЯ! Я получил это на работу. Я очистил код, написав, как он действительно должен выглядеть (удалил пробелы, удалил tspans и удалил x и y кординаты), затем импортировал под другим именем. Поскольку смартфоны, которые я тестировал, не хотели перезагружаться с использованием: Javascript: location.reload (true).

Answer 1

Удалите атрибуты x и y из <tspan> s и пробелов между <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>