Exportas un icono de 24x24 desde Figma. Tamano del archivo: 3.2 KB. Lo metes en el Optimizador SVG de Piick y lo corres. Salida: 480 bytes. Eso es una reduccion del 85%. Por que? Figma exporta SVG con bloques de metadatos, comentarios, atributos con valores por defecto, y precision de paths de 12 decimales por defecto. Los navegadores no necesitan nada de eso.

Este articulo lista 8 patrones comunes de bloat, con una solucion copiable para cada uno.

Resumen en 30 segundos

  • Las exportaciones de Figma, Illustrator y Sketch contienen 60-80% de redundancia: metadatos mas comentarios mas atributos por defecto mas precision de paths
  • 8 errores comunes: metadatos / comentarios / atributos por defecto / precision de paths / verbosidad de colores / IDs duplicados / layers ocultos / prefijos de namespace del editor
  • La optimizacion SVG en el navegador reduce 50-85% sin perdida visible de calidad
  • Prueba primero el Optimizador SVG de Piick: pega SVG, elige reglas, obtienes resultados en menos de un minuto
  • Para optimizacion profunda, integra SVGO CLI en tu pipeline de build (Vite, webpack, Next.js)

Los 8 errores comunes

Error 1: bloque de metadatos de Figma

El sintoma: las exportaciones contienen un bloque de metadatos lleno de ID de aplicacion, IDs de componentes, IDs de nodos y numeros de version de Figma, desde decenas hasta cientos de bytes. El bloque no tiene efecto en el renderizado del navegador.

Cada exportacion de Figma lo contiene. Overhead puro de metadatos.

Solucion:

  • Activa la regla de metadatos en las herramientas del navegador para eliminar el bloque en un click
  • Figma Exportar SVG: desmarcar Incluir metadatos
  • En linea de comandos: usa sed con coincidencia de rango para borrar el bloque entero

Recuperacion: tipicamente 5-30% de compresion. Cada bloque de metadatos de Figma ocupa 200-800 bytes; las ilustraciones heroicas complejas suelen llevar largas descripciones de IDs.

Error 2: Comentarios XML

El sintoma: Illustrator exporta SVGs llenos de comentarios XML con Generator, Application y metadatos de version. Figma a veces incluye descripciones de Grupo. Inkscape emite marcadores Created with. Los comentarios no aportan nada al renderizado pero consumen 30-100 bytes cada uno.

Solucion: activa la regla de comentarios en las herramientas. Una expresion regular maneja el resto.

Recuperacion: 10-50 bytes por archivo. Los SVGs detallados de Illustrator suelen tener un comentario por capa; suman varios cientos de bytes.

Error 3: Atributos por defecto

El sintoma: la especificacion SVG define valores por defecto para varios atributos, pero las herramientas de diseno los escriben explicitamente. Redundancia pura.

Los cinco valores por defecto mas comunes que se pueden eliminar:

  • fill-opacity igual a 1
  • stroke-linecap igual a butt (por defecto)
  • stroke-linejoin igual a miter (por defecto)
  • opacity igual a 1
  • xml:space igual a preserve (solo cuando el texto lo necesita)

Solucion: activa la regla de valores por defecto. Cada atributo cuesta 15-30 bytes; cada SVG carga 5-15 atributos por defecto.

Recuperacion: 200-800 bytes por archivo, segun la complejidad de los atributos.

Error 4: Precision excesiva del path

El sintoma: Illustrator exporta con 6 decimales por defecto (precision sub-micrometrica). Un pixel estandar de pantalla es 0.26 mm al 100% de DPI; 6 decimales representan 0.000001 mm, muy por debajo de lo que cualquier pantalla puede mostrar.

Solucion:

  • Ajusta la precision del path a 2 en la herramienta (el valor por defecto)
  • Illustrator Exportar SVG: establece Number Precision a 2
  • Figma no expone precision pero el post-procesado funciona

Recuperacion: el item de mayor impacto, tipicamente 30-60% de compresion. Una ilustracion heroica compleja puede pasar de 40 KB a 18 KB solo cambiando los decimales.

Error 5: Notacion verbosa de colores

El sintoma: los colores vienen en tres formas comunmente redundantes. Sintaxis de funcion RGB con tres decimales separados por comas. Notacion hexadecimal de seis caracteres. Colores nombrados como palabras clave CSS.

Solucion: activa la regla de colores y las herramientas convierten todo a hex en una sola pasada.

  • rgb a hex corto (3 caracteres, no 7)
  • hex largo a hex corto (3 caracteres, no 6)
  • colores nombrados a hex corto

Recuperacion: 5-10 bytes por color. 50 colores son 250-500 bytes ahorrados.

Error 6: IDs duplicados

El sintoma: cada capa auto-genera un ID como Frame 123; un SVG complejo tiene docenas de IDs, referenciados cero veces. Los navegadores los conservan todos sin aportar nada.

Solucion: activa la regla de IDs no usados, preservando solo los IDs referenciados por CSS o scripts.

