On the monitor display changing the width (desktop, tablet and mobile) the SVG image is showing perfect but on the real mobile phone the image is truncated. You can see by opening the repository on real phone: https://miorita69.github.io/perle_di_stelle/

In the header I am using picture tag. All the three stages on the computer monitor are showing perfect, but the third in the mobile phone is trancated.

<picture>
   <source type="image/svg xml" media="(min-width: 768px)" srcset="images/logo_desktop.svg">
   <source type="image/svg xml" media="(min-width: 680px)" srcset="images/logo_tablet.svg">
   <source type="image/svg xml" media="(min-width: 320px)" srcset="images/logo_mobile.svg">
   <img  src="images/logo-mobile.png" alt="Logo Perle di Stelle">
</picture>

CSS

.navbar__logo-image {
   width: auto;
   height: calc(90% - 10px);
   display: block;
   margin: 5px auto;
}

 @media screen and (min-width:320px) and (max-width:860px) {
 .navbar__logo-image {
    width: 100%;
    height: var(--tablet-navbar-height);
    overflow: visible;
    display: block;
    margin: 0 auto;
    /*border: blue 1px solid;*/
 }
 ...
}

Can You help me to identify the problem with SVG image in mobile phone.

P.S. I know that Android earlier 3 are not supporting SVG images. I tested with Android 9.0 version and does not show perfectly.

CodePudding user response：

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.