Se usarmos um SVG no mobile_logo, ele é dimensionado incorretamente:
Eu posso (e vou) mudar para um PNG por enquanto, mas preferiria não ter que fazer isso!
Supondo que também possa ser corrigido com um ajuste de CSS, mas não posso ser a única pessoa tentando isso.
Eu uso um logotipo SVG e não tive problemas de escalonamento. Talvez eu não esteja entendendo o problema, é que ele está muito pequeno?
Eu apenas observaria a proporção 3:1 conforme sugerido nas configurações
Sua imagem SVG tem excesso de transparência cercando o logotipo?
Solicita uma proporção maior que 3:1. Um arquivo PNG com as mesmas proporções funciona bem, então este problema está especificamente relacionado ao manuseio do SVG.
Como um SVG não, é um vetor e não tem um conceito real de tamanho neste contexto. O mesmo arquivo é renderizado corretamente como o logotipo do site.
A imagem na minha captura de tela é um teste após a detecção do problema em um site de produção. Criei uma linha de texto comparável, converti-a em contornos e exportei o objeto. Se o arquivo tivesse algum problema, ele também seria observado no logotipo do site. Não há preenchimento:
Analisando mais de perto, seu site lida com o logotipo SVG de forma diferente, provavelmente através do tema:
Enquanto este site está executando um dos padrões e se parece com isto:
Parece que seu logotipo foi produzido pelo Inkscape e as dimensões foram codificadas no arquivo. Isso não é típico de todos os geradores de SVG:
vs
Se funciona com a visualização de desktop, precisamos de um tratamento semelhante para o logotipo móvel.
Você está falando sobre o fórum e o logo do @piffy? Não encontro essa informação fornecida no tópico, isso é um pouco confuso 
Você pode fornecer o seu “logo svg de teste” para que eu possa dar uma olhada?
Sim - eles se referiram ao site deles, então comparei como referência.
SVG não é autorizado para postagem no meta. Aqui está a 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>
Obrigado!
Consigo reproduzir o problema.
Desktop:
Mobile:
O tamanho do logo é definido por
.d-header .title {
min-width: 36px;
}
E ele será definido como 0 se nenhum tamanho for codificado diretamente no código SVG, aparentemente. Por exemplo, removi os valores de largura e altura do logo do Discourse, e aqui está o resultado:
Não consigo entender por que funciona no desktop, neste caso.
Eu tentei identificar o problema e acho que descobri.
O SVG está dentro de um filho flexbox \u003ca class=\"title\"\u003e que não cresce dependendo do conteúdo por padrão. Sem dimensões definidas no arquivo SVG, ele não vê “razão” para crescer, daí uma largura padrão de 0px.
Se você permitir que o contêiner do logo cresça, isso corrigirá o problema:
.d-header .title:not(.title--minimized) {
overflow: hidden;
flex-grow: 1; // added
}
Obrigado pela análise detalhada! De fato, eu usei o Inkscape. Colocar meu site em modo de segurança produz o mesmo CSS, então não acho que seja de um tema ou plugin:
Independentemente disso, parece que o CSS é um pouco enganoso e as dimensões do SVG são o culpado aqui. Eu também consegui reproduzir seu problema removendo as dimensões.
Vou testar isso um pouco mais, mas parece uma boa solução… obrigado por descobrir. Minha principal preocupação com flex-grow é como ele pode interagir com elementos de cabeçalho irmãos que às vezes são adicionados em temas, mas parece que funciona bem por padrão!
Este problema não ocorre no desktop porque temos uma altura especificada
.d-header #site-logo {
height: 2.667em;
}
No mobile, assumimos que o logo é provavelmente maior do que o espaço disponível e o restringimos para caber:
.d-header #site-logo {
max-height: 2.4em;
max-width: 100%;
}
Portanto, SVGs sem dimensão no desktop recebem uma dimensão em CSS, e no mobile deixamos o logo determinar seu tamanho (limitado por max-height ou max-width, o que ocorrer primeiro). Assim, dado sem dimensões e sem diretiva para crescer, ele permanece minúsculo (conforme ditado pelo min-width em .title, sem isso é invisível!).
Outra possível correção é atualizar o max-height do logo mobile para height. Isso seria consistente com a forma como os logos são tratados no desktop.
Provavelmente corrigirei isso amanhã, mas, enquanto isso, adicionar dimensões ao SVG é uma correção fácil, nem precisa ser uma dimensão precisa… se você adicionar width="1000" e nada mais, ele crescerá para preencher o espaço e terá seu tamanho máximo restrito pelo CSS.
O ponto complicado é que o aplicativo que produzia SVGs sem dimensão é o Illustrator. Por enquanto, usei apenas um PNG, e isso será corrigido em breve. Não consigo imaginar pedir a alguém para jogar seu vetor em um editor de texto para alterá-lo 
hah
Sim, acho que é um pouco o propósito dos SVGs não ter dimensões, mas isso introduziu uma pequena complicação que as tags de imagem não tinham antes!
Eles podem ser exportados do Illustrator com dimensões se a caixa responsiva for desmarcada na janela modal de opções do SVG (isso é de arquivo → exportar → exportar como):
(Outro problema que encontrei e que pode ser evitado na janela modal de exportação… Se você estiver incorporando uma imagem SVG diretamente na página como marcação, também pode ajudar a mudar o estilo para inline, caso contrário, estilos de diferentes SVGs podem entrar em conflito porque provavelmente usarão os mesmos nomes de classe do Illustrator)
Eu posso tentar dizer a eles que estão fazendo isso errado, mas isso provavelmente ainda não responderia por que funciona no desktop e não no celular 
Acabei de mesclar uma correção aqui que resolverá isso e, em geral, tornará o CSS do logotipo do desktop/móvel mais consistente
Maravilha, obrigado @awesomerobot
Este tópico foi fechado automaticamente após 2 dias. Novas respostas não são mais permitidas.