Recuperacion: 100-500 bytes, segun el numero de capas.

Error 7: Layers ocultos y bloqueados

El sintoma: Illustrator y Sketch a veces exportan layers ocultos sin eliminar; Figma exporta frames ocultos. Los diseniadores olvidan limpiar antes de exportar. Cero pixeles renderizados, bytes puros.

Solucion:

  • Limpieza previa a la exportacion, habito del lado del diseniador
  • Para archivos ya exportados, las herramientas pueden eliminar elementos con display igual a none y visibility igual a hidden

Recuperacion: desde cientos de bytes hasta varios KB segun el numero de capas. Los logos detallados de Illustrator suelen tener una docena de layers ocultos, acumulando 1-2 KB de desperdicio puro.

Error 8: Prefijos de namespace del editor

El sintoma: Illustrator exporta con atributos de namespace sodipodi e inkscape. Inkscape exporta con sodipodi. Sketch lleva el prefijo sketch. Cada editor vuelca su namespace interno. Figma es mas limpio pero aun tiene xmlns:xlink.

Solucion: activa la regla de namespace para eliminar en una sola pasada.

Recuperacion: 50-200 bytes. 50 atributos de namespace se acumulan rapidamente.

Seleccion de herramienta

Tres caminos principales para optimizar SVG:

Optimizacion SVG en el navegador

  • Ventajas: cero instalacion, cero subida, privacidad segura (bueno para activos de marca e ilustraciones internas)
  • Desventajas: no tan potente como SVGO CLI (cobertura 70-80% vs 100% de SVGO)
  • Mejor para: exportaciones de diseno con compresion en un click, archivos puntuales, flujos sin npm

SVGO CLI

  • Ventajas: 100+ plugins, integracion con build pipeline (Vite, plugin de webpack), automatizacion
  • Desventajas: requiere Node.js mas archivo de configuracion mas instalacion local
  • Mejor para: builds de produccion, proyectos con muchos SVG, pipelines de largo plazo
  • Instalacion: aniade svgo como dependencia de desarrollo, configura, corre svgo contra tu carpeta de SVG

Regex y sed hechos a mano (puntuales)

  • Ventajas: cero dependencias, corre en cualquier lugar
  • Desventajas: casos limite peores que las herramientas, rompe con formatos extranos
  • Mejor para: emergencias (CI roto, sed al rescate)

A traves del toolchain: herramienta del navegador primero, ve la compresion, SVGO CLI segundo para CI. Ese es el flujo recomendado por piick.

5 escenarios comunes

Escenario 1: Borrar viewBox por error

Caso real: alguien escribio una herramienta que trataba viewBox como atributo por defecto y lo elimino. El SVG fallo al renderizarse a cualquier tamano razonable. viewBox define el sistema de coordenadas del SVG; los navegadores no pueden escalar sin el. Las herramientas deben tenerlo en whitelist. La herramienta de Piick mantiene viewBox por defecto.

Escenario 2: Eliminar currentColor

Caso real: el theming CSS depende de fill igual a currentColor. La herramienta lo convirtio a un color hex y elimino el valor especial; el modo oscuro se rompio. Las herramientas no deben tocar currentColor ni valores semanticos similares. Verifica que tu SVG optimizado aun contiene currentColor y que no se elimino ningun bloque de estilo.

Escenario 3: Precision del path demasiado agresiva

Caso real: precision establecida a 0, los paths se ven pixelados al hacer zoom. Con 2 decimales basta; solo considera 3 para SVGs muy grandes.

Escenario 4: IDs de animacion CSS eliminados

Caso real: eliminaste id igual a circle-spin, la animacion CSS que lo referenciaba se rompio. Los IDs referenciados por CSS deben preservarse. Las herramientas deberian ofrecer una opcion para mantener IDs referenciados por CSS.

Escenario 5: Atributos vacios rompen logos responsivos

Caso real: width igual a auto se trato como un atributo vacio y se elimino, el tamano responsivo se rompio. Antes de eliminar, confirma que el atributo no sea auto, inherit, currentColor u otra palabra clave semantica.

Practicas recomendadas

  • Usa herramientas del navegador primero, aniade SVGO CLI al build como una segunda capa de compresion
  • Prueba cada regla en activos de produccion antes de desplegar, especialmente la precision del path y la conversion de colores a hex
  • Para activos sensibles (logos de marca, ilustraciones internas), las herramientas del navegador mantienen los datos locales con cero subida
  • En exportaciones de Figma, Illustrator y Sketch, desactiva las opciones redundantes en el origen (Incluir metadatos y similares) para que el archivo salga ya limpio

Quieres probarlo ahora? Pega cualquier exportacion de Figma, Illustrator o Sketch en el Optimizador SVG de Piick, marca las 8 reglas, comprime con un click, ve la tasa de compresion y el resultado en menos de un minuto. Si ademas quieres extraer la paleta de colores del logo, sube el mismo SVG al Extractor de Paleta de Colores de Piick. Un archivo, dos tareas.