Sistemas de coordenadas y unidades SVG – viewport y viewBox

Todo el contenido SVG se dibuja dentro de viewports SVG. Cada viewport SVG define una región de dibujo caracterizada por un tamaño (width, height) y un origen, medidos en unidades de usuario abstractas. ( W3C)

El canvas es el espacio infinito donde se colocan los elementos SVG. La parte visible de ese canvas, limitada por la pantalla o por el contenedor, se llama viewport. Entender la relación entre canvas, viewport y viewBox es esencial para crear diseños SVG precisos y escalado responsivo.

Qué explica este artículo

• El canvas es el espacio abstracto de dibujo SVG.
• El viewport es la ventana visible definida por width y height.
• El sistema de coordenadas inicial empieza en (0,0) en la esquina superior izquierda.
• SVG usa unidades de usuario para coordenadas y longitudes.
• El viewBox puede crear otro sistema de coordenadas de usuario para escalar, ampliar y posicionar.

Canvas vs viewport

El canvas es un plano abstracto e ilimitado que puede contener coordenadas positivas y negativas. Todo el contenido SVG se muestra dentro del viewport, que define un área del canvas mediante tamaño y punto de origen. El origen predeterminado es (0,0). El alcance del viewport se establece con los atributos width y height del elemento <svg> exterior.

    <svg width="900" height="500" xmlns="http://www.w3.org/2000/svg">
    </svg>

El código anterior muestra cómo definir width y height del viewport SVG. La imagen se ve a través de una “ventana” de 900×500 píxeles. Este viewport se denomina viewport inicial.

Sistema de coordenadas inicial y de usuario

Veamos cómo SVG representa las posiciones y tamaños de los objetos que se dibujan.

El sistema de coordenadas predeterminado de SVG se parece mucho al de HTML. Funciona como un plano bidimensional x-y. El sistema inicial se establece en el viewport SVG inicial, con el origen (0,0) en la esquina superior izquierda. La dirección positiva de x va hacia la derecha y la dirección positiva de y va hacia abajo. Para especificar coordenadas (x, y), anchuras y alturas, puedes usar cm, mm, in, em, ex, pt, pc y px. Las unidades SVG predeterminadas son píxeles.

Conviene distinguir entre el sistema de coordenadas SVG inicial y el sistema de coordenadas SVG de usuario del viewport. El elemento <svg> exterior puede tener un atributo viewBox. Si este atributo no se especifica, el sistema de coordenadas de usuario coincide con el sistema inicial.

El atributo viewBox establece un sistema de coordenadas de usuario que puede ser diferente del inicial. viewBox toma cuatro parámetros:

• min-x – coordenada X del punto más a la izquierda del viewBox.
• min-y – coordenada Y del punto superior del viewBox.
• width – anchura del rectángulo viewBox.
• height – altura del rectángulo viewBox.

Los valores deben escribirse entre comillas: viewBox="min-x min-y width height".

El viewport es como una ventana a través de la cual miras el contenido de un SVG. El viewBox también se parece a una ventana, pero además permite hacer zoom. Considera este ejemplo:

    <svg width="900" height="500" viewBox="220 125 450 250" xmlns="http://www.w3.org/2000/svg">
    </svg>

Según el fragmento de código, viewBox define una zona concreta del canvas: un rectángulo con origen en (220,125), anchura 450 y altura 250. Después, la imagen SVG se recorta a esa zona y se amplía para llenar todo el viewport.

La figura de la izquierda muestra el canvas infinito del documento SVG, el viewport SVG inicial y el viewBox de usuario. La figura de la derecha ilustra el resultado de aplicar el atributo viewBox.

Como resultado de usar viewBox, una unidad del sistema de coordenadas de usuario pasa a ocupar dos unidades del viewport inicial. Es decir, se produce un escalado. Cambiar los parámetros de viewBox permite escalar, recortar y mover la imagen original a lo largo de los ejes de coordenadas. Además, el sistema de coordenadas SVG puede rotarse, inclinarse y reflejarse.

