Optimizar SVG

Por qué optimizar un SVG

Un SVG es un archivo de texto (XML) que describe formas, no píxeles. Eso lo hace perfecto para logotipos, iconos e ilustraciones: se ve nítido a cualquier tamaño y suele pesar muy poco. Pero los programas de diseño añaden al exportar mucha información que no aporta nada en una web:

• Metadatos del editor: nombre del programa, versión, capas, guías, espacios de nombres propios (sodipodi:, inkscape:, sketch:…).
• Coordenadas con demasiados decimales, como M12.000001 4.9999998, cuando dos bastan.
• Grupos vacíos o redundantes, transformaciones que se pueden aplicar directamente a las formas, estilos repetidos.
• Comentarios, títulos de capa e IDs autogenerados.

Todo eso multiplica el tamaño del archivo. En un icono no parece mucho, pero un sistema de iconos con decenas de SVG en línea, o un logotipo complejo en la cabecera de cada página, suma kilobytes que se descargan en cada visita.

Cómo optimizar tus SVG

1. Suelta uno o varios archivos .svg, o pega directamente el código SVG en la caja de texto (o con Ctrl+V en cualquier parte de la página).
2. ImageZap los optimiza al instante con SVGO y te muestra el tamaño antes y después, el tamaño comprimido con gzip y una vista previa de ambos para comprobar que se ven igual.
3. Ajusta las opciones si lo necesitas: los cambios se aplican a todos los archivos en el momento.
4. Descarga cada SVG, todos en un ZIP, o copia el código o un data URI para usarlo en CSS.

Qué hace SVGO

SVGO (SVG Optimizer) es la herramienta de referencia para optimizar SVG, usada por la mayoría de herramientas de build y frameworks. ImageZap ejecuta su versión para navegador con el preset por defecto, que aplica decenas de transformaciones seguras, entre ellas:

• Eliminar metadatos, comentarios, elementos ocultos y atributos por defecto.
• Redondear coordenadas a la precisión elegida.
• Convertir formas básicas a rutas más cortas y fusionar rutas cuando es posible.
• Simplificar colores (#ffffff → #fff) y mover estilos a atributos.
• Contraer grupos innecesarios y eliminar IDs no usados.

Lo que nunca se elimina es el viewBox: es lo que permite que el SVG escale correctamente, y quitarlo es la causa más común de iconos que se ven cortados tras optimizar.

Opciones

• Varias pasadas: repite la optimización hasta que no hay más mejoras. Suele ahorrar un poco más sin riesgo.
• Decimales en coordenadas: es el ajuste que más influye en el tamaño. Para iconos de 16-48 px, 1 decimal es suficiente; para ilustraciones grandes o detalladas, 2-3. Si ves curvas deformadas, súbelo.
• Quitar width/height: deja solo el viewBox, de modo que el SVG se adapta al tamaño que le des por CSS. Útil para iconos en línea; no lo uses si el SVG debe tener un tamaño fijo al abrirse por sí solo.
• Conservar IDs: actívalo si tu CSS, JavaScript o animaciones hacen referencia a elementos por su id.

SVG en línea, como archivo o como data URI

• Como archivo (<img src="logo.svg">): se cachea y se puede reutilizar. Lo más sencillo para logotipos e ilustraciones. Recuerda incluir width y height en el <img> para evitar saltos de diseño.
• En línea (pegar el <svg> en el HTML): permite cambiar colores con CSS (fill: currentColor) y no añade peticiones. Ideal para iconos de interfaz.
• Como data URI en CSS: útil para fondos, viñetas o pequeños adornos. El botón Copiar data URI genera una versión codificada para URL, más corta que base64.

Si el SVG es también tu favicon, puedes generar todos los formatos con el generador de favicons.

Preguntas frecuentes

¿Cambiará el aspecto de mi SVG?

No debería: SVGO solo aplica transformaciones que conservan el resultado visual. Compara siempre las dos vistas previas; si ves diferencias, sube la precisión de decimales o activa Conservar IDs.

¿Cuánto se puede reducir?

Depende del origen. Los SVG exportados desde Illustrator o Inkscape suelen bajar un 50-80 %; los de Figma, que ya son bastante limpios, un 20-40 %.

¿Es seguro abrir SVG de terceros aquí?

Sí. Las vistas previas se muestran como imágenes, un modo en el que el navegador no ejecuta scripts incrustados. Además, nada sale de tu equipo.

¿Por qué mostrar el tamaño con gzip?

Porque los servidores web comprimen los SVG al enviarlos. El tamaño gzip es una estimación de lo que realmente se descarga.