SVG preserveAspectRatio: ajusta diseños sin estirarlos

Utiliza preserveAspectRatio="xMidYMid meet" cuando todo el viewBox del SVG deba caber dentro de su área de visualización sin estirarse. Utiliza slice cuando deba cubrirse esa área y parte del contenido pueda extenderse más allá de sus bordes. Utiliza none solo cuando sea intencionado aplicar escalas horizontales y verticales diferentes.

La distinción importante es entre el rectángulo de coordenadas del diseño, definido por viewBox, y la ventana donde aparece. El ajuste cambia cómo se mapea uno en la otra. No redibuja un logotipo, ni elimina lienzo vacío del original ni borra permanentemente trazados recortados.

Elige primero el comportamiento de ajuste

La referencia de preserveAspectRatio de MDN documenta estos valores y el predeterminado, xMidYMid meet. Para un elemento svg, este mapeo requiere un viewBox. El atributo distingue mayúsculas y minúsculas: conserva la A y la R mayúsculas.

Para un logotipo, empieza por meet. Perder una letra o convertir un círculo en óvalo suele ser peor que dejar algo de espacio. Para un fondo ornamental, puede ser aceptable un recorte deliberado. Decídelo antes de elegir la alineación.

Prueba un emblema en dos formas de ventana

Este ejemplo original utiliza un círculo, un rectángulo y un triángulo descentrado. El círculo hace visible el estiramiento; las partes desiguales permiten detectar cambios de alineación mejor que una insignia simétrica.

Pega esto en un archivo HTML y ábrelo en un navegador:

<svg width="300" height="100" viewBox="0 0 200 100"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="Circle, rectangle, and triangle emblem"
     style="background:#f4ead4; overflow:hidden">
  <circle cx="40" cy="50" r="25" fill="#147d78" />
  <path d="M85 20 H130 V80 H85Z" fill="#e5a340" />
  <path d="M145 70 L170 25 L190 70Z" fill="#183549" />
</svg>

El viewBox mide 200 unidades de ancho y 100 de alto. Su proporción es 2:1. La primera ventana es de 300 por 100 píxeles CSS, una proporción 3:1. Cambia solo el atributo para comparar xMidYMid slice y none. Después cambia la ventana a width="100" height="300" y repite.

Renderizamos esta geometría en Chrome con un pequeño entorno de pruebas basado en un selector. Su lectura utilizaba la matriz de transformación actual del grupo del diseño. Las escalas y traslaciones resultantes coincidieron con estos valores; el desplazamiento de slice de aproximadamente −25 píxeles está redondeado aquí.

En la ventana alta, meet mostraba las tres formas pequeñas. slice centrado mostraba solo parte de la composición ampliada, dominada por el rectángulo dorado. none hacía el círculo estrecho y alto. Es una comprobación de este ejemplo en Chrome, no una promesa sobre la importación en todos los editores gráficos.

La regla de escala es sencilla para este ejemplo de origen cero. Divide el ancho de ventana entre el ancho de viewBox y después el alto de ventana entre el alto de viewBox. meet utiliza la proporción menor para ambos ejes; slice utiliza la mayor. none mantiene las dos proporciones separadas. La especificación del sistema de coordenadas SVG define el mapeo, incluidas la alineación y los orígenes de viewBox distintos de cero.

Utiliza la alineación para elegir dónde va el espacio sobrante

La primera palabra clave controla la alineación. xMin, xMid y xMax alinean el borde izquierdo, el centro horizontal o el borde derecho del viewBox. YMin, YMid y YMax hacen lo equivalente verticalmente. Se refieren al rectángulo viewBox, que puede contener espacio vacío alrededor de los trazados reales.

Para la ventana alta de prueba:

• xMinYMin meet coloca el viewBox ajustado arriba en lugar de centrarlo verticalmente.
• xMinYMin slice mantiene el lado izquierdo del viewBox alineado con el lado izquierdo de la ventana. El lado derecho ampliado se extiende fuera de ella.
• xMidYMid slice distribuye el desbordamiento horizontal a ambos lados.

Cambiamos el entorno de pruebas de centrado a xMinYMin. Tanto la traslación de meet como la de slice pasaron a cero, mientras que sus factores de escala permanecieron en 0.5 y 3 respectivamente. La alineación movió la composición; no cambió la escala de ajuste.

Un cambio de alineación solo es visible en un eje con espacio sobrante o desbordamiento. En el caso ancho de meet, el viewBox ya llena el alto, por lo que cambiar YMid a YMin no deja espacio vertical para moverlo.

Elige el recorte expresamente

slice selecciona una escala. El recorte determina si puedes ver las partes que se extienden fuera de la ventana. El ejemplo establece expresamente overflow:hidden para que el recorte sea predecible.

En el entorno de prueba alto, cambiar overflow a visible reveló el círculo y el triángulo ampliados fuera de la ventana slice. La geometría no había desaparecido. La referencia de overflow de SVG de MDN explica la relación entre desbordamiento y recorte de ventana, incluidas diferencias de estilos predeterminados entre contextos SVG.

