Diseño · Guía práctica de diseño digital
Un logo SVG puede encajar en un hueco ancho sin estirarse: qué revisar en el archivo
El dibujo interno y el espacio que lo muestra tienen proporciones distintas. Un ejemplo con un círculo explica qué hace el ajuste de escala y por qué pueden quedar márgenes.
Un logotipo puede verse deformado al pasar de un archivo a una cabecera aunque su dibujo original siga intacto. En SVG conviene separar el rectángulo interno que organiza las coordenadas de la región donde se presenta. La especificación del W3C explica que el atributo viewBox relaciona ese sistema interno con el espacio disponible; no debe confundirse con el tamaño de toda la ventana del navegador.
La documentación de MDN describe viewBox mediante cuatro números: posición horizontal y vertical de origen, anchura y altura. Así, «0 0 100 100» define un cuadrado de 100 unidades por lado en el sistema del dibujo. Estas cifras no ordenan por sí solas que la imagen mida 100 píxeles en la página. El tamaño del elemento que la contiene y su presentación siguen siendo otra parte de la integración.
Tomemos un ejemplo propio: un círculo dentro de ese cuadrado se coloca en una región de 120 por 60 píxeles. Con preserveAspectRatio="xMidYMid meet", el cuadrado se ajusta uniformemente a 60 por 60 y queda centrado. Sobran 30 píxeles a cada lado. No es un espacio inexplicable añadido al dibujo: resulta de encajar un cuadrado completo en un hueco con el doble de anchura que altura.
El ajuste «meet» preserva las proporciones y mantiene visible todo el viewBox. La opción «none», en cambio, permite una escala horizontal y vertical diferente para llenar la región. En el ejemplo, estirar el cuadrado de 100 por 100 hasta 120 por 60 convertiría el círculo en una elipse. La primera decisión de diseño es, por tanto, si se quiere conservar la forma completa, incluso si eso deja espacio libre, o se ha elegido deliberadamente otro comportamiento.
Antes de alterar el dibujo proponemos una comprobación ordenada: anotar la proporción del viewBox, medir el hueco de presentación y revisar el valor de ajuste. Si el logotipo parece pequeño, interesa distinguir entre espacio libre dentro del propio archivo y espacio sobrante por las proporciones del contenedor. Recortar a ciegas el rectángulo interno podría ocultar parte de una marca que se pretendía conservar.
Una ficha de entrega puede registrar esos tres datos junto a una vista de referencia aprobada del diseño. Así, quien integra la cabecera sabe qué forma debe conservar y puede revisar una discrepancia sin redibujar el emblema. Este ejemplo es geométrico y no acredita una prueba entre navegadores. La ilustración editorial representa las medidas del supuesto, no un logotipo de terceros ni una recomendación de cambiar sus proporciones.
Comprobación práctica
- Dibujo interno: 100 × 100 unidades
- Hueco disponible: 120 × 60 píxeles
- Con meet: escala uniforme a 60 × 60
- Resultado: 30 píxeles libres por lado