Tu SVG Es 10 Veces Más Grande de lo Que Necesita Ser

Exporta un ícono desde Illustrator. Verifica el tamaño de archivo. Ábrelo en un editor de texto.

Encontrarás: metadatos que nadie necesita, puntos decimales a 15 lugares, grupos vacíos, basura específica del editor y comentarios de 2019. Un logo simple pesa 50KB cuando podría ser 3KB.

SVG es solo XML. Cada carácter innecesario son bytes que tus usuarios descargan.

Qué Agregan las Herramientas de Diseño

Illustrator, Figma, Sketch: todos incrustan datos extra:

<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100"
     style="enable-background:new 0 0 100 100;" xml:space="preserve">

Nada de eso es necesario para renderizar. Son metadatos para que la herramienta de diseño reabra el archivo apropiadamente.

El Problema de Precisión

Las herramientas de diseño usan coordenadas de alta precisión:

<path d="M12.374892749237,45.293847293847 L67.293847293847,89.374892749237"/>

Los navegadores redondean a aproximadamente 1-2 lugares decimales de todos modos. Todos esos dígitos son bytes desperdiciados.

Mejor:

<path d="M12.37,45.29 L67.29,89.37"/>

Mismo resultado visual, fracción del tamaño.

Grupos e IDs Vacíos

La exportación a menudo crea estructuras como:

<g id="Layer_1">
  <g id="icon">
    <g>
      <path d="..."/>
    </g>
  </g>
</g>

Tres grupos anidados para contener un path. Cada grupo agrega bytes. Elimínalos a menos que estén haciendo algo (como aplicar transformaciones o estilos).

Los IDs son similares. id="XMLID_847_" en cada elemento se suma. Mantén IDs que referencias en CSS o JavaScript. Elimina el resto.

Qué Optimizar

Eliminar metadatos. Comentarios, información del editor, namespaces que no usas.

Reducir precisión. 2-3 lugares decimales usualmente son suficientes.

Aplanar grupos. El anidamiento innecesario no sirve ningún propósito.

Limpiar IDs. Mantén los referenciados, elimina basura auto-generada.

Combinar paths. Múltiples paths que podrían ser un path deberían combinarse.

Eliminar elementos ocultos. Capas que ocultaste en la herramienta de diseño pero no eliminaste.

Cuándo Mantener Tamaño de Archivo

A veces más grande es correcto:

Animaciones. IDs y grupos a menudo sirven como objetivos de animación. No los elimines ciegamente.

Estilizado CSS. Si estás estilizando SVG con CSS externo, necesitas esos IDs y clases.

Edición futura. SVG ultra-optimizado es difícil de editar. Mantén el archivo fuente, optimiza la versión de producción.

Comparación

Ícono simple, antes de optimización:

Original: 24KB
Después de eliminar metadatos: 8KB
Después de reducir precisión: 4KB
Después de limpiar estructura: 2KB

Eso es 12 veces más pequeño. Carga más rápido. Analiza más rápido. Cada carga de página, cada usuario.

Inline vs Externo

SVGs pequeños (menos de 1KB optimizados) a menudo funcionan mejor incrustados directamente en HTML. Sin solicitud HTTP extra.

SVGs más grandes o íconos reutilizados funcionan mejor como archivos externos que pueden almacenarse en caché.

El punto de equilibrio depende de tu situación. Generalmente: si estás usando un SVG una vez y es diminuto, incrústalo. Si lo estás usando repetidamente o es complejo, archivo externo.

---

La optimización SVG es rendimiento gratuito. Pasa tus íconos por un optimizador antes de enviar. Toma segundos, ahorra bytes en cada carga de página, para siempre.