Que es el viewBox en SVG y como funciona
Concepto clave
El viewBox es uno de los atributos mas importantes de un SVG. Define el sistema de coordenadas interno: que parte del dibujo se ve y como se escala.
Sintaxis
viewBox="min-x min-y ancho alto"
Ejemplo: viewBox="0 0 100 100" crea un lienzo interno de 100x100 unidades, con origen en la esquina superior izquierda.
viewBox vs width/height
- viewBox: define las unidades internas del dibujo.
- width/height: definen el tamaño REAL en pantalla.
Si pones viewBox="0 0 100 100" y width="300", el dibujo de 100 unidades se estira a 300 px: escala 3x, sin perder nitidez (es vectorial).
Por que importa para escalar
Con viewBox y sin width/height fijos, el SVG se adapta al contenedor manteniendo proporciones. Por eso es la base de un SVG responsive.
preserveAspectRatio
Controla como se ajusta el dibujo si el contenedor tiene otra proporcion:
xMidYMid meet(por defecto): cabe completo y centrado.slice: llena el area recortando lo que sobra.none: estira sin respetar proporcion (deforma).
Recortar o reencuadrar
Cambiar el viewBox reencuadra: viewBox="20 20 60 60" muestra solo esa zona, como un zoom/recorte, sin tocar las formas.
En el editor
En svgdesk, al crear un lienzo se define el viewBox segun el tamaño elegido, y lo ves en el panel de codigo para ajustarlo.