Cómo preparar y optimizar archivos SVG para la web

Optimizar un SVG tiene dos ejes que se confunden a menudo. Uno es el archivo que se escribe; el otro es cómo viaja por la red. Solo el primero depende del contenido, y por eso conviene saber cuál de los dos está causando el problema antes de tocar nada.

Preparar y optimizar archivos SVG para la web es, en la práctica, una tarea de recorte: quitar lo que no dibuja, reducir la precisión que no se nota y comprimir el transporte. Nada de eso cambia el aspecto si se hace con criterio.

Dos ejes de peso que se confunden

El peso de autoría es lo que ocupa el archivo en disco. El peso de transporte es lo que ocupa durante la descarga. Un SVG puede ser grande y viajar pequeño si el servidor aplica compresión, y también puede ser pequeño y viajar tal cual.

La compresión en tránsito no cambia el renderizado. gzip está descrito en el RFC 1952 y Brotli en el RFC 7932, y los dos se limitan a codificar los mismos bytes de forma más corta. El navegador los descomprime y dibuja exactamente lo mismo.

Eso significa que hay dos intervenciones distintas. Reducir el contenido del archivo mejora las dos cosas. Activar la compresión en el servidor solo mejora la segunda.

Qué pesa de verdad dentro del archivo

El tamaño lo dominan casi siempre la precisión de los trazados y los mapas de bits incrustados. Los metadatos y los restos de edición aportan poco, aunque también suman.

Decimales y precisión

Un número como 12.3456 ocupa siete caracteres; 12.3 ocupa cuatro. La diferencia son tres bytes por coordenada, y en un dibujo con dos mil coordenadas se acumulan unos seis kilobytes. No es una cifra dramática, pero es gratis.

El límite es la geometría. Si se recortan decimales hasta un valor que el ojo distingue, la forma cambia ligeramente y aparecen esquinas donde había curvas. La precisión adecuada suele ser la que sobrevive a la escala real de uso, no la que se heredó del programa de origen.

Mapas de bits incrustados

Una sola imagen dentro de un SVG puede pesar más que todos los trazados juntos. Cuando eso ocurre, recortar decimales es una pérdida de tiempo: el problema está en la imagen.

La solución depende del destino. Si la imagen es decorativa y pequeña, puede reducirse y volver a incrustar. Si es una fotografía, quizá el SVG no era el formato adecuado para ese contenido.

Metadatos y restos de edición

Los archivos exportados suelen arrastrar nombres de capas, comentarios y definiciones que ya nadie usa. No hay que contar con que la herramienta los elimine por su cuenta: el editor exporta lo que hay, y no promete minimizar ni informar de un ahorro. Si el objetivo es un archivo limpio, la revisión es manual.

Antes de publicar

Hay dos comprobaciones que no se pueden saltar. La primera es abrir el SVG exportado en un navegador y mirarlo al tamaño real y al doble. El proyecto de origen describe esta versión del editor como alfa, así que conviene revisar cada exportación antes de subirla.

La segunda es de seguridad. Un SVG es un documento XML que puede contener scripts y referencias externas. Un archivo de origen desconocido no debería incrustarse directamente en una página: hay que sanearlo o servirlo como imagen, nunca pegado en el HTML sin más.

Un flujo de entrega razonable

El orden que funciona es este. Dibuja con la precisión que necesites, sin preocuparte por el peso. Al terminar, reduce decimales hasta el límite visible. Revisa si hay mapas de bits y decide si van o no. Exporta. Abre el resultado y compáralo con el original. Y solo entonces activa la compresión en el servidor.

Queda una decisión de arquitectura que ahorra más que cualquier recorte: un solo SVG puede sustituir a tres PNG de tres tamaños. Eso reduce peticiones, no bytes, y en una página con muchos iconos suele notarse más.

Probar el flujo con el editor

El Editor vectorial abre el SVG, permite limpiar la geometría que no aporta y exporta el archivo final como descarga del navegador. Trabajar sobre una copia evita sustos con el original.

Para entender antes cómo está construido el archivo, la guía sobre cómo editar archivos SVG online en tu navegador cubre la primera sesión. Si lo que hay que ajustar es el tamaño de uso, la guía para redimensionar un SVG sin perder calidad explica el viewBox y la escala. Hay más material en la biblioteca de guías.