Por que meu logo mobile está estranho

image
Está 3:1. Mas mostra como 1:1. É um SVG.
image

O estilo dos elementos do logotipo é o mesmo que aqui

Edição: O mesmo sem nenhum componente

Edição #2: É causado pelo viewBox do SVG. Como posso fazer um SVG ser compatível com o Discourse?

Talvez tente editar o viewBox do SVG? Com base na captura de tela, eu diria que, apesar do logotipo ser 3:1, o viewBox é 1:1?

A largura e a altura do viewbox são 3:1. E está tudo certo no desktop.

Testei algumas coisas e parece que o viewBox está causando problemas… Se, em vez disso, eu mover esses valores para height/width e remover o viewBox, funciona da mesma forma no desktop e no mobile.

Então, abrindo o SVG em um editor de texto e alterando a segunda linha de:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 751.98 200">

para:

<svg xmlns="http://www.w3.org/2000/svg" width="751.98" height="200">

Vou precisar investigar por que isso é diferente no mobile…

Está tudo bem quando eu especifico o max-height da imagem como height. Mas parece que um valor está sendo gerado. Então, não acho que seja uma solução :smiley:

Parece que a largura e a altura especificam um valor absoluto. Mas a view box é mais como um valor “relativo”.
E está tudo bem. Muito obrigado :smiley: