Comprimir SVG - y ver adónde fue cada byte
La mayoría de los optimizadores de SVG te dan un solo número: un 42 % más pequeño. Ese número esconde justo lo que necesitas saber, que es cuántos de esos puntos vinieron de borrar una indentación que nadie echará de menos y cuántos de redondear coordenadas o de eliminar la etiqueta accesible. Esta herramienta informa de una cifra en bytes para cada paso, sobre tu archivo, y te deja apagar cualquiera de ellos. Se ejecuta íntegramente en un Web Worker en tu propio dispositivo, la única de nuestro conjunto de SVG que puede hacerlo, porque optimizar es trabajo de texto puro sin renderizado de por medio. No se sube nada, y el saneado se ejecuta primero en cada archivo lo pidas o no, porque esta herramienta te devuelve código fuente y ese código va a acabar pegado en una página.
Cómo usar esta herramienta
Suelta tus archivos SVG
Arrastra uno o varios SVG a la caja de arriba, hasta 5 MB cada uno. Cada archivo se comprueba por su contenido y se rechaza con un motivo concreto si no es realmente un SVG o si lleva una carga de expansión de entidades.
Elige qué pasos se ejecutan
Doce interruptores, todos activados por defecto salvo uno. Eliminar el elemento <title> está desactivado a propósito, porque es lo que un lector de pantalla anuncia para tu gráfico: si lo activas, el panel te avisa ahí mismo en lugar de canjear en silencio cuarenta bytes por la etiqueta.
Ajusta la precisión de las coordenadas
El deslizador controla cuántos decimales sobreviven en los datos de trazado, con tres por defecto. En las exportaciones de editor este suele ser el mayor ahorro, porque Illustrator escribe coordenadas con ocho decimales que describen posiciones más finas de lo que una impresora puede resolver.
Optimiza y compara
Cada archivo muestra el original y la versión optimizada uno al lado del otro. Si esas dos miniaturas llegan a diferir, un paso ha roto algo: esa comprobación visual está ahí precisamente para que nunca tengas que fiarte del resultado a ciegas.
Copia o descarga
Copia el código optimizado directamente al portapapeles para pegarlo en línea, o descárgalo como archivo. Con varios archivos convertidos, llévate el lote en un único ZIP.
Preguntas frecuentes
¿Cuánto se va a reducir mi archivo realmente?
Depende muchísimo más de dónde salió el archivo que del dibujo. Medimos cuatro: una exportación al estilo de Illustrator pasó de 1.091 a 401 bytes, un 63 % menos. Una al estilo de Figma pasó de 730 a 525, un 28 %. El icono de descarga de Lucide logró un 4 %, y el logotipo de nuestro propio sitio apenas un 2 %.
¿Por qué el icono apenas se redujo?
Porque ya estaba optimizado antes de llegarnos. El archivo de Lucide son 291 bytes de geometría pura sin comentarios, sin metadatos, sin atributos de editor y con coordenadas cortas: sencillamente no hay nada que un optimizador pueda quitar sin cambiar el dibujo. Un buen conjunto de iconos entrega archivos que ya están en el suelo.
¿Qué paso ahorra más?
En la exportación de Illustrator: quitar el bloque de metadatos ahorró 216 bytes, redondear coordenadas 131, los comentarios 94, los atributos por defecto 61, las definiciones sin usar 51, la declaración XML 38 y convertir atributos style 29. En la exportación de Figma el panorama fue completamente distinto: 141 de sus 205 bytes ahorrados vinieron solo de definiciones sin usar.
¿Por qué Figma deja tanto material sin usar en el archivo?
Exporta la estructura de capas que usa internamente. Los nombres de marco y de capa se convierten en atributos id a los que no apunta nada, y los trazados de recorte y degradados definidos para la mesa de trabajo suelen sobrevivir en un archivo que nunca los referencia. Esos id son peso muerto, y quitarlos es la mayor ganancia individual en una exportación de Figma.
¿Es seguro eliminar los ID?
Casi siempre, con una excepción que conviene conocer. Solo eliminamos un id al que nada del archivo hace referencia, y comprobamos los valores url(#…), los atributos href y el CSS dentro de <style>. Lo que no podemos ver es el CSS o el JavaScript externo de tu página apuntando a ese id: si estilas o programas un SVG en línea desde fuera, apaga este paso.
¿Debería eliminar el elemento <title>?
Normalmente no, y por eso es el único paso desactivado por defecto. <title> es el nombre accesible del gráfico: es lo que lee un lector de pantalla, y sin él la imagen queda anónima para quien no esté mirándola. El ahorro suele ser de unas pocas decenas de bytes, lo que lo convierte en un mal canje.
¿Redondear coordenadas puede romper mi dibujo?
Con tres decimales y una ilustración normal, no. Tres decimales sobre un icono de 24 unidades equivalen a una cuarentamilésima de su anchura, algo que ninguna pantalla ni impresora puede mostrar. Lleva el deslizador a cero decimales en un viewBox pequeño y verás las formas encajar de golpe: la vista previa junto a cada archivo está para pillar justo eso.
¿Cómo sé que el archivo optimizado sigue viéndose igual?
De dos maneras. Cada archivo muestra miniaturas de antes y después una al lado de la otra, y nuestra batería de pruebas rasteriza ambas versiones de varias exportaciones reales y las compara píxel a píxel, admitiendo como mucho un par de niveles de deriva por suavizado. Un paso que cambiara el dibujo no pasaría esa comparación.
¿Por qué no usáis svgo?
Su paquete para navegador arrastra un árbol completo de análisis de CSS y una arquitectura de plugins de la que usaríamos una décima parte, y todo eso aterrizaría en cada visitante de esta página. Aquí están los pasos que producen la mayor parte del ahorro real y nada más, así que el optimizador solo se descarga cuando sueltas un archivo.
¿Esto elimina scripts y rastreadores de mi SVG?
Sí, y ese paso no es opcional. Los scripts, los manejadores de eventos, las referencias a imágenes remotas y las importaciones de hojas de estilo externas se eliminan de cada archivo, y el panel lista lo que ha encontrado. Aquí importa más que en nuestras otras herramientas de SVG, porque esta te devuelve código para pegar en tu propia página.
¿Gzip hace que esto sea inútil?
No, aunque estrecha la diferencia. Tu servidor casi con seguridad comprime el SVG en tránsito con gzip o brotli, y la compresión maneja bien la indentación repetida. Lo que no puede hacer es borrar un bloque de metadatos de 216 bytes ni acortar coordenadas de ocho decimales: ese contenido sigue teniendo que comprimirse y descomprimirse, y sigue costando bytes.
También podrías necesitar
¿Algo no funciona? Informar de un error