Cómo leer coordenadas y unidades SVG

1. Empieza por el elemento <svg> exterior y revisa sus atributos width y height.
2. Trata (0,0) como la esquina superior izquierda del viewport inicial.
3. Lee los valores x como movimiento hacia la derecha y los valores y como movimiento hacia abajo.
4. Comprueba si existe viewBox, porque puede reasignar las coordenadas de usuario al viewport.
5. Usa los atributos de coordenadas de cada elemento, como x, y, cx, cy, points o comandos de path, para colocar el contenido.

Errores comunes y soluciones

Problema	Causa	Solución
El contenido SVG aparece recortado	viewBox define un área menor que el contenido dibujado	Aumenta width y height del viewBox o ajusta min-x / min-y
El SVG aparece estirado	La proporción de viewBox no coincide con la del viewport	Mantén dimensiones proporcionales en viewBox o controla el ajuste con preserveAspectRatio
Los objetos aparecen demasiado grandes o pequeños	Se interpreta mal la escala del sistema de coordenadas de usuario	Recalcula las unidades de viewBox en relación con el tamaño del viewport
El contenido se desplaza de forma inesperada	Valores incorrectos de min-x o min-y en viewBox	Ajusta los valores de origen para alinear la zona de contenido deseada
Nada cambia después de modificar viewBox	No hay contenido visible dentro del área definida	Verifica que los elementos dibujados estén dentro de los límites de viewBox

Recetas rápidas

Tarea	Ejemplo SVG
Definir un viewport fijo	<svg width="400" height="200"></svg>
Hacer un SVG escalable	<svg width="400" height="200" viewBox="0 0 400 200"></svg>
Ampliar una zona concreta	<svg width="400" height="200" viewBox="100 50 200 100"></svg>

FAQ – Coordenadas y unidades SVG

¿Cuál es la diferencia entre viewport y viewBox en SVG?

El viewport es el área visible de salida, normalmente definida por width, height, CSS o el contenedor de diseño. viewBox define qué rectángulo de coordenadas se asigna a ese viewport.

¿Por qué el eje y de SVG va hacia abajo?

El sistema de coordenadas SVG inicial empieza en (0,0) en la esquina superior izquierda. Los valores positivos de x se mueven hacia la derecha y los valores positivos de y hacia abajo, como en muchos sistemas de coordenadas de pantalla.

¿Qué son las unidades de usuario en SVG?

Las unidades de usuario son las unidades de coordenadas usadas dentro del dibujo SVG. Sin viewBox, una unidad de usuario suele corresponder a un píxel CSS; con viewBox, las unidades de usuario se escalan para ajustarse al viewport.

¿Por qué cambiar viewBox hace que el contenido SVG se vea más grande o más pequeño?

SVG escala el rectángulo viewBox para llenar el viewport. Un viewBox más pequeño muestra menos unidades de usuario y hace que el contenido parezca más grande; un viewBox más grande muestra más unidades y hace que el contenido parezca más pequeño.

Especificación y recursos relacionados

• El capítulo de la especificación SVG sobre sistemas de coordenadas, transformaciones y unidades define sistemas de coordenadas SVG, viewports, unidades de usuario, transformaciones y unidades de longitud.
• La sección del atributo viewBox explica cómo SVG asigna un rectángulo de coordenadas de usuario a un viewport.
• La sección Units describe unidades de usuario, unidades CSS y reglas de conversión de longitudes.
• Continúa con SVG viewBox para ejemplos prácticos de escalado, recorte, posicionamiento y SVG responsivo.
• Usa Transformaciones SVG cuando necesites mover, rotar, escalar, inclinar o reflejar gráficos SVG existentes con el atributo transform.
• Abre Formas SVG para ver cómo las coordenadas definen rectángulos, círculos, elipses, líneas, polilíneas y polígonos.
• Ve a Datos de path SVG para comandos de path que usan coordenadas, incluidos M, L, H, V, C, Q y A.