Optimización SVG — Guía completa para rendimiento web

SVG es el formato más incomprendido de la web. Bien hecho, un logo de 10 KB se convierte en 2 KB, escala a cualquier resolución y se ve nítido en cualquier pantalla. Mal hecho, ese mismo logo ocupa 50 KB de metadatos del editor, definiciones sin usar y estilos inline que nadie pidió. La distancia entre “SVG malo” y “SVG bueno” es mayor que entre “JPG” y “WebP”.

Esta guía cubre qué infla de verdad los SVG, cómo arreglarlo y cuándo SVG no es la respuesta.

Por qué los SVG recién exportados son enormes

Abre en un editor de texto cualquier SVG exportado directamente desde Illustrator, Figma, Sketch o Inkscape. Verás algo así al principio:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FF6B35;}
    .st1{fill:none;stroke:#1A1A1A;stroke-width:2;stroke-miterlimit:10;}
</style>

Todo lo que hay por encima del primer <path> normalmente se puede reemplazar por una sola línea. El id, el comentario del editor, el estilo enable-background, el xml:space, los nombres de clase específicos del generador — todo es peso muerto. Un export típico de editor tiene un 40-60% de overhead. Los datos de forma reales son la minoría.

Encima, los editores suelen:

• Emitir capas ocultas y marcos de slice que nunca se renderizan.
• Empotrar fallbacks rasterizados en base64 dentro del SVG.
• Dejar paths con 6+ decimales de precisión.
• Generar formas solapadas y redundantes que deberían haberse combinado con operaciones booleanas.
• Incluir <defs> y <clipPath> que se usaron durante el diseño pero no están referenciados en el resultado final.

Qué hace SVGO en realidad

SVGO es el optimizador estándar, y casi todo lo que quieres quitar de un export de editor se arregla con un solo comando. Un pase por defecto de SVGO suele:

• Quitar comentarios XML y declaraciones doctype.
• Eliminar namespaces y metadatos específicos del editor.
• Colapsar grupos inútiles (<g> sin atributos).
• Redondear precisión numérica a 3 decimales (más que suficiente para pantalla).
• Fusionar paths y estilos idénticos.
• Convertir estilos inline a atributos donde sea más corto.
• Quitar <defs> sin uso.
• Minificar datos de path (M10,10L20,20 se convierte en M10 10l10 10).

Un logo de 60 KB suele caer a 6-8 KB tras SVGO. Ejecuta SVGO en cada SVG antes de publicar. No tiene coste visible de calidad ni coste en runtime.

La regla del viewBox

El error más común en SVG es width y height hardcodeados sin viewBox. Un SVG bien formado se ve así:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="..."/>
</svg>

No así:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <path d="..."/>
</svg>

¿Por qué? viewBox hace que el SVG sea escalable — el CSS puede dimensionarlo al contenedor. Width/height fijos lo atan a un tamaño concreto y anulan la razón principal de usar SVG. Si quieres un tamaño por defecto, usa CSS (.icon { width: 24px; }) y mantén el viewBox intacto.

Precisión y complejidad de paths

Una coordenada como M127.34561283 94.18273645 tiene 8 decimales. A resolución de pantalla, cualquier cosa más allá de 2 decimales es invisible. El valor por defecto de SVGO de 3 decimales es un suelo seguro. Bajar a 1 decimal rompe calidad visible en curvas pequeñas pero puede recortar un 30% para SVGs con muchos paths (ilustraciones complejas, mapas a mano).

La simplificación de paths va más allá del redondeo. Si trazaste un logo desde un raster, el trazador probablemente emitió 400 nodos en una curva que un humano dibujaría con 12. Haz un pase de simplificación — la mayoría de editores la tienen bajo “Simplificar path” o equivalente — y acepta una pérdida pequeña de calidad a cambio de una gran reducción de tamaño.

SVG vs PNG vs WebP, por caso de uso

SVG no es universalmente mejor. Una matriz de decisión aproximada:

Contenido	Mejor formato	Por qué
Logo, icono, UI plana	SVG	Escala, pequeño, nítido a cualquier DPI
Ilustración compleja con muchos gradientes	SVG o PNG	SVG si <50 KB, PNG si mayor
Imagen fotográfica	WebP/AVIF	SVG no comprime bien fotos
Gráfica con texto	SVG	El texto sigue seleccionable y nítido
Miniatura a un solo tamaño	PNG o WebP	El overhead de SVG no compensa
Animación	SVG (SMIL/CSS) o vídeo	Depende de la complejidad

Una trampa común: vectorizar una fotografía. Las herramientas de Imagen a SVG pueden hacerlo, pero el resultado suele pesar 10× más que un raster bien comprimido y no se ve tan bien. SVG es para gráficos, no para fotos. Si tienes una foto y quieres que escale, envía un WebP de alta resolución, no un SVG trazado.

Hay un caso estrecho donde la vectorización de foto tiene sentido: convertir un PNG a SVG o un WebP a SVG para un póster, pegatina o serigrafía estilizada donde el aspecto plano por bloques sea el objetivo de diseño. Para eso, SVG gana.

SVG inline vs archivo externo

Dos maneras de servir un SVG:

1. Archivo externo referenciado con <img>: se cachea por separado, se puede lazy-load, no se puede estilar con CSS desde la página padre.
2. Inline en el HTML: se estila libremente con CSS, sin petición HTTP extra, pero el markup viaja en cada carga y no se puede cachear.

Regla: iconos que aparecen en cada página (logo del sitio, iconos UI) inline; imágenes decorativas puntuales externas. Para un set de iconos reutilizados, usa un sprite SVG — un único archivo externo con bloques <symbol> referenciados por <use>. Eso te da cacheabilidad más estilado.

Accesibilidad y SEO

Un SVG sin <title> es invisible para lectores de pantalla. Añade uno dentro del SVG:

<svg viewBox="0 0 24 24" role="img" aria-labelledby="title-menu">
  <title id="title-menu">Menú</title>
  <path d="..."/>
</svg>

Para SVGs decorativos, usa aria-hidden="true" en su lugar. No dejes a la tecnología asistiva adivinar qué es el gráfico.

Un pipeline de optimización realista

Para un sitio con mucho SVG:

1. Exporta desde tu herramienta de diseño con “Minificar” u “Optimizado” si está disponible.
2. Ejecuta SVGO con configuración que preserve viewBox e IDs referenciados por JS.
3. Quita o integra bloques <style> según el método de renderizado.
4. Construye un sprite si tienes más de ~10 iconos reutilizados.
5. Gzip o Brotli a nivel de servidor — SVG es texto, así que comprime otro 60-80% en el cable.

Objetivos de tamaño:

• Icono UI: <1 KB optimizado, <300 bytes con gzip.
• Logo: <3 KB optimizado, <1 KB con gzip.
• Ilustración: <20 KB optimizado, <5 KB con gzip.

Si estás por encima tras SVGO, la imagen seguramente sea demasiado compleja para SVG — exporta como PNG o WebP y sigue. SVG es una herramienta de precisión, no un formato universal.