I've been working on a website for a while and now I'm trying to make it responsive. When I open it from my phone, the letters from the logo are getting distanced.
Logo on PC:
Logo on Phone:
Does anyone know why is this happening? Thanks in advance.
Edit:
HTML:
<a href="#"><img src = "resources/blue-logo.svg" class = "logo"></a>
CSS:
.logo{
max-width: 100%;
width: 16em;
padding: 15px 0px 15px 20px;
letter-spacing: normal;
}
CodePudding user response：
The problem was in svg coordinates:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 812.55 182.53"><defs><style>.cls-1{font-size:76.08px;font-family:Montserrat-Bold, Montserrat;font-weight:700;}.cls-1,.cls-8{fill:#231f20;}.cls-2{letter-spacing:0em;}.cls-3{letter-spacing:0em;}.cls-4{letter-spacing:0em;}.cls-5,.cls-6,.cls-7{fill:#00aeef;}.cls-5{letter-spacing:0em;}.cls-7{letter-spacing:-0.02em;}</style></defs><text class="cls-1" transform="translate(0 162.29)"><tspan class="cls-2">E</tspan><tspan x="50.74" y="0">ddi</tspan><tspan class="cls-3" x="158.93" y="0">e</tspan>
<tspan class="cls-4" x="190.01" y="0">’</tspan><tspan x="207.57" y="0">s </tspan><tspan class="cls-5" x="260.5" y="0">Cus</tspan>
<tspan class="cls-7" x="385.86" y="0">toms</tspan></text>
CodePudding user response：
Your phone screenshot clearly indicates, that your font is not loaded/available.
You could actually add a stylesheet to your svg defs to load the google font Montserrat directly.
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
</style>
</defs>
But I strongly recommend embedding the font using the vecta.io/nano svg optimizer
Nano optimizer will also subset your font, the embedded font just includes the actually used glyphs/characters – resulting in much smaller file sizes than embedding a complete glyphset (~9 KB):
Your svg would have this code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 812.55 182.53" xmlns:v="https://vecta.io/nano"><defs><style>@font-face{font-family:"CustomFont";src:url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABKoAA8AAAAAH9wABzMzAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAABWAAAAQ0AAAIwcv95cE9TLzIAAAJoAAAATwAAAGBU7LqkY21hcAAAArgAAAB5AAABggHjNMxjdnQgAAADNAAAAGYAAADkM5kZPWZwZ20AAAOcAAAGcAAADW1NJI58Z2FzcAAACgwAAAAIAAAACAAAABBnbHlmAAAKFAAABUIAAAd8oAlRPWhlYWQAAA9YAAAANgAAADYVlLVsaGhlYQAAD5AAAAAdAAAAJAI9Ay9obXR4AAAPsAAAAEIAAABCHisBD2xvY2EAAA/0AAAAJAAAACQOphCibWF4cAAAEBgAAAAgAAAAIAFLDdFuYW1lAAAQOAAAAZ4AAAMVRe3lg3Bvc3QAABHYAAAAFAAAACD/uABDcHJlcAAAEewAAAC7AAAA1c1LrMB4nG1RO24CMRB9tne9sASqVKlImjQ5RYSoKKmREKICpUA0kTgCx0iZw QYUZSPiFIkEmLyPF6QgZ3Vs2fn/zwwAErcYwTX6w GuJs8LubozsfLB1wioxciMLCJbhIdcLPpgrHpSaslmGWe4Kk34EwHL7igvtLsZ6zpaSKKwbncHv152Z5F1GUdiXwRP0m8Z cXUu0OEtg1ebZ4G1pB5FTC1EFnPJsJl0sbZlGvCmHX3Q1O873qh0/I2 tHmq4Q12nL5ERfc1eYkgbX0A28oFS3ql9V3PvAlvZyl8N6z2XXOfx7N8 YVLQX/CzOq1XJo6MTcUiYs8pbCdmxn3f4ErrAde6604Ftf0Dj741MgAAAHicY2BhvMu0h4GVgYGpiymCgYHBG0IzxjEYMToB QwcDHDALoBgM4T6OCowLGBQUJBkPvEfqJ8llJFPgYFxOkiOSQpoJgODAgMzAA09CpcAeJxjYGBgZoBgGQZGBhCoAfIYwXwWhgQgLcIgABRhYVBgcGZwZUhlyGTIZchnKFWQ/P8fKAsRTYGKFoNE/z/8v///vv8L/s/9P f/7P8z7n FmowBGNmwi6OoIayECex PICFFUiA7OJk4AKS3Dy8hA2lFwAA9vka0gAAAHicY2AgE8wDwgaGBqY9DAxMUgwM/ 2YTvz/wqT0/8d/M4b5QNjI0MhkD5Tz v8VwQeJAMXsQaJAcWQzniFMYRaGmgOVZ7T Pwcmz j8fwpU3g6u/xmjO1z/O0Z7uH4JCAQAKl038wAAeJytVml3EzcU1XhJQshGNlqmpTKKUxprDKUsAQyEmTguuIsToJ2B0s7EDt0X6Eb3fcG/5k3SnkO/8dN6n2SbBBJ62lN/8LuSrvRWPQ0JLUlcCauRlPW7YmS5Tn2XroZ01KWDUXxDtq ElCkmfw2IAdFsqlW3UCARkQjU4rpwRBD7HjmaZHzDo4yWLUn3GpSbvbp 0NkdVJtV6quGBcoWo5VrYUEV3HYoqdHA1ELkSppnNB9FMrXspEUHMdUZSTrM64eZea8RSljTTiQNNsIYM5LXBhkdZ3Q8duMoilxYS4NBk8RKSKLOZLACt077Ge2vJ3fHRJMZd/NiNYpaSUROKYoUiUa4FkUeZbWE5lwxgS/5oBFSXvnUp3x4DmrsUU4reCJbaX7Vl7zCPrrWZv6n/rjapOxcAYuBbMs2FKSH80WEZTmMG26yEoUqKkSSFi6FWHM5GB39HuU19QeldZGxse3DUPkKOVJ QpnVG Q0YQXl5zzq15JNHYIvObEq QRaiCOmxIvG1AG93j8kgqo/V hla5femr1Be4pTggkB/I5lta0SzqSJsHA5CyRdGNm1EvlUyaJVsXuH7TSDXcK979rmTUPaOLS ezCL8nBVIZoreDSs00ymSq1k0aMRDaKUNBxc5O0Ayo9ohEcrGI1g5NEojhkzIZGIQBN6aTSIZTuWNIqgeTSm65fDNNdajGZoeE3d9miPri H9Ut20i1gfsLMj tUjAVXwnRsLCAn8Wm0xFWOavLTYf4bwR8508hEttgIUw4evPXbyC/UjswVFLZ1sWvXeQsuD89E8KQG 2uY3ZqqHRKYCjGhEK2AxNl1x3FMria0SEWmejmkMeXLKg2h HYrFJwvY6j/c3zcEaPC99txOt5Xojsl9wDCNAnfJkoeTenUYTmNOLPcq9Msy8d0mmP5uE7zLPfptI lq9N lk/odIDlkzrdxfIZrbpxp74YEVayTM51viAezW1anO4t3rSLpU2Ls73FW3ZxvxY0XPoP/j0F//bDLgn/WBbgH8sD8I lgn8sZ AfyyL8YzkL/1g Df9YHoR/LLWWFVOmnoba8VgGyG0cmFTi6mmu1bImr0QebuEhXICa3CGLKplX3EMfyXDZ 8Pd1KZDw1WuNDo0l adqWqI/sdePrspPDtxjmh5zFj HE6znOrDOnFZt7WF58X0H4J/i2fVfHrEmWJfjyIecGB7 3FJknmPjuny3opHx/ JioJugn4CKRLTRVmWNW4ECO2FdrumaugcId4YNFp0h OOMzWJCM jY03THtByaKJFQ0sHhU 7gtJau6ykrLRx5smtNFm251FO V22pJh7ycJyuJGRWeluZGaz yKf sAWrUyO9QSbnbw4DWNucfZBygTxC1F2SBpYTkTJC5wzP3twT0JTEPXV0vIsYKGJX6cBgKjBedto0TZTppD80Ay8ii4/EOn4kT2qmiMwH/DdtD7ulAIp7qxkJjNz3ZioSoI0 neEg2Y9SVVY6WcxUovhOyMjTSJy2FZVvB2s/WdScl2dVJBfUWMLmz TLBJ3K7aO9lSXPJnNlkSdNMV87fEgy53U3wW/aPMUVyiPUHYcPGSykpUTsvOJO7tuS2rK25jy rCtnsfteO8pvnSoxT6mk6W2rCNawxO7UhFQstUxo7AuMz1OWsjn9Cg8q3rXKAK16eMm2fPX0RjwhvT3fIvS7r2f1Ux 8R9rKLQqjbVSyHq2FlFA54vdaOyhNHJUkF14tLxpheCGkIwZa89vkFwwyfKdBS3/Pkd5i/gOGdygo4BX9R0AqLOUawi3HIJD243Wi9oLmiqA76o19HCAF4CcBi8rNcdM9MAMDPLzKkCrDCHwSXmMLjMHAZX9AZ64XmgV4Acg17VG46dC4HsXMQ8h9FV5hl0jXkGvcY8g66zzgDgddbJ4A3WySBmnQwS5iwBrDKHQZM5DFrMYbBm7PKBbhi7GL1p7GL0lrGL0dvGLkbvGLsYvWvsYvSesYvR 4jxqV4CPzAjOgv4oYXnAD/ioJvRAkY38dZ2OLcsZM7HhuN0OJ9g8 neqZ akdnxmYW843MLmX4b53QIX1jIhC8tZMJX4FZ6531tRob jYVM/9ZCpn HnR3C9xYy4QcLmfAjuGd65/1kRob s4VM/8VCpv KnR3CbxYy4XcLmXBHb zKZbpftH6JBtYoO9O43X2ivb8BbCPTyAABAAH//wAPeJx1VU1sE1cQnvfWXjs2JF7/7PoPg71eO A0JLbXJokdNsGJQ3aTACakKU0dNSRNKloacQCVKkSJFC49AAUJVValFnHogRak0kPLrZceeu2p6qWqqNQDh7ZSkao4nbeOwVWFrd31vpnd d4333wGeMmHQHLnL/od/R5CkNV6HYSA5KSU AlHuXHA2ypmjelAKVe1EI47zhm4EIJgIp6wOqSUpZuo2UGSSYuSLSHH2onPG8G7vNROZJK/v7Bw//zZj9LL5ZWhpb6 paGV8nL61tk9c/eWl /NaYX5U7iGkcp8UUMsFQC6Sh DEw5rXcCBxcpZFrE0mUMkwzpPrFaYw/LHgIFwglNgH5sjkFJ8USHqa3zp6vYvVKhfJyP1bzc26OONO2ufsb1SiO08o fpE3BBGO5ojg5ioRwBKx3XH7hPvKrt43GDJR0sFlrFqrpuYwWrSAKrGNIfRDBJZkm7iy9N1aIvIma idpMIlXci0GM2VnNKwgAQlgIST6E5ErEBDsySgRZ5eVYk1dJoDk1i9TyPq Yoedv979rXBkdvWK81a9PTg4UJicL9Ml2cHC0tFaprJWGiHX75slS6SQ72J4P4J5naAwkiEBR65cIWOwIs41Qgg22oAQssMiY5arAcbqO6EzgBjX8fn/Ev09MxGMmx2CLstbm8lILvAjxxXlbtJvIdIarrzhPFQ8NhSvGzbMfGvrmyan14/WvxuykzT6WJfZkuj8Qem2mvHZi6mq5dPX0p4VspsgwqsjO35wHO94B4MkIsjuhZnOoKZ Xl8dqNTmXS6XwoMHtJ3QxrSjpnngy09DvGJ5/pUF81qO58PcI28ExYggu6hBT7GX4AvYg1hnG O/c3pfWOXj4sKLgYdY516PEe3riSs/zOtyPyGMUznwd8VNiJeMNQYgcIcRatdt4zmod0S2U7mogCOyeRXmMUp7XnwdnTahROCALnphH9rQ5QikQfYIsNDrNfuxeM77GdOGZe NSTe3Na7WlnFa7HZnJ9r0eji4WaOzSpfoPJKwdLY/W/yDhq xCg4Ox CupQ91NDVxA7B04uF3aQeyuOda6bkVtEpxrU5EuxOQKuYKiFxPbE7zDlxJb2uzFiR4kL6T45zXDuDY9vWUYW9OFiYkCU6Ide3tirdw4r7 QIfLn3XlG/kEMSeYzIqpP4igbbQ5QhnhlY4HqQ5ZNnzFMn0lCIp5SmM IiWSeqQ/rJ7tpq UwMFKEmvi WU9k40u9C7kjw2eODqxO9K0q2fLpdDo3MHx6sHBxyh4NvCft65W8NkdwuJiZ6gqIFzrDYsDb5gwMD6QnU41e2xHrXXoDRJh JBKesFYfxFaHAV1x04p00TkLoRS1xvMwj88YjYazMAYwg6dksSU4qzlk5lWemA1brSDUWKJIZDWjZnwZn8z4TOfJXemYMr9SqdS2tuQDSjAoCG9Wf768uXn5p5jiRVwj2Mcl1LobjEdoXFxTgh4rCouhQaeZf 5BUnPVdCps9Pyu82h7cckNblSewDv8puOYiFQhI3hxwlWBLt3afyb99ge1d46U2DRosvL ZdJT/23j BhxMI5k8jHO3VNoh IjOwGTI2aiexiDVYoclRgIN2V4yAxbYC5IYAK5wJx22CtyKDE3G74OIueZ1HKZL3IOV/9CKhDOH6JP1ZS3s/P6J86u/Sm0CFJfp d2OnF nZB4yJ8raSFg/1AzzYpApsy/BUecvfghDyVome/6l83pbplsUr9IF3dU9B4nqLsbMKGy RgnuAHhfzUa Jtl/lPi86ZRtZjUv4VsQFMAAAABAAAABzMzNZvVfF8PPPUIBwPoAAAAANYL/kYAAAAA1h5ACP5z//QD1QMTAAEABwACAAAAAAAAeJxjYGRgYD7xn5WBgUXyXzEDCDAyoAIBAFxxA3AAAAACSwAoARsAAALdACcCnwBTArQAIgJ3ACABLQA1AS0ASAEtAEIEGQBIAo8AIAITABQBswAIAq8ARQEGACMAAP6A/nMAAAAAAAYADABSAIIA/AFOAWwBggGgAf4CQAKWAuIDKANiA4wDvgABAAAAEQAoAAIAAAAAAAIAKAA6AIsAAACEDW0AAAAAeJx9kc1Kw0AUhc 0tajgz8KVgsxSFyZpEYR2VQUXUrELK25jjUkkdsLMZOHOrStx7xu48SX0RXwOwZN0akWKGcJ899xz751JAKzjAwKT55LvhAWWGU24hgauHNexiRvHDazhwfECVvDkuEn9xfEq/a sEo0lRm94dyywIQrHNSyKR8d17Itnxw1si6l/AZvi03GT pfjVezXto5Ufq/TOLGyHbRa8jyJ5KkaWxNpHVo50Oo2GlnZK2yitJE7ibW56fh nNqkuPJG6s4/KbI0suEwC/1Z5e4MD1V2feC1g6A77Pdkd5bYKzO/hpXhRaRNqsayKvhjLWdztBnpNLfGM2nmKR37Z8d9HEEhxz00UsRIYCHRRoAWl8Q5lYj7KV1j5gwjzRVWvgFJ4ZbaqIp7KLgn1DSdEjtVP8v Bh34XDGnlI6Cv9ZjlcId1RPGGTMRcyGG5JDqvJm7c9VDahmuccCe5dkDdNmlz/NI0ryKvZ a TebZi8q1fBspUv mvB/1 m9J7c2vGn5ffPK71X9Mu7ld4qZP8Mx t8GF5o4AAB4nGNgZgCD/1sZjBgwgSAALNMB 3icY/DewXAiKGIjI2Nf5AbGnRwMHAzJBRsZ2J0cOBmyo72tGdTZGbTAfIECpgSOAA4HDhM2HRY5dnYOqHARQwZbBJsHmxWLAZMqK1iYz8mRU8ZBwkHEQcCB14Hbgf0AAzsDJ1BCFCjB4IACwRLMDC4bVRg7AiM2OHREbGROcdmoBuLt4mhgYGRx6EgOiQApiQQCkH1JbEFsTmxmLHpMCqzsPFo7GP 3bmDp3cjE4LKZNYWNwcUFAI8ELmQA) format("woff"); font-weight:bold;font-style:normal;}</style></defs><style><![CDATA[.B{letter-spacing:0em}.C{letter-spacing:0em}.D{letter-spacing:0em}.E{letter-spacing:0em}.G{letter-spacing:-0.02em}]]></style><text transform="translate(0 162.29)" font-size="76.08" font-family="CustomFont" font-weight="700" fill="#231f20"><tspan class="B">E</tspan><tspan x="50.74" y="0">ddi</tspan><tspan class="C" x="178.93" y="0">e</tspan><tspan class="D" x="227.01" y="0">’</tspan><tspan x="245.57" y="0">s </tspan><tspan class="E" x="307.5" fill="#00aeef" y="0">C</tspan><tspan x="362.2" fill="#00aeef" y="0">us</tspan><tspan class="G" x="454.86" fill="#00aeef" y="0">t</tspan><tspan x="486.66" fill="#00aeef" y="0">oms</tspan></text><g fill="#231f20"><circle cx="627.19" cy="33.72" r="4.65"/><circle cx="622.54" cy="48.25" r="4.65"/><circle cx="607.42" cy="51.74" r="4.65"/><circle cx="618.47" cy="62.79" r="4.65"/><circle cx="596.96" cy="41.28" r="4.65"/><circle cx="611.49" cy="37.21" r="4.65"/><path d="M641.72 51.75a36.72 36.72 0 0 0 8.74 26.16L640 88.37l6.46 6.46 11.24-11.24 2.13-2.13-.07-.06 52.89-52.88.06.07 7-7-.06-.06 5.81-5.82-6.4-7-9.3 9.31c-13.763-11.218-33.373-11.699-47.67-1.17L645.23-.01l-12.77 12.8 16.86 16.86a37.57 37.57 0 0 0-7.6 22.1zm9.3.58a35.75 35.75 0 0 1 10.44-22.68c6.39-6.39 14.53-10.46 22.67-10.46a26.1 26.1 0 0 1 18.61 5.23l-45.93 45.93c-4.04-5.23-6.35-11.63-5.79-18.02z"/></g><path d="M800.03 101.2L720.1 21.27l-7 7 79.93 79.93zm-66.11 66.12h0l6.23-6.23-79.93-79.93-6.39 6.36 79.93 80z" fill="#00aeef"/><path d="M747.54 152.28l-7.2 7.2-1.18 1.18-.73.73-1.1 1.1-11.26 11.26 6.83 6.83 79.65-79.65-7.36-6.3z" fill="#231f20"/></svg>However, when it comes to logos, I still recommend converting your text to paths in your graphic application (Adobe Ai, inscape, figma etc.).
It is still the most reliable technique.
Albeit svg <text> elements offer some benefits concerning accessibility – something like a <title> element or some aria-attributes added the svg would also to the trick.