De Figma a SVG limpio: optimización con SVGO

Cuando exportas un icono de Figma o Illustrator, el archivo que sale está lleno de basura: IDs aleatorios, metadatos del programa, decimales absurdos, grupos vacíos. Un icono de 400 bytes llega a pesar 4 KB de relleno. Esta lección es la higiene que separa al que "pega el SVG que salió" del que entrega SVG de producción — liviano, legible y estilable.

El export crudo: un buen dibujo con mala ropa

Así llega un icono de estrella exportado, y así debería quedar:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
   xmlns="http://www.w3.org/2000/svg">
<g id="Frame 42" clip-path="url(#clip0_1_23)">
  <path d="M12.0001 2.00003L15.0901 8.26003L22.0001 9.27003..."
        fill="#1E1E1E" stroke-width="0.999998"/>
</g>
<defs><clipPath id="clip0_1_23"><rect width="24" height="24"/></clipPath></defs>
</svg>

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2l3.09 6.26L22 9.27..." fill="currentColor"/>
</svg>

Lo que se fue y por qué: el <g id="Frame 42"> era un grupo vacío de Figma; el clip-path recortaba a un rectángulo del tamaño del propio SVG (inútil); los decimales 12.0001 y 0.999998 son ruido de coma flotante; y el width/height fijos estorban si vas a dimensionar por CSS. El dibujo es idéntico — pesa un tercio y ahora se lee.

SVGO: el limpiador automático

No limpias esto a mano. SVGO (SVG Optimizer) es la herramienta estándar. Tres formas de usarlo:

• Web, sin instalar nada: svgomg.net — pegas o subes el SVG, mueves interruptores y ves el resultado y el peso en vivo. Perfecto para empezar y para un icono suelto.
• CLI / build: svgo archivo.svg (vía npx) o integrado en tu pipeline; imprescindible cuando manejas decenas de iconos.
• En el editor: plugins que optimizan al exportar.

Nota honesta sobre instalar: SVGO no es una dependencia de este proyecto y no la vamos a agregar solo para esto — para aprender, svgomg.net hace exactamente lo mismo en el navegador. Guárdate el CLI para cuando un proyecto real tenga una carpeta de iconos que optimizar.

El ajuste que más importa: preparar para CSS

La optimización de peso está bien, pero el ajuste que te cambia la vida es uno de criterio, no automático: cómo queda el color.

<!-- ✗ color incrustado: el icono es SIEMPRE negro, el CSS no lo alcanza bien -->
<svg viewBox="0 0 24 24">
<path d="..." fill="#1E1E1E"/>
</svg>

<!-- ✓ fill="currentColor": el icono HEREDA el color del texto de su contenedor -->
<svg viewBox="0 0 24 24">
<path d="..." fill="currentColor"/>
</svg>

Con fill="currentColor", un .boton:hover { color: #6d28d9; } recolorea el icono gratis, porque el icono toma el color heredado. Es el secreto detrás de por qué los iconos de una librería bien hecha "simplemente combinan" con el texto que los rodea. En SVGOMG hay una opción para quitar los fill incrustados; el currentColor lo pones tú, y vale más que todas las de peso juntas.

Cuidado al limpiar (la nota honesta del optimizado agresivo): SVGO puede "colapsar" grupos o eliminar IDs — genial para peso, pero si pensabas animar UNA parte del SVG por su id o su clase (la manecilla de un reloj, un pétalo), esa limpieza te borra el asa por donde ibas a agarrarlo. Regla: optimiza AL FINAL, cuando ya sabes qué partes vas a animar, y protégelas.

Mini-reto

Exporta cualquier icono desde Figma (o descarga uno de un set que traiga el SVG crudo), ábrelo en un editor de texto para ver la basura real, y pásalo por svgomg.net mirando el contador de peso. Meta doble: bajarlo al menos a la mitad, y dejar su relleno en currentColor. Luego pégalo inline en una página, ponle color: crimson al contenedor y confirma que el icono obedece.

Qué sigue

Tienes SVG limpios y estilables. Empieza la parte que hace que la gente diga "¿cómo hicieron eso?": la animación. Y arrancamos por el efecto insignia — logos y trazos que se DIBUJAN SOLOS en pantalla, con solo dos propiedades del contorno.