Cómo reducir el tamaño de un SVG sin romperlo

Un SVG exportado desde una herramienta de diseño es, en su mayor parte, texto que el navegador descarta: metadatos del editor, comentarios y coordenadas escritas con seis decimales. Quitar eso es seguro. El problema es que dos de los ajustes que más reducen un archivo también lo rompen, y un conteo de bytes no te puede decir cuál de las dos cosas pasó.

Optimiza un SVG con la herramienta

1. Abre el SVG optimiser. Pega tu código en el recuadro SVG markup (código SVG), pulsa Open SVG files (abrir archivos SVG), debajo, o suelta archivos SVG en cualquier parte de la página; varios archivos se optimizan juntos, cada uno en su tarjeta. El recuadro empieza con un pequeño ícono de ejemplo, y su línea de recuento indica cuántos caracteres y líneas contiene.
2. No hay botón que presionar: cada archivo se vuelve a optimizar cada vez que cambias su texto o un ajuste. Lee las cifras de Result (resultado): Before (antes), After (después), Saved (ahorrado) y Gzipped (con gzip, antes → después, «which is what ships», lo que se envía). La tarjeta de cada archivo muestra su propio antes y después.
3. Mueve Coordinate precision (precisión de coordenadas). Va de 0 a 6 decimales y empieza en 3. Por debajo de 2, aparece una advertencia bajo el control deslizante.
4. Deja marcada la casilla Run repeatedly until it stops shrinking (repetir hasta que deje de reducirse). Viene activada de forma predeterminada y repite la optimización hasta que una pasada ya no ahorra nada.
5. Abre More options (más opciones) para ver Options that can break the file (opciones que pueden romper el archivo): Remove viewBox, Remove <title> y Shorten and drop unused ids. Todas vienen desmarcadas, y cada una indica bajo su nombre lo que cuesta. La línea bajo More options dice cuáles están activadas, y Result las nombra aunque el grupo esté cerrado.
6. Compara las dos vistas previas renderizadas, etiquetadas Original y Optimised. Si son distintas, la culpa es del último ajuste que cambiaste.
7. Presiona Download optimised SVG (o la tecla D) para guardar el resultado, como optimised.svg si pegaste el código o logo-optimised.svg para un archivo llamado logo.svg, o Copy SVG code (copiar el código SVG, o la tecla C). Con varios archivos, All 3 as .zip los guarda juntos.

Qué quita cada ajuste y qué puede romper

Ajuste	Valor inicial	Qué ahorra	Qué puede romper
Comentarios, metadatos del editor, definiciones sin usar	Siempre activado	Los bytes fáciles de cualquier exportación de una herramienta de diseño	Nada que se vea
Coordinate precision	3 decimales	La mayor parte del ahorro en una exportación típica	Las curvas, por debajo de 2 decimales
Run repeatedly	Activado	Lo que haya dejado una sola pasada	Nada
Remove viewBox	Desmarcado	Muy pocos bytes	El escalado
Remove <title>	Desmarcado	El texto del título	El nombre accesible
Shorten and drop unused ids	Desmarcado	Las cadenas de los ids	El CSS externo, los scripts y las referencias <use> desde otros documentos

Los bytes están en la precisión

La precisión de coordenadas es la cantidad de decimales que se conservan en cada número del archivo. Las herramientas de diseño suelen escribir seis o más, y ninguna pantalla puede mostrar la diferencia.

El propio ejemplo de la herramienta muestra la magnitud. Su marca de verificación se dibuja con este trazado:

M 16.000000 24.000000 L 22.000000 30.000000 L 32.000000 14.000000

Esa cadena tiene 65 caracteres. Cada una de sus seis coordenadas lleva un punto decimal y seis ceros, así que 6 × 7 = 42 de esos 65 caracteres no dicen absolutamente nada. Cuando los dígitos finales no son ceros, en un ícono dibujado al tamaño previsto siguen describiendo una diferencia muchísimo menor que un píxel, y eso es lo que recorta el control deslizante: tres decimales es el punto de partida, dos suelen bastar para un ícono, y por debajo de dos las curvas se deforman a simple vista. La vista previa lado a lado está para que veas cómo ocurre en lugar de fiarte de un porcentaje.

