viewBox de SVG y escalado adaptable

Los atributos width y height de SVG establecen el tamaño renderizado en el DOM. El atributo viewBox define el espacio de coordenadas interno. Son independientes: un viewBox de "0 0 100 100" con width="200" y height="200" escala el espacio de coordenadas 2x.

viewBox="min-x min-y width height". Lo más habitual es: viewBox="0 0 100 100", que define un espacio de coordenadas de 100x100 cuyo origen es el punto inicial. Los valores de coordenadas del SVG hacen referencia a este espacio, no a píxeles.

Para crear un SVG adaptable, omita los atributos width y height (o establézcalos en 100%) y deje que viewBox defina las proporciones. Añada CSS: svg { width: 100%; height: auto; }. El SVG se escala para ajustarse a su contenedor y mantiene la relación de aspecto.

preserveAspectRatio controla cómo se ajusta viewBox al viewport de SVG cuando las relaciones de aspecto son diferentes. Valores: "xMidYMid meet" (predeterminado: añade bandas), "xMidYMid slice" (recorta para rellenar), "none" (estira para ajustarse sin mantener la relación de aspecto).

Cambiar min-x y min-y desplaza la parte visible del espacio de coordenadas SVG. viewBox="50 50 100 100" muestra la región desde (50,50) hasta (150,150). Esto permite crear desplazamiento interactivo actualizando los valores de viewBox con JavaScript.

Reduzca las dimensiones de viewBox para ampliar: viewBox="25 25 50 50" muestra una región más pequeña, ampliada para ocupar todo el elemento SVG. Aumente las dimensiones para alejar la vista. Actualice viewBox en los eventos wheel para crear un zoom interactivo sin escalar el elemento SVG.

SVG en una etiqueta img: se escala de forma adaptable con object-fit, pero no se puede estilizar con CSS ni controlar mediante scripts. SVG integrado: ofrece acceso completo desde CSS y JavaScript, pero aumenta el tamaño del HTML. Elija según las necesidades de interactividad.

Los SVG de iconos utilizan un viewBox fijo (por ejemplo, "0 0 24 24") y no tienen width ni height, de modo que CSS puede definir su tamaño: .icon { width: 1.5rem; height: 1.5rem; }. viewBox garantiza que los iconos se escalen correctamente a cualquier tamaño y mantengan un renderizado vectorial nítido.

Defina los iconos en elementos <symbol viewBox="0 0 24 24"> dentro de un SVG oculto. Haga referencia a ellos con <use href="#icon-name">. Cada elemento use puede tener sus propios valores de width, height, fill y color: un solo archivo de sprite para todos los iconos.

El atributo fill="currentColor" de SVG hereda la propiedad CSS color del elemento o de su elemento principal. Establezca color: red en el SVG o en un elemento principal y el icono se rellenará automáticamente de rojo. Esto permite que los iconos de un solo color sigan el color del texto sin estilos específicos de SVG.

Si el contenido SVG aparece recortado o se sitúa de forma inesperada, registre o inspeccione el valor de viewBox. Un error común consiste en establecer viewBox con las dimensiones en píxeles de la ilustración de origen sin ajustarlo al tamaño renderizado, lo que provoca problemas de escala. Compruebe que viewBox coincida con los límites reales del contenido de la ilustración SVG.

¿Cómo consigue que un SVG se escale de forma adaptable para ajustarse al ancho de cualquier contenedor?

El viewBox de SVG define un espacio de coordenadas interno independiente del tamaño renderizado en píxeles, lo que permite un escalado adaptable. Establecer width:100%; height:auto con un viewBox permite que los SVG se adapten a cualquier contenedor. El patrón de sprite symbol+use, la aplicación de temas con currentColor y preserveAspectRatio forman un conjunto completo de herramientas para utilizar SVG flexibles y adaptables a distintos temas.