SVG viewBox – escalar, recortar y ajustar gráficos SVG

SVG `viewBox`

El atributo viewBox indica a SVG qué rectángulo de coordenadas debe ajustarse al viewport visible. Al cambiar sus cuatro valores, puedes escalar la ilustración, recortarla, desplazar el área visible o hacer que el mismo SVG responda correctamente a distintos tamaños de visualización.

Este artículo es una guía práctica de viewBox. Asume que ya conoces el canvas SVG, el viewport y el sistema de coordenadas. Si esos términos aún no están claros, empieza por Sistemas de coordenadas y unidades SVG.

En este artículo aprenderás a:

Leer la sintaxis viewBox="min-x min-y width height".
Escalar gráficos SVG cambiando width y height del viewBox.
Recortar o reposicionar gráficos SVG cambiando min-x y min-y.
Combinar viewBox con preserveAspectRatio para salida SVG responsiva.

Cómo funciona `viewBox`

La especificación SVG define viewBox como un atributo que establece un sistema de coordenadas de usuario para el viewport SVG. Tiene cuatro valores separados por espacios:

1viewBox="min-x min-y width height"

Valor	Significado
`min-x`	Coordenada X donde empieza el rectángulo visible
`min-y`	Coordenada Y donde empieza el rectángulo visible
`width`	Anchura del rectángulo visible de coordenadas
`height`	Altura del rectángulo visible de coordenadas

El viewport es el área de salida definida por width, height, CSS o el diseño contenedor. viewBox es el rectángulo de coordenadas que SVG asigna a esa área de salida. Si viewBox es más pequeño que el viewport, el área de coordenadas seleccionada se amplía. Si es más grande, la ilustración parece más pequeña porque más espacio de coordenadas se ajusta al mismo área visible.

1<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
2    ...
3</svg>

Cambiar min-x o min-y mueve el rectángulo visible de coordenadas.
Cambiar width o height cambia la escala.
Cambiar los cuatro valores combina reposicionamiento y escala.

Nota: En las ilustraciones siguientes, el viewport se muestra en verde y la región viewBox en azul.

Ejemplos de escalado con SVG viewBox: original, reducción y ampliación

SVG de ejemplo usado en el artículo

Los ejemplos siguientes usan el mismo dibujo SVG sencillo con forma de flor. Solo cambia el valor de viewBox, para que puedas ver cómo el rectángulo de coordenadas afecta el resultado renderizado.

 1<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
 2  <g fill="RoyalBlue">
 3    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" />
 4    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(90 125 128)" />
 5    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(-45 125 128)" />
 6    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(45 125 128)" />
 7  </g>
 8  <circle cx="125" cy="128" r="28" stroke="pink" stroke-width="50" stroke-dasharray="3 13" fill="Orange" />
 9  <circle cx="125" cy="128" r="5" />
10</svg>

Escalar SVG con `viewBox`

El escalado con viewBox se controla mediante los dos últimos valores: width y height. Definen cuánto espacio de coordenadas debe ajustarse dentro del viewport.

Alejar con un `viewBox` más grande

Cuando width y height de viewBox son mayores que las dimensiones del viewport, SVG ajusta un área de coordenadas mayor al mismo tamaño de salida. El resultado parece más pequeño porque se ve más canvas a la vez.

1<svg width="250" height="250" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">

SVG viewBox con alejamiento: un viewBox más grande se ajusta al viewport

Acercar con un `viewBox` más pequeño

Cuando width y height de viewBox son menores que las dimensiones del viewport, SVG amplía esa zona de coordenadas menor para llenar el viewport. El resultado parece ampliado y el contenido fuera del rectángulo seleccionado puede quedar recortado.

1<svg width="250" height="250" viewBox="0 0 125 125" xmlns="http://www.w3.org/2000/svg">

SVG viewBox con acercamiento: un viewBox más pequeño amplía el contenido

Recortar o reposicionar SVG con `viewBox`

El recorte y el reposicionamiento se controlan mediante los dos primeros valores de viewBox: min-x y min-y. Estos valores mueven el inicio del rectángulo visible de coordenadas.

Recortar el lado derecho

Un min-x negativo mueve el rectángulo de coordenadas seleccionado hacia la izquierda. En este ejemplo, el rectángulo visible cubre coordenadas x desde -100 hasta 150, por lo que el contenido de la derecha queda recortado.

1<svg width="250" height="250" viewBox="-100 0 250 250" xmlns="http://www.w3.org/2000/svg">

SVG viewBox recortando el lado derecho

Recortar el lado izquierdo

Un min-x positivo mueve el rectángulo seleccionado hacia la derecha. En este ejemplo, el rectángulo visible empieza en la coordenada x 100, por lo que la parte izquierda de la ilustración ya no se ve.

1<svg width="250" height="250" viewBox="100 0 250 250" xmlns="http://www.w3.org/2000/svg">

