SVG: qué es, conceptos clave y uso en el desarrollo web

¿Qué es SVG?

SVG es un formato de gráficos vectoriales basado en XML, presentado en 2001 como recomendación del W3C. A diferencia de los formatos raster, SVG describe imágenes mediante primitivas geométricas: puntos, líneas, curvas y polígonos. Un archivo SVG es un documento XML de texto plano que se puede leer, editar y comprimir con herramientas estándar.

La arquitectura SVG incluye varios conceptos clave. viewBox define un sistema de coordenadas virtual independiente de las dimensiones reales del elemento. Por ejemplo, viewBox="0 0 100 100" crea una cuadrícula cuadrada de 100×100, dentro de la cual todas las coordenadas son fijas. Cuando el ancho o alto del contenedor cambia, el contenido se escala proporcionalmente.

Según la W3C SVG 2 Specification, la versión moderna de SVG admite degradados, máscaras, filtros, texto con posicionamiento arbitrario, interactividad mediante JavaScript y animación mediante CSS y SMIL. SVG está integrado en el DOM como un elemento HTML completo, lo que permite el control programático de cada primitiva gráfica.

En el desarrollo móvil, SVG también se usa en iOS mediante UIGraphicsImageRenderer y en Android mediante VectorDrawable: ambos formatos convierten descripciones similares a SVG en rasters acelerados por hardware en la GPU.

Historia y evolución del formato SVG

SVG 1.0 se convirtió en recomendación del W3C en 2001, SVG 1.1 en 2003 y SVG 2.0 ha estado en desarrollo desde 2012. La principal innovación de SVG 2 es una integración más profunda con CSS, soporte para modos de composición y fusión, y la posibilidad de usar SVG en HTML sin prefijos de espacio de nombres.

Aunque SVG 2 aún no ha alcanzado el estado de Recomendación, los navegadores modernos ya admiten la mayor parte de su funcionalidad. Chrome, Safari, Firefox y Edge tienen soporte casi completo para SVG 1.1 y una parte significativa de SVG 2.

Elementos básicos de SVG

SVG proporciona un conjunto de elementos para describir gráficos bidimensionales. Cada elemento tiene atributos que definen su posición, tamaño y apariencia visual. Los atributos se pueden establecer como atributos xml o mediante propiedades CSS.

• <rect> rectángulo con atributos x, y, width, height, rx, ry (redondeo de esquinas).
• <circle> circunferencia con atributos cx, cy (centro) y r (radio).
• <ellipse> elipse con atributos cx, cy, rx, ry.
• <line> segmento de línea con atributos x1, y1, x2, y2.
• <polyline> línea poligonal con atributo points (lista de coordenadas).
• <polygon> polígono cerrado con atributo points.
• <path> trazado arbitrario con atributo d (comandos: M, L, C, Q, A, Z).
• <text> elemento de texto con atributos x, y, font-size, font-family.

El elemento path es el elemento SVG más potente y flexible. El atributo d contiene una secuencia de comandos: M (moveTo), L (lineTo), C (curva cúbica Bezier), Q (curva cuadrática Bezier), A (arco), Z (cerrar trazado). Cada comando tiene una forma absoluta o relativa (letra mayúscula o minúscula).

SVG también admite la agrupación de elementos mediante <g>. El grupo hereda atributos visuales (fill, stroke, transform) a todos los elementos hijos. Esto permite aplicar un estilo único a un conjunto completo de formas y controlar su posición mediante un único transform.

SVG vs gráficos raster: comparación de formatos

La principal diferencia entre SVG y los formatos raster (JPEG, PNG, WebP) es la forma de almacenar la información. El raster almacena el color de cada píxel en una cuadrícula de tamaño fijo. SVG almacena comandos matemáticos para reproducir formas. Esta diferencia determina todas las ventajas y desventajas de los formatos.

Según HTTP Archive, 2025, el 68% de los sitios web usan SVG para iconos, el 34% para ilustraciones y el 22% para logotipos. El tamaño medio de un icono SVG es de 0.5–2 KB, mientras que un icono raster de calidad similar ocupa 5–20 KB en formato PNG.

SVG no es adecuado para fotografías e imágenes raster complejas: el tamaño de la descripción XML superaría al JPEG equivalente. Ámbitos de aplicación recomendados para SVG: iconos, logotipos, ilustraciones, esquemas, gráficos, elementos de interfaz con diseño adaptable.

Cuándo elegir SVG vs un formato raster

SVG es la opción óptima para elementos de interfaz que deben verse nítidos en pantallas Retina y a cualquier nivel de zoom del navegador. El raster es para fotografías, texturas complejas e imágenes con millones de colores donde la descripción vectorial sería excesivamente compleja.

Enfoque híbrido: combinar SVG para elementos de interfaz y WebP/AVIF para contenido fotográfico ofrece el mejor equilibrio entre calidad y rendimiento de carga de página.

SVG inline y estilización con CSS

SVG inline consiste en incrustar el marcado SVG directamente en un documento HTML, en lugar de hacerlo como archivo separado mediante <img> o background-image. La ventaja del SVG inline es que los elementos SVG pasan a formar parte del DOM y se pueden estilizar mediante CSS, controlar con JavaScript y animar sin solicitudes adicionales al servidor.

A diferencia de <img src="icon.svg">, donde SVG está aislado en el shadow DOM, el SVG inline hereda los colores y fuentes del documento padre. Esto permite implementar, por ejemplo, el cambio de color de un icono al pasar el ratón mediante la pseudoclase CSS :hover sin cargar un archivo separado para cada estado.

Según CSS-Tricks, el SVG inline es la forma recomendada de usar iconos en aplicaciones web modernas. Las propiedades CSS fill, stroke, stroke-width se aplican directamente a los elementos SVG. Para la personalización mediante CSS, es importante que el SVG original no tenga fill y stroke definidos como atributos inline; de lo contrario, CSS no podrá sobrescribirlos.

• Ventajas: estilización mediante CSS, control con JS, sin solicitudes HTTP, adaptabilidad del viewBox.
• Desventajas: aumento del tamaño de la página HTML, imposibilidad de almacenar en caché por separado del HTML.
• Alternativa: sprites SVG: combinar varios SVG en un solo archivo y usar <use href="#id">.

Los sprites SVG resuelven el problema de caché: todos los iconos se agrupan en un solo archivo, el navegador lo carga una vez y los iconos individuales se acceden mediante <use> indicando el id del elemento deseado dentro del sprite.

Animación SVG: CSS y SMIL

Animación SVG con CSS es la forma más común y eficiente de animar gráficos vectoriales en el navegador. Propiedades CSS como transform, opacity y fill se aplican a los elementos SVG igual que a los elementos HTML. Para animaciones a lo largo de un trazado arbitrario se usa la propiedad CSS offset-path.

SMIL (Synchronized Multimedia Integration Language) es un mecanismo de animación integrado en SVG, independiente de CSS. Los elementos <animate>, <animateTransform> y <animateMotion> permiten animar cualquier atributo SVG sin JavaScript ni CSS. La animación SMIL está garantizada para sincronizarse con la frecuencia de fotogramas del navegador.

Según MDN Web Docs, SMIL es compatible con todos los navegadores modernos, pero la animación CSS se considera más predecible y eficiente. El caso de uso principal de SMIL es animar atributos inaccesibles mediante CSS, como d (path) del elemento <path>.

JavaScript + requestAnimationFrame ofrece el máximo control sobre la animación SVG. Los desarrolladores web utilizan librerías como GSAP y Anime.js para secuencias de animación complejas con líneas de tiempo y funciones de easing difíciles de implementar con CSS puro.

Ejemplos de código: creación de gráficos SVG

El primer ejemplo es un icono de casa simple usando elementos SVG básicos. Todas las figuras son rect y polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

El segundo ejemplo muestra una animación de rotación de un loader mediante CSS. Usa <circle> con el atributo stroke-dasharray para crear un contorno discontinuo:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

El tercer ejemplo utiliza la librería GSAP para animar un trazado y dibujar un contorno suavemente. GSAP trabaja con el atributo stroke-dashoffset, creando un efecto de aparición de la línea:

// Dibujar ruta con GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});