Se usiamo un SVG in mobile_logo, viene ridimensionato in modo errato:
Posso (e lo farò) passare a un PNG per ora, ma preferirei di no!
Supponendo che possa essere risolto anche con una modifica CSS, ma non posso essere l’unica persona a tentare questa operazione.
Utilizzo un logo SVG e non ho avuto problemi di scalabilità. Forse non capisco il problema, è che è troppo piccolo?
Mi limiterei a notare il rapporto d’aspetto 3:1 come suggerito nelle impostazioni
La tua immagine SVG ha un’eccessiva trasparenza attorno al logo?
Richiede un rapporto d’aspetto maggiore di 3:1. Un file PNG con le stesse proporzioni funziona bene, quindi questo problema riguarda specificamente la gestione dell’SVG.
Come SVG no, è un vettore e non ha un concetto reale di dimensione in questo contesto. Lo stesso file viene visualizzato correttamente come logo del sito.
L’immagine nel mio screenshot è un test dopo aver riscontrato il problema su un sito di produzione. Ho creato una riga di testo comparabile, l’ho convertita in contorni ed esportato l’oggetto. Se il file avesse avuto problemi, questi sarebbero stati osservati anche nel logo del sito. Non c’è alcun padding:
Guardando più da vicino, il tuo sito gestisce il logo SVG in modo diverso, probabilmente attraverso il tema:
Mentre questo sito sta eseguendo una delle impostazioni predefinite e appare così:
Sembra che il tuo logo sia stato prodotto da Inkscape e le dimensioni siano state codificate nel file. Questo non è tipico di tutti i generatori SVG:
vs
Se funziona con la visualizzazione desktop, abbiamo solo bisogno di un trattamento simile per il logo mobile.
Stai parlando del forum e del logo di @piffy? Non trovo queste informazioni sull’argomento, è un po’ confuso 
Puoi fornire il tuo “logo svg di prova” in modo che possa dare un’occhiata?
Sì, hanno fatto riferimento al loro sito, quindi ho confrontato come riferimento.
SVG non è autorizzato per la pubblicazione su meta. Ecco la fonte:
<?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>
Grazie!
Riesco a riprodurre il problema.
Desktop:
Mobile:
La dimensione del logo è impostata da
.d-header .title {
min-width: 36px;
}
E verrà impostata a 0 se nessuna dimensione è codificata in modo fisso nel codice SVG, apparentemente. Ad esempio, ho rimosso i valori di larghezza e altezza dal logo di Discourse, ed ecco il risultato:
Non riesco a capire perché funzioni sul desktop, in questo caso.
Ho provato a individuare il problema e penso di averlo capito.
L’SVG si trova all’interno di un figlio flexbox \u003ca class=\"title\"\u003e che per impostazione predefinita non crescerà in base al contenuto. Senza dimensioni impostate sul file SVG, non vede alcuna “ragione” per crescere, da cui una larghezza predefinita di 0px.
Se si consente al contenitore del logo di crescere, il problema viene risolto:
.d-header .title:not(.title--minimized) {
overflow: hidden;
flex-grow: 1; // aggiunto
}
Grazie per la spiegazione dettagliata! In effetti ho usato Inkscape. Mettere il mio sito in modalità provvisoria restituisce lo stesso CSS, quindi non credo che provenga da un tema o da un plugin:
Indipendentemente da ciò, sembra che il CSS sia un po’ un depistaggio e le dimensioni SVG siano il colpevole qui. Sono anche stato in grado di riprodurre il tuo problema rimuovendo le dimensioni.
Testerò ancora un po’, ma sembra una buona soluzione… grazie per averla trovata. La mia principale preoccupazione riguardo a flex-grow è come potrebbe interagire con gli elementi header fratelli che a volte vengono aggiunti nei temi, ma sembra che funzioni bene per impostazione predefinita!
Questo problema non si verifica sul desktop perché abbiamo specificato un’altezza
.d-header #site-logo {
height: 2.667em;
}
Su mobile, presumiamo che il logo sia probabilmente più grande dello spazio disponibile e lo limitiamo per adattarlo:
.d-header #site-logo {
max-height: 2.4em;
max-width: 100%;
}
Quindi, gli SVG senza dimensioni sul desktop ricevono una dimensione in CSS, e su mobile lasciamo che il logo determini la sua dimensione (limitato da max-height o max-width, a seconda di quale venga prima). Quindi, dato che non ci sono dimensioni e nessuna direttiva per ingrandirsi, rimane minuscolo (come dettato da min-width su .title, senza di esso è invisibile!).
Un’altra possibile soluzione è aggiornare max-height del logo mobile a height. Sarebbe coerente con il modo in cui i loghi vengono trattati sul desktop.
Probabilmente risolverò questo problema domani, ma nel frattempo aggiungere dimensioni all’SVG è una soluzione facile, non deve nemmeno essere una dimensione accurata… se aggiungi width="1000" e nient’altro, si allargherà per adattarsi allo spazio e la sua dimensione massima sarà limitata dal CSS.
Il punto complicato è che l’app che produceva SVG senza dimensioni è Illustrator. Per ora ho usato solo una PNG e verrà risolto presto. Non riesco a immaginare di dire a qualcuno di buttare il proprio vettore in un editor di testo per modificarlo 
hah
Sì, immagino che sia proprio il punto degli SVG non avere dimensioni, ma ha introdotto una piccola complicazione che i tag immagine non avevano prima!
Possono essere esportati da Illustrator con dimensioni se la casella “responsive” non è selezionata nella finestra modale delle opzioni SVG (questo si trova in file → esporta → esporta come):
(Un altro problema che ho riscontrato e che può essere evitato nella finestra modale di esportazione… Se stai incorporando un’immagine SVG direttamente nella pagina come markup, può anche essere utile passare lo stile a “inline”, altrimenti gli stili di diversi SVG possono scontrarsi perché probabilmente utilizzeranno gli stessi nomi di classe di Illustrator)
Posso provare a dire loro che lo stanno facendo nel modo sbagliato, ma probabilmente non risponderebbe comunque al motivo per cui funziona sul desktop e non sul cellulare 
Ho appena unito una correzione qui che risolverà questo problema e, in generale, renderà il CSS del logo desktop/mobile più coerente
Magnifico, grazie @awesomerobot
Questo argomento è stato chiuso automaticamente dopo 2 giorni. Non sono più consentite nuove risposte.
