Si usamos un SVG en el mobile_logo, se escala incorrectamente:
Puedo (y lo haré) cambiar a un PNG por ahora, ¡pero preferiría no hacerlo!
Suponiendo que también se podría arreglar con un ajuste de CSS, pero no puedo ser la única persona que intenta esto.
Uso un logo SVG y no he tenido problemas de escalado. Quizás no entiendo el problema, ¿es que es demasiado pequeño?
Solo señalaría la relación de aspecto de 3:1 como se sugiere en la configuración
¿Tu imagen SVG tiene un exceso de transparencia rodeando el logo?
Pide una relación de aspecto mayor que 3:1. Un archivo PNG con las mismas proporciones funciona bien, por lo que este problema se relaciona específicamente con el manejo del SVG.
Como SVG no, es un vector y no tiene un concepto real de tamaño en este contexto. El mismo archivo se muestra bien como el logo del sitio.
La imagen en mi captura de pantalla es una prueba después de detectar el problema en un sitio de producción. Creé una línea de texto comparable, la convertí en contornos y exporté el objeto. Si el archivo tuviera algún problema, también se observaría en el logo del sitio. No hay relleno:
Al observar esto más de cerca, tu sitio maneja el logo SVG de manera diferente, probablemente a través del tema:
Mientras que este sitio está ejecutando uno de los predeterminados, y se ve así:
Parece que tu logo fue producido por Inkscape y las dimensiones se codificaron de forma rígida dentro del archivo. Eso no es típico de todos los generadores de SVG:
vs
Si funciona con la vista de escritorio, solo necesitamos un tratamiento similar para el logo móvil.
¿Estás hablando del foro y el logo de @piffy? No encuentro esta información en el tema, esto es un poco confuso 
¿Puedes proporcionar tu “logo svg de prueba” para que pueda echar un vistazo?
Sí, se refirieron a su sitio, así que comparé como referencia.
SVG no está autorizado para publicarse en meta. Aquí está la fuente:
<?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>
¡Gracias!
Puedo reproducir el problema.
Escritorio:
Móvil:
El tamaño del logo se establece mediante
.d-header .title {
min-width: 36px;
}
Y se establecerá en 0 si no hay un tamaño codificado en el código SVG, aparentemente. Por ejemplo, eliminé los valores de ancho y alto del logo de Discourse, y aquí está el resultado:
No entiendo por qué funciona en el escritorio en este caso.
Creo que he identificado el problema y creo que lo he resuelto.
El SVG está dentro de un hijo de flexbox \u003ca class=\"title\"\u003e que no crecerá según el contenido por defecto. Sin dimensiones establecidas en el archivo SVG, no ve “razón” para crecer, de ahí un ancho por defecto de 0px.
Si permites que el contenedor del logo crezca, se soluciona el problema:
.d-header .title:not(.title--minimized) {
overflow: hidden;
flex-grow: 1; // añadido
}
¡Gracias por el desglose detallado! De hecho, usé Inkscape. Poner mi sitio en modo seguro produce el mismo CSS, así que no creo que sea de un tema o plugin:
Independientemente, parece que el CSS es un poco una pista falsa y las dimensiones del SVG son las culpables aquí. También pude reproducir tu problema al eliminar las dimensiones.
Voy a probar esto un poco más, pero parece una buena solución… gracias por resolverlo. Mi principal preocupación con flex-grow es cómo podría interactuar con elementos de encabezado hermanos que a veces se agregan en los temas, ¡pero parece que funciona bien por defecto!
Este problema no ocurre en el escritorio porque tenemos una altura especificada
.d-header #site-logo {
height: 2.667em;
}
En el móvil, asumimos que el logo es probablemente más grande que el espacio disponible y lo limitamos para que quepa:
.d-header #site-logo {
max-height: 2.4em;
max-width: 100%;
}
Por lo tanto, a los SVG sin dimensiones en el escritorio se les da una dimensión en CSS, y en el móvil dejamos que el logo determine su tamaño (limitado por max-height o max-width, lo que ocurra primero). Así que, dado que no hay dimensiones ni directiva para que crezca más, se mantiene diminuto (¡según lo dictado por min-width en .title, sin eso es invisible!).
Otra posible solución es actualizar max-height del logo móvil a height. Eso sería consistente con cómo se tratan los logos en el escritorio.
Probablemente implementaré una solución para esto mañana, pero mientras tanto, agregar dimensiones al SVG es una solución fácil, ni siquiera tiene que ser una dimensión precisa… si le pones width="1000" y nada más, crecerá para llenar el espacio y su tamaño máximo estará limitado por CSS.
Lo complicado es que la aplicación que producía SVGs sin dimensiones es Illustrator. Por ahora, solo usé un PNG y se arreglará pronto. No me imagino diciéndole a nadie que meta su vector en un editor de texto para modificarlo 
jeje
Sí, supongo que es el propósito de los SVG no tener dimensiones, ¡pero ha introducido una pequeña complicación que las etiquetas de imagen no tenían antes!
Se pueden exportar desde Illustrator con dimensiones si la casilla “responsive” está desmarcada en la ventana modal de opciones SVG (esto es desde archivo → exportar → exportar como):
(Otro problema que he encontrado y que se puede evitar en la ventana modal de exportación… Si estás incrustando una imagen SVG directamente en la página como marcado, también puede ayudar cambiar el estilo a “inline”, de lo contrario, los estilos de diferentes SVG pueden chocar porque probablemente usarán los mismos nombres de clase de Illustrator)
Puedo intentar decirles que lo están haciendo mal, pero aun así probablemente no respondería por qué está bien en el escritorio y no en el móvil 
He fusionado una corrección aquí que resolverá esto y, en general, hará que el CSS del logo de escritorio/móvil sea más consistente.
Maravilloso, gracias @awesomerobot
Este tema se cerró automáticamente después de 2 días. Ya no se permiten nuevas respuestas.
