¿Por qué mi logo móvil es raro?

image
Es 3:1, pero se muestra como 1:1. Es un SVG.
image

El estilo de los elementos del logotipo es el mismo que aquí.

Edición: Lo mismo sin ningún componente.

Edición #2: Es causado por el viewBox del SVG. ¿Cómo puedo hacer que un SVG sea compatible con Discourse?

¿Quizás intentes editar el viewBox del SVG? Según la captura de pantalla, adivinaría que, a pesar de que el logotipo tiene una proporción de 3:1, el viewBox es de 1:1.

El ancho y la altura del viewbox son 3:1. Y está bien en el escritorio.

Probé algunas cosas y parece que el viewBox está causando problemas… si en cambio muevo esos valores a height/width y elimino el viewBox, funciona igual en escritorio y en móvil.

Así que, abriendo el SVG en un editor de texto y cambiando la segunda línea de:

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

a:

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

Tendré que investigar por qué es diferente en móvil…

Está bien cuando especificas la max-height de la imagen como height. Pero parece que se genera un valor, así que no creo que sea una solución :smiley:

Parece que el ancho y la altura especifican un valor absoluto, pero el viewBox es más bien un valor “relativo”.
Y está bien. ¡Muchas gracias :smiley: