SVG para la web: Guía completa 2026

SVG (Scalable Vector Graphics) es el único formato de imagen en la web que es a la vez de resolución infinita y basado en texto. Un único logotipo SVG se ve perfecto en una pantalla móvil, un monitor 4K y una valla publicitaria impresa, sin ninguna pérdida de calidad. Entender cuándo y cómo usar SVG es esencial para construir sitios web rápidos, nítidos y modernos.

¿Qué hace diferente a SVG respecto a JPEG, PNG o WebP?

Todos los demás formatos de imagen web habituales son ráster: almacenan datos de píxeles a una resolución fija. Amplíalos más allá de su tamaño original y se desdibujan. SVG es fundamentalmente diferente, es un formato vectorial que almacena descripciones matemáticas de formas, curvas y texto. El navegador dibuja la imagen al tamaño que sea necesario, siempre con perfecta nitidez.

Cuándo usar SVG

• Logotipos y marcas: el caso de uso más importante, un único archivo SVG funciona a todos los tamaños
• Iconos y elementos de interfaz: conjuntos de iconos, iconos de navegación, iconos de botones, SVG es más ligero y nítido que los sprites de iconos PNG
• Diagramas, gráficos, infografías: todo lo que incluye líneas, formas y texto se beneficia enormemente del formato vectorial
• Ilustraciones con color plano o degradado: las ilustraciones de estilo dibujado a mano se exportan limpiamente a SVG
• Gráficos animados: los SVG animados con CSS son alternativas ligeras a GIF o vídeo para movimientos simples

Cuándo NO usar SVG

• Fotografías: SVG no tiene una forma eficiente de representar contenido fotográfico. Una foto incrustada en SVG es simplemente una imagen ráster codificada en base64, usa JPEG/WebP/AVIF en su lugar
• Ilustraciones muy complejas: un SVG muy detallado con miles de trazados puede ser mayor y más lento de renderizar que un WebP equivalente. Compara antes de elegir

Tres formas de incrustar SVG en HTML

1. Como etiqueta <img> (archivo externo)

<img src="logo.svg" alt="Logotipo de la empresa" width="200" height="60">

Simple y cacheable. El SVG no puede ser estilizado con CSS desde la página padre. Adecuado para logotipos e imágenes decorativas.

2. SVG inline (directamente en HTML)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 22h20L12 2z" fill="currentColor"/>
</svg>

El marcado SVG vive en el HTML. Puedes apuntar a sus elementos con CSS y JavaScript, ideal para iconos interactivos o ilustraciones que deben cambiar de color con el modo oscuro.

3. Como fondo CSS

background-image: url('icon.svg');

Útil para fondos decorativos o cuando se usa SVG como máscara CSS. No puede ser estilizado dinámicamente.

Optimizar archivos SVG

Los SVG exportados desde herramientas de diseño (Illustrator, Figma, Inkscape) suelen contener metadatos innecesarios, comentarios y atributos redundantes. Siempre pasa los SVG por un optimizador antes de desplegarlos:

• SVGO: el optimizador SVG de línea de comandos estándar. Puede reducir el tamaño del archivo entre un 40 y un 70 %
• Configuración de exportación de Figma / Sketch: usa la opción de exportación "Optimizado" en tu herramienta de diseño
• Herramientas en línea: svgomg.net ofrece una interfaz visual para SVGO

Accesibilidad de SVG

Los SVG utilizados como imágenes necesitan un marcado de accesibilidad adecuado:

<!-- Para SVG decorativos -->
<img src="decoration.svg" alt="" role="presentation">

<!-- Para SVG informativos -->
<img src="chart.svg" alt="Gráfico de barras que muestra un aumento de ventas del 40% en el Q4">

<!-- Para SVG inline -->
<svg role="img" aria-labelledby="title">
  <title id="title">Logotipo de la empresa</title>
  ...
</svg>