Si nous utilisons un SVG dans le mobile_logo, il est mal mis à l’échelle :
Je peux (et vais) passer à un PNG pour l’instant, mais je préférerais ne pas le faire !
En supposant que cela puisse également être corrigé avec une modification CSS, mais je ne peux pas être la seule personne à tenter cela.
J’utilise un logo SVG et je n’ai pas eu de problèmes de mise à l’échelle. Peut-être que je ne comprends pas le problème, est-ce qu’il est trop petit ?
Je signalerais simplement le rapport d’aspect 3:1 comme suggéré dans les paramètres
Votre image SVG a-t-elle un excès de transparence autour du logo ?
Il demande un rapport hauteur/largeur supérieur à 3:1. Un fichier PNG avec les mêmes proportions fonctionne bien, donc ce problème est spécifiquement lié à la gestion du SVG.
En tant que SVG, non, c’est un vecteur et il n’a pas de concept réel de taille dans ce contexte. Le même fichier s’affiche correctement en tant que logo du site.
L’image dans ma capture d’écran est un test après avoir repéré le problème sur un site de production. J’ai créé une ligne de texte comparable, l’ai convertie en contours et exporté l’objet. Si le fichier avait des problèmes, cela serait également observé dans le logo du site. Il n’y a aucun padding :
En regardant de plus près, votre site gère le logo SVG différemment, probablement via le thème :
Alors que ce site utilise l’une des configurations par défaut et ressemble à ceci :
Il semble que votre logo ait été produit par Inkscape et que les dimensions aient été codées en dur dans le fichier. Ce n’est pas typique de tous les générateurs SVG :
vs
S’il fonctionne avec la vue de bureau, nous avons juste besoin d’un traitement similaire pour le logo mobile.
Parlez-vous du forum et du logo de @piffy ? Je ne trouve pas cette information fournie dans le sujet, c’est un peu déroutant 
Pouvez-vous fournir votre « logo svg de test » pour que je puisse jeter un œil ?
Oui - ils ont fait référence à leur site, donc j’ai comparé à titre de référence.
SVG n’est pas autorisé pour la publication sur meta. Voici la source :
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.88 11.02">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<path class="cls-1" d="m1.93,1.04v1.67h1.51v.8h-1.51v3.13c0,.72.2,1.13.79,1.13.28,0,.48-.04.61-.07l.05.79c-.2.08-.53.14-.94.14-.49,0-.89-.16-1.14-.44-.3-.31-.41-.83-.41-1.51v-3.17h-.9v-.8h.9v-1.39l1.03-.28Z" />
<path class="cls-1" d="m5.15,5.8c.02,1.43.94,2.01,1.99,2.01.76,0,1.21-.13,1.61-.3l.18.76c-.37.17-1.01.36-1.93.36-1.79,0-2.85-1.18-2.85-2.93s1.03-3.13,2.72-3.13c1.9,0,2.4,1.67,2.4,2.73,0,.22-.02.38-.04.49h-4.08Zm3.09-.76c.01-.67-.28-1.71-1.46-1.71-1.07,0-1.54.98-1.62,1.71h3.08Z" />
<path class="cls-1" d="m10.43,7.44c.31.2.86.42,1.39.42.77,0,1.13-.38,1.13-.86,0-.5-.3-.78-1.08-1.07-1.04-.37-1.54-.95-1.54-1.64,0-.94.76-1.7,2-1.7.59,0,1.1.17,1.43.36l-.26.77c-.23-.14-.65-.34-1.19-.34-.62,0-.97.36-.97.79,0,.48.35.7,1.1.98,1.01.38,1.52.89,1.52,1.75,0,1.02-.79,1.74-2.17,1.74-.64,0-1.22-.16-1.63-.4l.26-.8Z" />
<path class="cls-1" d="m16.6,1.04v1.67h1.51v.8h-1.51v3.13c0,.72.2,1.13.79,1.13.28,0,.48-.04.61-.07l.05.79c-.2.08-.53.14-.94.14-.49,0-.89-.16-1.14-.44-.3-.31-.41-.83-.41-1.51v-3.17h-.9v-.8h.9v-1.39l1.03-.28Z" />
<path class="cls-1" d="m21.7,7.44c.31.2.86.42,1.39.42.77,0,1.13-.38,1.13-.86,0-.5-.3-.78-1.08-1.07-1.04-.37-1.54-.95-1.54-1.64,0-.94.76-1.7,2-1.7.59,0,1.1.17,1.43.36l-.26.77c-.23-.14-.65-.34-1.19-.34-.62,0-.97.36-.97.79,0,.48.35.7,1.1.98,1.01.38,1.52.89,1.52,1.75,0,1.02-.79,1.74-2.17,1.74-.64,0-1.22-.16-1.63-.4l.26-.8Z" />
<path class="cls-1" d="m27,2.71l1.14,3.26c.19.53.35,1.01.47,1.49h.04c.13-.48.3-.96.49-1.49l1.13-3.26h1.1l-2.28,5.8h-1.01l-2.21-5.8h1.13Z" />
<path class="cls-1" d="m37.24,2.71c-.02.42-.05.89-.05,1.6v3.37c0,1.33-.26,2.15-.83,2.65-.56.53-1.38.7-2.11.7s-1.46-.17-1.93-.48l.26-.8c.38.24.98.46,1.7.46,1.08,0,1.87-.56,1.87-2.03v-.65h-.02c-.32.54-.95.97-1.85.97-1.44,0-2.47-1.22-2.47-2.83,0-1.97,1.28-3.08,2.61-3.08,1.01,0,1.56.53,1.81,1.01h.02l.05-.88h.92Zm-1.09,2.29c0-.18-.01-.34-.06-.48-.19-.61-.71-1.12-1.48-1.12-1.01,0-1.73.85-1.73,2.19,0,1.14.58,2.09,1.72,2.09.65,0,1.24-.41,1.46-1.08.06-.18.08-.38.08-.56v-1.04Z" />
<path class="cls-1" d="m41.5,0h1.06v8.52h-1.06V0Z" />
<path class="cls-1" d="m49.58,5.56c0,2.15-1.49,3.08-2.89,3.08-1.57,0-2.78-1.15-2.78-2.99,0-1.94,1.27-3.08,2.88-3.08s2.79,1.21,2.79,2.99Zm-4.61.06c0,1.27.73,2.23,1.76,2.23s1.76-.95,1.76-2.25c0-.98-.49-2.23-1.74-2.23s-1.79,1.15-1.79,2.25Z" />
<path class="cls-1" d="m55.92,2.71c-.02.42-.05.89-.05,1.6v3.37c0,1.33-.26,2.15-.83,2.65-.56.53-1.38.7-2.11.7s-1.46-.17-1.93-.48l.26-.8c.38.24.98.46,1.7.46,1.08,0,1.87-.56,1.87-2.03v-.65h-.02c-.32.54-.95.97-1.85.97-1.44,0-2.47-1.22-2.47-2.83,0-1.97,1.28-3.08,2.61-3.08,1.01,0,1.56.53,1.81,1.01h.02l.05-.88h.92Zm-1.09,2.29c0-.18-.01-.34-.06-.48-.19-.61-.71-1.12-1.48-1.12-1.01,0-1.73.85-1.73,2.19,0,1.14.58,2.09,1.72,2.09.65,0,1.24-.41,1.46-1.08.06-.18.08-.38.08-.56v-1.04Z" />
<path class="cls-1" d="m62.88,5.56c0,2.15-1.49,3.08-2.89,3.08-1.57,0-2.78-1.15-2.78-2.99,0-1.94,1.27-3.08,2.88-3.08s2.79,1.21,2.79,2.99Zm-4.61.06c0,1.27.73,2.23,1.76,2.23s1.76-.95,1.76-2.25c0-.98-.49-2.23-1.74-2.23s-1.79,1.15-1.79,2.25Z" />
</svg>
Merci !
Je peux reproduire le problème.
Bureau :
Mobile :
La taille du logo est définie par
.d-header .title {
min-width: 36px;
}
Et elle sera définie à 0 si aucune taille n’est codée en dur dans le code SVG apparemment. Par exemple, j’ai supprimé les valeurs de largeur et de hauteur du logo de Discourse, et voici le résultat :
Je ne comprends pas pourquoi cela fonctionne sur le bureau, dans ce cas.
J’ai essayé d’identifier le problème et je pense avoir trouvé.\n\nLe SVG est à l’intérieur d’un enfant flexbox \u003ca class=\"title\"\u003e qui ne grandit pas en fonction du contenu par défaut. Sans dimensions définies sur le fichier SVG, il ne voit aucune « raison » de grandir, d’où une largeur par défaut de 0px.\n\nSi vous autorisez le conteneur du logo à grandir, cela résout le problème :\n\ncss\n.d-header .title:not(.title--minimized) {\n overflow: hidden;\n flex-grow: 1; // ajouté\n}\n\n\n
Merci pour cette explication détaillée ! J’ai effectivement utilisé Inkscape. Mettre mon site en mode sans échec donne le même CSS, donc je ne pense pas que cela provienne d’un thème ou d’un plugin :
Quoi qu’il en soit, il semble que le CSS soit un peu un leurre et que les dimensions du SVG soient le coupable ici. J’ai également pu reproduire votre problème en supprimant les dimensions.
Je vais tester cela un peu plus, mais cela semble être une bonne solution… merci de l’avoir trouvée. Ma principale préoccupation avec flex-grow est la façon dont il pourrait interagir avec les éléments d’en-tête frères qui sont parfois ajoutés dans les thèmes, mais il semble que cela fonctionne bien par défaut !
Ce problème ne se produit pas sur ordinateur car nous avons une hauteur spécifiée
.d-header #site-logo {
height: 2.667em;
}
Sur mobile, nous supposons que le logo est probablement plus grand que l’espace disponible et nous le contraignons pour qu’il s’adapte :
.d-header #site-logo {
max-height: 2.4em;
max-width: 100%;
}
Ainsi, les SVG sans dimension sur ordinateur reçoivent une dimension en CSS, et sur mobile, nous laissons le logo déterminer sa taille (limitée par max-height ou max-width, selon ce qui vient en premier). Donc, étant donné aucune dimension et aucune directive pour grandir, il reste minuscule (tel que dicté par min-width sur .title, sans cela il est invisible !).
Une autre solution possible est de mettre à jour le max-height du logo mobile en height. Ce serait cohérent avec la façon dont les logos sont traités sur ordinateur.
Je vais probablement corriger cela demain, mais en attendant, ajouter des dimensions au SVG est une solution facile, il n’a même pas besoin d’être une dimension précise… si vous ajoutez width="1000" et rien d’autre, il grandira pour s’adapter à l’espace et sa taille maximale sera limitée par le CSS.
Le point délicat est que l’application qui produisait des SVG sans dimension était Illustrator. J’ai juste utilisé un PNG pour l’instant, et cela sera bientôt corrigé. Je n’arrive pas à imaginer dire à quiconque de jeter son vecteur dans un éditeur de texte pour le modifier 
hah
Oui, je suppose que c’est un peu le but des SVG de ne pas avoir de dimensions, mais cela a introduit une petite complication que les balises d’image n’avaient pas auparavant !
Ils peuvent être exportés depuis Illustrator avec des dimensions si la case « responsive » est décochée dans la fenêtre modale des options SVG (ceci se trouve dans fichier → exporter → exporter sous) :
(Un autre problème que j’ai rencontré et qui peut être évité dans la fenêtre modale d’exportation… Si vous intégrez une image SVG directement sur la page sous forme de balisage, il peut également être utile de passer le style à « inline », sinon les styles de différents SVG peuvent entrer en conflit car ils utiliseront probablement les mêmes noms de classes Illustrator)
Je peux essayer de leur dire qu’ils font ça mal, mais ça ne répondrait probablement toujours pas à la question de savoir pourquoi ça fonctionne sur ordinateur et pas sur mobile 
J’ai juste fusionné une correction ici qui résoudra ce problème et rendra le CSS du logo bureau/mobile plus cohérent en général
Magnifique, merci @awesomerobot
Ce sujet a été automatiquement fermé après 2 jours. Les nouvelles réponses ne sont plus autorisées.