Evita tratar slice como una operación de recorte de trazados. Si un archivo de entrega debe contener solo la geometría conservada, realiza y verifica una operación real de edición. Para una ventana personalizada no rectangular, un clipPath puede ser la herramienta adecuada.

Asimismo, meet garantiza que cabe el viewBox; no garantiza que quepa todo el contenido pintado. Un trazo, filtro o trazado fuera de ese rectángulo original puede seguir extendiéndose más allá. Inspecciona los bordes visibles en lugar de confiar solo en el atributo.

Corrige el espacio vacío del original antes de luchar con la alineación

Supón que una pequeña marca ocupa solo el centro de un viewBox muy grande. meet ajusta todo ese rectángulo de coordenadas, incluidos sus márgenes vacíos. El resultado puede parecer demasiado pequeño aunque la escala sea correcta.

Comprueba el lienzo o la mesa de trabajo exportados en tu editor. Si cambias el viewBox para ajustar la composición, incluye los trazos y efectos previstos y vuelve a comprobar cada colocación. No elimines automáticamente todos los márgenes: el original puede contener un espacio libre deliberado alrededor de una marca.

Los problemas de tamaño físico son independientes. Un SVG que se importa con un tamaño incorrecto en milímetros necesita el proceso de dimensionado SVG; cambiar la alineación de ajuste difícilmente corregirá sus supuestos sobre unidades.

Distingue SVG en línea del ajuste de imágenes

Para SVG en línea, cambia el atributo en el elemento svg pertinente. CSS puede dimensionar el recuadro de ese elemento, mientras que preserveAspectRatio mapea su viewBox dentro de él.

Para un SVG externo utilizado en un elemento de imagen HTML, CSS controla el ajuste de la imagen reemplazada:

<img class="brand-mark" src="emblem.svg" alt="Brand emblem">
<style>
  .brand-mark {
    width: 300px;
    height: 100px;
    object-fit: contain;
    object-position: center;
  }
</style>

La documentación de object-fit de MDN describe cómo se ajusta el contenido reemplazado a su recuadro CSS. Es un nivel distinto de editar el mapeo interno del documento SVG. object-fit: contain tampoco puede eliminar lienzo vacío ya presente en el original. Consulta SVG en línea frente a un elemento de imagen al decidir qué modelo de inserción utilizar.

También existe un elemento SVG image, escrito con la palabra completa en lugar del img de HTML. Su preserveAspectRatio controla cómo se ajusta la imagen referenciada al rectángulo establecido para ese elemento. Es la excepción al requisito general de proporcionar un viewBox en el mismo elemento, como explica la referencia del atributo de MDN. Distinguir estos tres casos evita intentar arreglar una imagen HTML añadiéndole un atributo exclusivo de SVG.

Conserva las proporciones originales antes de colocar

Si solo tienes un PNG o JPG de tu marca personalizada y necesitas geometría vectorial editable, PerfectVector puede recuperar un original SVG antes de construir la composición. Inspecciona primero los contornos, las pequeñas aberturas y los límites del lienzo. Ajustar el resultado conserva su geometría actual; no puede reparar un original distorsionado ni recrear detalles que nunca se recuperaron.

Un SVG limpio existente puede pasar directamente a las comprobaciones de ajuste. Para el emblema sencillo anterior, basta con geometría escrita a mano. La introducción a la vectorización de imágenes explica cuándo resulta útil recuperar trazados de una imagen rasterizada.

Para una marca exclusivamente rasterizada, prueba tu original en PerfectVector, inspecciona el SVG y después compara una colocación ancha y otra alta con meet antes de considerar un recorte. Conserva el original vectorial para que las decisiones de composición sigan siendo reversibles.

Preguntas frecuentes

¿Por qué mi SVG sigue teniendo espacio vacío con meet? La ventana y el viewBox pueden tener relaciones de aspecto diferentes, dejando espacio sobrante tras el escalado uniforme. El viewBox original también puede contener márgenes alrededor de los trazados. La alineación mueve ese rectángulo; no elimina su espacio vacío interno.

¿Recorta slice permanentemente el diseño? No. Cambia la escala utilizada para cubrir la ventana. El desbordamiento y el recorte controlan qué partes son visibles. La geometría original de los trazados permanece en el documento salvo que la edites por separado.

¿Por qué none convierte mi círculo en un óvalo? Permite factores de escala horizontales y verticales diferentes. Cuando difieren las proporciones de ventana y viewBox, un círculo puede convertirse en una elipse. Utiliza meet o slice con una palabra clave de alineación para mantener un escalado uniforme.

Fuentes

1. MDN preserveAspectRatio — define valores de ajuste, alineación, valores predeterminados y la excepción de image de SVG.
2. Especificación del sistema de coordenadas SVG — define el cálculo de escala y traslación de una ventana.
3. MDN overflow de SVG — explica cómo overflow controla el recorte de la ventana.
4. MDN object-fit — documenta el ajuste del contenido de imagen reemplazado dentro de un recuadro CSS.