CODEWITHSUNDEEP
htmlcsssvg
Jes
Jes

Reputation: 75

Smartphone Browser break SVG image

So i have this SVG image on my site. Which works perfectly on desktop. But on smartphones it is an entirely different storyimage of fail

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 example

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

Upvotes: 0

Views: 200

Answers (1)

enxaneta
enxaneta

Reputation: 33024

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>

Upvotes: 1

Related Questions