SVG image is not showing properly in mobile phone
All three of your SVGs are using <text>
elements. So proper rendering of the SVGs rely on the device, that they are being displayed on, having the specified fonts available.
-
In the case of logo_desktop.svg, most of the text has been converted to paths, so the problem is not really showing up.
-
In logo_mobile.svg and logo_tablet.svg, however, most or all of the text is
<text>
elements using the "Monotype Corsiva" font. It's a low probability that any devices will have that font installed.
You have a few solutions, in order of my recommendation:
- Go back into your vector editor and make sure all text elements are converted to paths. Your problem will disappear.
- License the Microsoft Cursiva font and add it to your website CSS using
@font-face
etc. - Change the SVGs to use a font that all devices are likely to support. Ie. plain old default
font: serif
.