Cómo optimizar SVG y reducir el peso de tus iconos

Los SVG son el formato ideal para iconos y logos en la web: escalan sin perder calidad, pesan poco y son código. Pero los que exportas de Figma, Illustrator o Inkscape vienen llenos de código innecesario que puede doblar o triplicar su tamaño. Esta guía explica qué sobra y cómo limpiarlo.

Qué es un SVG y por qué optimizarlo

Un SVG (Scalable Vector Graphics) es una imagen vectorial definida con código XML. En lugar de píxeles, describe formas con coordenadas. Por eso escala infinitamente sin pixelarse y es perfecto para iconos, logos e ilustraciones.

El problema: los editores de diseño exportan SVG con mucha "morralla" que el navegador no necesita. Optimizar significa quitar todo eso sin cambiar cómo se ve la imagen.

Qué hincha el tamaño de un SVG

Metadatos del editor: comentarios, etiquetas <metadata>, atributos xmlns: extra, e información de la versión del programa.
Decimales excesivos: coordenadas como 12.3847562910 cuando con 12.38 se ve idéntico.
Elementos ocultos o vacíos: capas invisibles, grupos sin contenido.
IDs y clases sin usar que el editor genera automáticamente.
Espacios y saltos de línea innecesarios (en producción).
Atributos por defecto que no hacen falta porque ya son el valor predeterminado.

Un icono simple exportado puede pesar 4-5 KB y quedarse en menos de 1 KB tras optimizar, sin ningún cambio visible.

Cómo optimizar un SVG

Pega tu código SVG o sube el archivo.
La herramienta elimina metadatos, redondea decimales y quita el código basura.
Comprueba que se ve igual en la vista previa.
Copia o descarga el SVG optimizado.

Puedes hacerlo gratis con el optimizador de SVG de esta web, que limpia el código en tu navegador.

Beneficios de optimizar tus SVG

Páginas más rápidas: menos bytes que descargar, sobre todo si tienes muchos iconos.
SVG inline más limpio: si incrustas el SVG en el HTML, el código optimizado es mucho más legible y manejable.
Mejor rendimiento: menos nodos que procesar para el navegador.
Menos peso en el repositorio y en los bundles.

Consejo: SVG inline vs archivo

Para iconos que reutilizas mucho, valora incrustar el SVG directamente en el HTML/JSX (inline): evitas una petición HTTP y puedes estilarlo con CSS. Para imágenes grandes o que cambian poco, un archivo .svg cacheado es mejor. En ambos casos, optimízalo antes.

Preguntas frecuentes

¿Optimizar un SVG cambia cómo se ve? No, si se hace bien. Solo se elimina código que no afecta al render. Redondear decimales en exceso podría notarse en gráficos muy precisos, pero los niveles normales son seguros.

¿Puedo optimizar logos complejos? Sí, aunque cuanto más detalle, menos margen de reducción. Los iconos simples son los que más adelgazan.

¿Por qué mi SVG de Figma pesa tanto? Por los metadatos, decimales largos y atributos extra que añade al exportar. Optimizar los quita.

¿Se sube mi SVG al optimizar? No, si usas una herramienta local. Todo ocurre en tu navegador.

Reduce el peso de tus iconos y logos con el optimizador de SVG gratis, 100% en tu navegador.