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:

  1. Go back into your vector editor and make sure all text elements are converted to paths. Your problem will disappear.
  2. License the Microsoft Cursiva font and add it to your website CSS using @font-face etc.
  3. Change the SVGs to use a font that all devices are likely to support. Ie. plain old default font: serif.