Los SVG que salen de Illustrator, Figma o Inkscape arrastran mucha cosa que el navegador no necesita: comentarios del editor, bloques de metadatos, atributos propietarios, identificadores generados y coordenadas con doce decimales.
Esta página les pasa SVGO con la configuración por defecto más unas cuantas opciones que vale la pena poder tocar. En iconos exportados de un editor es habitual recortar entre el 40 y el 70 % del peso sin que cambie ni un píxel del dibujo.
Cómo se usa
- Arrastra los SVG, tantos como quieras.
- Ajusta los decimales de los trazados si necesitas más o menos precisión.
- Procesa y mira cuánto ha bajado cada uno antes de descargar.
Preguntas frecuentes
- ¿Cuántos decimales debo dejar en los trazados?
- Tres va bien para casi todo. Con iconos pequeños puedes bajar a uno o dos y ahorrar todavía más; si el dibujo tiene curvas largas y suaves, bajar demasiado puede hacer aparecer ángulos visibles.
- ¿Por qué está la opción de quitar width y height?
- Porque un icono que debe escalar con CSS va mejor solo con viewBox: sin medidas fijas, ocupa lo que le diga el contenedor. Si en cambio insertas el SVG suelto en una página, déjalas.
- ¿Qué hace el prefijo de los identificadores?
- Añade el nombre del archivo delante. Si pones varios SVG en la misma página y todos tienen un degradado llamado "a", se pisan entre ellos; con el prefijo, cada uno mantiene el suyo.