SVG y el viewBox, explicado de una vez por todas

Todo lo que dibujaste hasta ahora — el corazón, las montañas, las estrellas — fue un truco: cajas disfrazadas de figuras. SVG es lo real: un lenguaje para dibujar líneas, curvas y formas con código, que se ve nítido en cualquier tamaño y se anima con todo lo que ya sabes. Y su concepto más temido, el viewBox, vas a entenderlo hoy para siempre.

Vectores: la diferencia que se ve al hacer zoom

Y como es texto (etiquetas, igual que HTML), un SVG se puede escribir a mano, versionar en git, estilar con CSS, animar y hasta manipular con JavaScript. Es dibujo que es, a la vez, código.

Tu primer SVG

<svg viewBox="0 0 100 100" width="120" height="120">
<circle cx="50" cy="50" r="40" fill="#6d28d9" />
</svg>

Un <svg> es un lienzo; dentro van las formas. Ese <circle> dice "centro en x=50, y=50, radio 40, relleno violeta". Pero espera — ¿50 de qué? ¿Píxeles? No. Y ahí entra el concepto clave.

El viewBox: el marco por el que miras el dibujo

Los cuatro números son min-x min-y ancho alto. Dos consecuencias que lo aclaran todo:

<!-- el mismo dibujo, mostrado a dos tamaños: idéntico y nítido -->
<svg viewBox="0 0 100 100" width="60"  height="60"><circle cx="50" cy="50" r="40"/></svg>
<svg viewBox="0 0 100 100" width="240" height="240"><circle cx="50" cy="50" r="40"/></svg>

<!-- viewBox más grande que el mismo contenido = el dibujo se ve MÁS PEQUEÑO -->
<svg viewBox="0 0 200 200" width="120" height="120"><circle cx="50" cy="50" r="40"/></svg>

Un viewBox grande con formas pequeñas = las formas se ven diminutas (más "cuadrícula" cabe en el mismo espacio, todo se encoge). Cambiar el viewBox es como alejar o acercar la cámara SIN tocar el dibujo. Es la herramienta con la que encuadras, recortas y haces zoom en SVG.

Compruébalo tú mismo

<div class="fila">
<figure>
  <svg viewBox="0 0 100 100" width="120" height="120">
    <rect x="10" y="10" width="80" height="80" rx="12" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/>
    <circle cx="50" cy="50" r="26" fill="#6d28d9"/>
  </svg>
  <figcaption>viewBox 0 0 100 100</figcaption>
</figure>
<figure>
  <svg viewBox="0 0 200 200" width="120" height="120">
    <rect x="10" y="10" width="80" height="80" rx="12" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/>
    <circle cx="50" cy="50" r="26" fill="#6d28d9"/>
  </svg>
  <figcaption>viewBox 0 0 200 200 (misma forma, "cámara" más lejos)</figcaption>
</figure>
</div>
<p class="nota">Mismo dibujo, mismo tamaño en pantalla (120px), mismas coordenadas. Solo cambió el viewBox: el de la derecha muestra más cuadrícula, así que la forma queda arriba-izquierda y pequeña.</p>

body { font-family: system-ui; padding: 20px; background: #f8fafc; }
.fila { display: flex; gap: 40px; flex-wrap: wrap; }
figure { margin: 0; text-align: center; }
svg { background: white; border: 1px solid #e2e8f0; border-radius: 10px; }
figcaption { font-size: 12px; color: #64748b; margin-top: 10px; font-family: monospace; max-width: 150px; }
.nota { font-size: 13px; color: #64748b; margin-top: 16px; max-width: 56ch; }

Tres formas de meter un SVG en tu página

La regla práctica: si quieres tocar sus partes desde afuera, va inline (el CSS solo alcanza el interior de un SVG cuando está inline en el documento — un <img> es una caja opaca). Todo lo animado de este módulo será inline por eso.

Mini-reto

Abre cualquier sitio real, entra a DevTools y busca un SVG inline en el código (los logos e iconos casi siempre lo son). Cámbiale el viewBox en vivo — duplica el tercer y cuarto número — y mira el dibujo encogerse hacia una esquina. Luego cámbiale un fill. Que un logo ajeno obedezca a tu CSS es la prueba de por qué SVG inline es tan poderoso.

Qué sigue

Ya tienes el lienzo y su sistema de coordenadas. Ahora, las herramientas de dibujo: rect, circle, line, polygon — las formas básicas con las que se arma casi todo, y las propiedades fill y stroke que las visten.