Los dos ajustes que rompen archivos

Un viewBox es el atributo que traslada las coordenadas internas de un dibujo a la caja en la que se dibuje el SVG, sea cual sea. Es lo que permite que un mismo archivo escale a cualquier tamaño. Si lo quitas, el SVG queda atado a sus atributos width y height: no va a llenar un contenedor ni a responder al dimensionado con CSS. Es la forma más común de que un ícono optimizado termine con el tamaño equivocado en producción, y a cambio el ajuste ahorra muy pocos bytes.

El elemento <title> es la forma en que un lector de pantalla nombra un SVG. Si lo quitas, un gráfico informativo se anuncia como nada. Solo es seguro quitarlo de un ícono puramente decorativo que ya esté oculto para las tecnologías de asistencia con aria-hidden.

SVGO, el motor que usa la herramienta, sacó ambos ajustes de su preset predeterminado en la versión 4 justamente por estas razones. Si comparas lo que produce la herramienta con un optimizador más antiguo y el de aquí sale un poco más grande, la diferencia casi siempre es un viewBox y un title conservados. El archivo más chico era el roto.

Revisa tus ids a mano

Los ids son el riesgo más silencioso. Si algo fuera del SVG hace referencia a un id de adentro (una hoja de estilos, un script o un elemento <use> de otro documento que apunta a un sprite), acortar o quitar ese id rompe la referencia sin ningún cambio visible en la vista previa, porque la vista previa muestra el archivo por sí solo.

Así que deja desmarcada Shorten and drop unused ids para cualquier archivo al que apunte otro, y márcala solo para un ícono independiente, donde a nada fuera del archivo le importa. En un sprite, los ids son toda la interfaz.

Esa casilla no siempre hizo lo que decía. Mientras escribíamos esta guía descubrimos que SVGO 4.1, la versión que usa la herramienta, todavía incluye su limpieza de ids en el preset predeterminado, así que los ids se acortaban o eliminaban incluso con la casilla desmarcada. Ahora la herramienta desactiva la limpieza de forma explícita cuando la casilla está vacía, y una prueba en el código del sitio verifica ambos sentidos. Si optimizaste un sprite aquí antes de octubre de 2026, busca en el resultado los ids de los que depende tu sitio.

Los bytes sin comprimir exageran el ahorro

Los servidores comprimen el SVG durante la transferencia, y la compresión ya se encarga de las repeticiones. Dos resultados que parecen muy distintos sin comprimir a menudo quedan mucho más cerca con gzip, y por eso la herramienta muestra las cifras con gzip junto a las cifras sin comprimir. Si un ajuste arriesgado consigue un gran ahorro sin comprimir y casi nada con gzip, quédate con el archivo más seguro.

Otras formas de hacerlo

SVGO también funciona desde la línea de comandos:

npx svgo input.svg -o output.svg

Eso usa el preset predeterminado de SVGO. Desde la versión 4, el preset predeterminado conserva viewBox y el elemento title, igual que la herramienta. Para la precisión y los demás ajustes, consulta la documentación de SVGO. Ni macOS ni Windows tienen un optimizador de SVG integrado.

Cómo comprobar que no se subió nada

SVGO se ejecuta en la pestaña. La primera vez que la página optimiza algo, que ocurre en cuanto carga el ejemplo, tu navegador descarga el propio código de SVGO, unos 195 KB con gzip; esa es la única solicitud que vas a ver en el panel Network de las herramientas para desarrolladores, y es algo que entra, no que sale. A partir de ahí puedes desconectarte de la red, pegar tu propio archivo y la herramienta sigue funcionando.

Siguiente paso

Pega tu archivo en el SVG optimiser, baja la precisión a dos y compara las vistas previas. Si el SVG es un logo que va a convertirse en favicon, el Favicon generator lo acepta directamente. Si piensas incrustarlo en el CSS, el Data URI converter te dice si vale la pena.