SVG logo not displaying correctly on mobile - html

Question

I've created the following SVG:
It is being correctly displayed on desktop, but the problem is on mobile. Here is a screenshot of how it is being displayed:
Here is the SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210.42 49.75">
<defs>
<style>
.cls-1,.cls-3{font-size:48px;font-family:SHOOTING;}
.cls-2{letter-spacing:-0.02em;}
.cls-3{fill:#ffb857;}
.cls-4{fill:#ff8f00;letter-spacing:0em;}
</style>
</defs>
<title>logo</title>
<g id="Capa_4" data-name="Capa 4">
<text class="cls-1" transform="translate(41 41.79)">BUS<tspan class="cls-2" x="52.37" y="0">C</tspan><tspan x="68.78" y="0">AMINAS</tspan></text>
</g>
<g id="Capa_3" data-name="Capa 3">
<text class="cls-3" transform="translate(42.76 40.32)">BUS<tspan class="cls-2" x="52.37" y="0">C</tspan><tspan x="68.78" y="0">A</tspan><tspan class="cls-4" x="87.17" y="0">MINAS</tspan></text>
<path d="M34.69,19.49a1.27,1.27,0,0,0-.7-.72,1.29,1.29,0,0,0-1,0,11.93,11.93,0,0,0-4,2.63,12.08,12.08,0,0,0-2.63,4,1.29,1.29,0,0,0,0,1,1.26,1.26,0,0,0,.73.7,1.34,1.34,0,0,0,.49.1,1.28,1.28,0,0,0,1.25-.83,9.17,9.17,0,0,1,2-3.07,9.06,9.06,0,0,1,3.08-2,1.39,1.39,0,0,0,.72-.73A1.29,1.29,0,0,0,34.69,19.49Zm19.53-7.37,1,1-5.06,5,1.41,1.4a1.29,1.29,0,0,1,.4.95,1.26,1.26,0,0,1-.4.94L50.2,22.73a14.61,14.61,0,0,1,.69,12.78,14.32,14.32,0,0,1-7.77,7.77,14.55,14.55,0,0,1-11.34,0,14.69,14.69,0,0,1-4.66-3.11,14.75,14.75,0,0,1-4.26-10.33A14.26,14.26,0,0,1,24,24.17a14.58,14.58,0,0,1,20.55-7.08l1.32-1.33a1.31,1.31,0,0,1,.95-.39,1.29,1.29,0,0,1,.94.39l1.41,1.41ZM54.38,11a.63.63,0,0,1-.45.21.66.66,0,0,1-.48-.21L51.56,9.09a.72.72,0,0,1-.18-.48.67.67,0,0,1,1.14-.47L54.38,10a.61.61,0,0,1,.21.47A.59.59,0,0,1,54.38,11Zm4.77,4.77a.69.69,0,0,1-.95,0l-1.87-1.88a.63.63,0,0,1,0-.94.6.6,0,0,1,.47-.2.58.58,0,0,1,.46.2l1.89,1.87a.69.69,0,0,1,0,1Zm.85-3.8a.62.62,0,0,1-.19.48.65.65,0,0,1-.47.19h-2a.65.65,0,0,1-.67-.67.65.65,0,0,1,.19-.47.62.62,0,0,1,.48-.19h2a.65.65,0,0,1,.66.66ZM56,8v2a.66.66,0,1,1-1.32,0V8A.66.66,0,1,1,56,8Zm3.13,1.14L57.26,11a.61.61,0,0,1-.45.21.66.66,0,0,1-.48-.21.59.59,0,0,1-.21-.46.61.61,0,0,1,.21-.47L58.2,8.14A.64.64,0,0,1,58.67,8a.65.65,0,0,1,.67.66A.73.73,0,0,1,59.15,9.09Z" transform="translate(-22.86 -1.21)"/>
</g>
</svg>
Here is the HTML where I have the SVG:
<div class="logo"><img src="./source/logo.svg" alt="Buscaminas" width="255px"></div>
Here is the CSS for the div:
.logo {
height: 50px;
width: 255px;
margin: 10px auto 19px;
}
How can I fix this problem?

Answer 1

I've removed the x and y attributes of the <tspan> elements. This is fixing the problem with the crammed text. However since you are using a special font-family that is not disponible, the font-family is different and the text is wider. In order to get all the text inside the svg canvas I had to change the value of the viewBox. Probably a good idea would be using an alternative font-family, for example Arial.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 60">
<defs>
<style>
.cls-1,.cls-3{font-size:48px;font-family:SHOOTING, Arial;}
.cls-2{letter-spacing:-0.02em;}
.cls-3{fill:#ffb857;}
.cls-4{fill:#ff8f00;letter-spacing:0em;}
</style>
</defs>
<title>logo</title>
<g id="wrapper">
<g id="Capa_4" data-name="Capa 4">
<text class="cls-1" x="41" y="41.79">BUS<tspan class="cls-2" >C</tspan><tspan>AMINAS</tspan></text>
</g>
<g id="Capa_3" data-name="Capa 3">
<text class="cls-3" x="42.76" y="40.32">BUS<tspan class="cls-2" >C</tspan><tspan>A</tspan><tspan class="cls-4">MINAS</tspan></text>
<path id="b" d="M34.69,19.49a1.27,1.27,0,0,0-.7-.72,1.29,1.29,0,0,0-1,0,11.93,11.93,0,0,0-4,2.63,12.08,12.08,0,0,0-2.63,4,1.29,1.29,0,0,0,0,1,1.26,1.26,0,0,0,.73.7,1.34,1.34,0,0,0,.49.1,1.28,1.28,0,0,0,1.25-.83,9.17,9.17,0,0,1,2-3.07,9.06,9.06,0,0,1,3.08-2,1.39,1.39,0,0,0,.72-.73A1.29,1.29,0,0,0,34.69,19.49Zm19.53-7.37,1,1-5.06,5,1.41,1.4a1.29,1.29,0,0,1,.4.95,1.26,1.26,0,0,1-.4.94L50.2,22.73a14.61,14.61,0,0,1,.69,12.78,14.32,14.32,0,0,1-7.77,7.77,14.55,14.55,0,0,1-11.34,0,14.69,14.69,0,0,1-4.66-3.11,14.75,14.75,0,0,1-4.26-10.33A14.26,14.26,0,0,1,24,24.17a14.58,14.58,0,0,1,20.55-7.08l1.32-1.33a1.31,1.31,0,0,1,.95-.39,1.29,1.29,0,0,1,.94.39l1.41,1.41ZM54.38,11a.63.63,0,0,1-.45.21.66.66,0,0,1-.48-.21L51.56,9.09a.72.72,0,0,1-.18-.48.67.67,0,0,1,1.14-.47L54.38,10a.61.61,0,0,1,.21.47A.59.59,0,0,1,54.38,11Zm4.77,4.77a.69.69,0,0,1-.95,0l-1.87-1.88a.63.63,0,0,1,0-.94.6.6,0,0,1,.47-.2.58.58,0,0,1,.46.2l1.89,1.87a.69.69,0,0,1,0,1Zm.85-3.8a.62.62,0,0,1-.19.48.65.65,0,0,1-.47.19h-2a.65.65,0,0,1-.67-.67.65.65,0,0,1,.19-.47.62.62,0,0,1,.48-.19h2a.65.65,0,0,1,.66.66ZM56,8v2a.66.66,0,1,1-1.32,0V8A.66.66,0,1,1,56,8Zm3.13,1.14L57.26,11a.61.61,0,0,1-.45.21.66.66,0,0,1-.48-.21.59.59,0,0,1-.21-.46.61.61,0,0,1,.21-.47L58.2,8.14A.64.64,0,0,1,58.67,8a.65.65,0,0,1,.67.66A.73.73,0,0,1,59.15,9.09Z" transform="translate(-22.86 -1.21)"/>
</g>
</g>
</svg>
UPDATE
In order to control the length of the text you can use the textLength and lengthAdjust attributes like so:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 55">
<defs>
<style>
.cls-1,.cls-3{font-size:48px;font-family:SHOOTING,Arial;}
.cls-2{letter-spacing:-0.02em;}
.cls-3{fill:#ffb857;}
.cls-4{fill:#ff8f00;letter-spacing:0em;}
</style>
</defs>
<title>logo</title>
<g id="Capa_4" data-name="Capa 4">
<text class="cls-1" x="41" y="41.79" textLength="200" lengthAdjust="spacingAndGlyphs">BUS<tspan class="cls-2" >C</tspan><tspan>AMINAS</tspan></text>
</g>
<g id="Capa_3" data-name="Capa 3">
<text textLength="200" lengthAdjust="spacingAndGlyphs" class="cls-3" x="42.76" y="40.32">BUS<tspan class="cls-2" >C</tspan><tspan>A</tspan><tspan class="cls-4">MINAS</tspan></text>
<path id="b" d="M34.69,19.49a1.27,1.27,0,0,0-.7-.72,1.29,1.29,0,0,0-1,0,11.93,11.93,0,0,0-4,2.63,12.08,12.08,0,0,0-2.63,4,1.29,1.29,0,0,0,0,1,1.26,1.26,0,0,0,.73.7,1.34,1.34,0,0,0,.49.1,1.28,1.28,0,0,0,1.25-.83,9.17,9.17,0,0,1,2-3.07,9.06,9.06,0,0,1,3.08-2,1.39,1.39,0,0,0,.72-.73A1.29,1.29,0,0,0,34.69,19.49Zm19.53-7.37,1,1-5.06,5,1.41,1.4a1.29,1.29,0,0,1,.4.95,1.26,1.26,0,0,1-.4.94L50.2,22.73a14.61,14.61,0,0,1,.69,12.78,14.32,14.32,0,0,1-7.77,7.77,14.55,14.55,0,0,1-11.34,0,14.69,14.69,0,0,1-4.66-3.11,14.75,14.75,0,0,1-4.26-10.33A14.26,14.26,0,0,1,24,24.17a14.58,14.58,0,0,1,20.55-7.08l1.32-1.33a1.31,1.31,0,0,1,.95-.39,1.29,1.29,0,0,1,.94.39l1.41,1.41ZM54.38,11a.63.63,0,0,1-.45.21.66.66,0,0,1-.48-.21L51.56,9.09a.72.72,0,0,1-.18-.48.67.67,0,0,1,1.14-.47L54.38,10a.61.61,0,0,1,.21.47A.59.59,0,0,1,54.38,11Zm4.77,4.77a.69.69,0,0,1-.95,0l-1.87-1.88a.63.63,0,0,1,0-.94.6.6,0,0,1,.47-.2.58.58,0,0,1,.46.2l1.89,1.87a.69.69,0,0,1,0,1Zm.85-3.8a.62.62,0,0,1-.19.48.65.65,0,0,1-.47.19h-2a.65.65,0,0,1-.67-.67.65.65,0,0,1,.19-.47.62.62,0,0,1,.48-.19h2a.65.65,0,0,1,.66.66ZM56,8v2a.66.66,0,1,1-1.32,0V8A.66.66,0,1,1,56,8Zm3.13,1.14L57.26,11a.61.61,0,0,1-.45.21.66.66,0,0,1-.48-.21.59.59,0,0,1-.21-.46.61.61,0,0,1,.21-.47L58.2,8.14A.64.64,0,0,1,58.67,8a.65.65,0,0,1,.67.66A.73.73,0,0,1,59.15,9.09Z" transform="translate(-22.86 -1.21)"/>
</g>
</svg>