SVG viewBox recortando el lado izquierdo

SVG responsivo y `preserveAspectRatio`

Para SVG responsivo, conserva viewBox y deja que CSS o el contenedor controlen el tamaño de visualización:

1<svg viewBox="0 0 250 250" width="100%" height="auto" xmlns="http://www.w3.org/2000/svg">

De forma predeterminada, SVG conserva la proporción del viewBox. Si el viewport y viewBox tienen proporciones distintas, el atributo preserveAspectRatio controla alineación y ajuste.

1<svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet">

Usa meet cuando toda la imagen deba permanecer visible. Usa slice cuando el viewport deba quedar completamente cubierto y el recorte sea aceptable.

Cómo usar SVG viewBox

Define el viewport visible con width, height, CSS o layout.
Elige el rectángulo de coordenadas con viewBox="min-x min-y width height".
Cambia width y height de viewBox para acercar o alejar.
Cambia min-x y min-y para recortar o reposicionar el área visible.
Añade preserveAspectRatio cuando las proporciones del viewport y del viewBox sean diferentes.

Errores comunes y soluciones

Problema	Causa	Solución
El SVG aparece estirado o aplastado	El viewport y `viewBox` tienen proporciones diferentes y no se controla el ajuste	Añade `preserveAspectRatio="xMidYMid meet"` o elige otro valor apropiado
La ilustración se recorta inesperadamente	El rectángulo `viewBox` no cubre el área de coordenadas deseada	Revisa `min-x`, `min-y`, `width` y `height` frente a las coordenadas de la ilustración
El SVG no escala de forma responsiva	El SVG tiene dimensiones fijas pero no `viewBox`	Mantén `viewBox` y controla el tamaño de visualización con CSS o el contenedor
Cambiar el tamaño CSS no cambia el recorte	CSS cambia el tamaño del viewport, no el rectángulo de coordenadas seleccionado	Cambia los valores de `viewBox` cuando necesites otro recorte o zona de zoom
`viewBox` se ignora	Faltan comillas, se usan comas incorrectamente o hay un número equivocado de valores	Usa exactamente cuatro valores separados por espacios: `viewBox="min-x min-y width height"`

Recetas rápidas

Tarea	Ejemplo SVG
Mantener todo el SVG escalable	`<svg viewBox="0 0 250 250" width="100%" height="auto">`
Acercar 2x	`<svg width="250" height="250" viewBox="0 0 125 125">`
Alejar 2x	`<svg width="250" height="250" viewBox="0 0 500 500">`
Desplazar el área visible a la derecha	`<svg width="250" height="250" viewBox="100 0 250 250">`
Conservar toda la imagen visible	`<svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet">`
Llenar el viewport aunque se recorte	`<svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid slice">`

FAQ – Preguntas frecuentes sobre viewBox

¿Qué hace el atributo viewBox?

El atributo viewBox define qué rectángulo de coordenadas del canvas SVG se asigna al viewport. Controla escala, recorte y posición visible sin cambiar las formas reales.

¿En qué se diferencia viewBox de width y height?

width y height definen el tamaño del viewport de salida. viewBox define el área de coordenadas que se ajusta a ese viewport. Cambiar width y height cambia el tamaño de visualización; cambiar viewBox cambia qué espacio de coordenadas se muestra y cómo se escala.

¿Necesito viewBox para SVG responsivo?

Normalmente sí. viewBox da al SVG un sistema interno de coordenadas estable, mientras CSS o el contenedor pueden cambiar el tamaño mostrado. Es el patrón más fiable para gráficos SVG responsivos.

¿Puede viewBox recortar un SVG?

Sí. Cambia min-x, min-y, width y height para que viewBox cubra solo la parte del canvas que quieres mostrar. Todo lo que quede fuera de ese rectángulo de coordenadas se recorta por el viewport.

¿viewBox cambia path data o coordenadas de formas?

No. viewBox cambia cómo se asignan las coordenadas existentes al viewport. No reescribe d, x, y, cx, cy ni otros atributos de geometría.

Especificación y recursos relacionados

La sección de la especificación SVG sobre el atributo viewBox define cómo un rectángulo de coordenadas de usuario se asigna al viewport.
La sección del atributo preserveAspectRatio explica cómo SVG alinea y escala el contenido de viewBox cuando las proporciones difieren.
Empieza por Sistemas de coordenadas y unidades SVG si necesitas el modelo de coordenadas detrás de viewBox.
Usa Transformaciones SVG cuando necesites mover, rotar, escalar, inclinar o reflejar elementos SVG existentes con transform.
Abre Formas SVG para ver cómo las coordenadas definen rectángulos, círculos, elipses, líneas, polilíneas y polígonos antes de que viewBox cambie su escala visual.
Ve a Qué es un archivo SVG para una descripción más amplia de estructura SVG, ventajas y fundamentos del formato.

Sistemas de coordenadas y unidades SVG Formas SVG