Simplificador de paths SVG
Cómo funciona
Pega un SVG o suelta el archivo en la zona de arrastre y la página reescribe los datos de sus paths con SVGO v4. Después te muestra lo que ha costado: los bytes antes y después, el porcentaje ahorrado, el tamaño con gzip y una vista previa lado a lado del original y el resultado para comprobar que la forma no se ha movido.
La precisión es la palanca. Las herramientas de diseño exportan las coordenadas con seis decimales (`M 12.847362 4.019283`), unas mil veces más finas de lo que puede resolver cualquier pantalla. El control va de 0 a 6 y aquí empieza en 2, un paso por debajo del optimizador general, porque esta página está pensada para los datos de los paths y dos decimales reducen a la mitad casi cualquier atributo `d=` por sí solos. Mueve dos plugins de SVGO a la vez: `convertPathData` para los comandos del path y `cleanupNumericValues` para todos los demás números del documento, de modo que nada se queda con seis decimales junto a un path que lleva dos.
Una regla práctica para elegir el valor: 3 es visualmente sin pérdida a cualquier zoom, 2 es lo adecuado para iconos y logotipos que se muestran por debajo de unos cientos de píxeles, 1 sirve para glifos de interfaz pequeños y monocromos y empieza a desplazar las curvas de forma visible en cualquier cosa mayor, y 0 solo es seguro en rectángulos y otras formas alineadas con los ejes. La vista previa se redibuja a cada cambio, así que el método honesto es bajar el control hasta que notes una diferencia y volver un paso atrás.
Qué hace `convertPathData` además de redondear. Reescribe cada path en su forma equivalente más corta: los comandos absolutos pasan a relativos cuando la versión relativa es más corta (`M 100 100 L 120 100` se convierte en `M100 100h20`), los segmentos rectos se colapsan de `L` a `H` o `V`, se eliminan los subpaths de longitud cero y los redundantes, y los comandos de curva se reescriben en la forma abreviada que ocupe menos caracteres. Todo es sin pérdida con una precisión razonable: el renderizador dibuja los mismos píxeles con menos bytes.
`mergePaths` toma elementos `<path>` hermanos consecutivos que comparten los mismos atributos de estilo y los une en un solo elemento con un solo `d=`. En un icono exportado como una docena de formas sueltas suele suponer entre el 5% y el 20% del archivo, sobre todo por las etiquetas y los atributos `fill=` repetidos que desaparecen. Se ejecuta solo, y es el motivo para conservar el original si piensas animar paths individuales más adelante: una vez unidos dos paths, nada puede apuntar a ellos por separado.
Los segmentos y atributos inútiles siguen el mismo camino. `removeUselessStrokeAndFill` elimina los atributos `stroke` y `fill` que solo repiten el valor por defecto, `convertShapeToPath` convierte `<rect>`, `<polygon>` y familia en paths para que `mergePaths` pueda alcanzarlos, `removeUselessDefs` limpia las entradas de `<defs>` a las que no hace referencia nada y `collapseGroups` pliega los envoltorios `<g>` que no aportan nada.
Lo que no hace, y es la parte que casi todas las páginas cuentan mal: no elimina puntos de anclaje. Un path que llega con 4000 puntos sale con 4000 puntos. Todo lo anterior hace que cada punto ocupe menos bytes; nada de aquí reajusta la curva. Si de verdad necesitas menos nodos, porque el path salió de una vectorización de imagen y pesa para animarlo o editarlo a mano, eso es reajuste de curvas (Ramer–Douglas–Peucker y familia) y por definición tiene pérdida: la forma cambia. El menú Trazado de Inkscape, Objeto → Trazado → Simplificar de Illustrator y la librería simplify-js lo hacen. Hazlo primero, trae aquí el resultado para el paso de bytes sin pérdida y los dos pasos se suman.
Los otros cuatro ajustes. Conservar viewBox está activado y conviene dejarlo así salvo que el SVG tenga un tamaño fijo que nunca escalas, porque quitarlo rompe el dimensionado con CSS para ahorrar unos 25 bytes. Conservar los atributos id está desactivado, lo correcto salvo que el archivo sea un sprite o tu CSS y JavaScript seleccionen nodos por id. Conservar title y desc está desactivado; actívalo cuando el gráfico transmita significado, porque los lectores de pantalla anuncian `<title>`. Multipass está activado y repite todo el proceso hasta que la salida deja de reducirse, lo que encuentra otro 3–8% en paths complejos.
Fíjate en el número con gzip, no en el bruto. Todo servidor comprime el SVG antes de enviarlo, y gzip ya colapsaba buena parte de la repetición que SVGO borra de raíz. Un ahorro bruto del 60% suele quedarse entre el 25% y el 40% tras gzip. La cifra con gzip es la que se convierte en tiempo de carga.
El motor es el propio SVGO, la misma librería que usan la línea de comandos, webpack, Vite y svgr, ejecutándose en tu navegador en lugar de en Node. Con los mismos ajustes el resultado es, byte a byte, el que produce `npx svgo` en local. No se sube nada y no hay cola, como comprobará la pestaña Red. Para una limpieza general, con el mismo motor, una precisión por defecto de 3 y la eliminación de metadatos de editores por delante, usa el optimizador y simplificador de SVG de este sitio.
Preguntas frecuentes
¿Cómo simplifico un path SVG?
- Baja el control de precisión numérica. Es, con diferencia, la palanca más potente sobre los datos de un path, porque las herramientas de diseño exportan seis decimales y con dos basta para cualquier cosa que se muestre por debajo de unos cientos de píxeles. Pasar de 6 a 2 suele reducir a la mitad el atributo d= por sí solo. Mira la vista previa lado a lado mientras lo mueves y deja multipass activado para que el proceso se repita hasta que la salida deje de reducirse.
¿Reduce el número de puntos de un path?
- No. Un path que llega con 4000 puntos de anclaje sale con 4000 puntos de anclaje. Lo que cambia es lo que ocupa cada punto: las coordenadas se redondean, los comandos absolutos pasan a relativos, los segmentos rectos se colapsan de L a H y V y los paths con el mismo estilo se unen. Para tener menos nodos de verdad hace falta reajustar las curvas, que tiene pérdida: usa antes el menú Trazado de Inkscape, Simplificar de Illustrator o simplify-js y trae aquí el resultado.
¿Qué precisión debo usar?
- 2 para iconos y logotipos, que es el valor por defecto aquí. Usa 3 cuando la ilustración sea grande o detallada y quieras la garantía de que nada se mueve, 1 solo para glifos de interfaz pequeños y monocromos, y 0 solo para rectángulos y otras formas alineadas con los ejes. Lo dibujado en un lienzo grande, como un mapa o una ilustración detallada, puede necesitar 4. La vista previa decide: baja el valor hasta ver un cambio y da un paso atrás.
¿Qué cambia exactamente convertPathData?
- Cuatro cosas. Redondea cada coordenada a la precisión elegida, convierte los comandos absolutos en relativos cuando resulta más corto, colapsa los segmentos rectos L en H y V y elimina los segmentos de longitud cero y los subpaths redundantes. Con una precisión razonable las cuatro son sin pérdida: los píxeles renderizados son idénticos y el atributo d= queda entre un 20% y un 60% más corto.
¿Unir paths puede romper la animación de mi SVG?
- Puede, y es lo único que hay que vigilar. mergePaths une elementos path consecutivos con los mismos estilos en un único elemento, así que un selector de CSS o JavaScript que apuntaba a uno de ellos ya no tiene nada a lo que apuntar. Si animas o programas paths individuales, guarda el original previo a la unión en tu control de versiones y trata el archivo optimizado como resultado de compilación.
¿Es lo mismo que ejecutar SVGO desde la línea de comandos?
- Sí. Es el propio SVGO v4, la librería en la que delegan la línea de comandos, webpack, Vite y svgr, ejecutándose en tu navegador y no en Node. Con los mismos ajustes la salida es idéntica, byte a byte, a npx svgo input.svg. El control de precisión se corresponde con la opción floatPrecision de convertPathData y cleanupNumericValues, que es lo que fijaría un svgo.config.js.
¿Por qué el ahorro con gzip es menor que el bruto?
- Porque gzip ya comprimía la repetición que elimina SVGO. Un path lleno de números con seis decimales tiene mucha redundancia que gzip aprovecha, así que borrar esos dígitos recupera menos de lo que sugiere el recuento de bytes bruto. Una reducción bruta del 60% suele quedarse entre el 25% y el 40% con gzip, y esa cifra con gzip es la que de verdad llega a tus usuarios, porque todo servidor web comprime el SVG.
¿Puedo recuperar después el path original?
- No. Redondear coordenadas y unir paths es destructivo: los decimales descartados y los límites entre elementos desaparecen. Guarda el original en tu control de versiones o trata el simplificador como un paso de compilación que se ejecuta sobre una copia. Por eso importa la vista previa: es la única comprobación que tienes antes de perder los bytes.
¿Se sube mi SVG a algún sitio?
- No. SVGO se ejecuta como JavaScript dentro de la pestaña de tu navegador, así que el archivo no sale de tu dispositivo. Abre las herramientas para desarrolladores, mira la pestaña Red y pulsa Optimizar: no sale ninguna petición. Es importante para logotipos y trabajos de clientes sujetos a confidencialidad, que es casi todo lo que se pega en una herramienta como esta.
Plugins de SVGO para paths y cómo los controla esta página
Los plugins que tocan los datos de los paths, qué cambia cada uno y qué control de esta página lo mueve.
| Plugin | Qué hace con los datos del path | Lo controla | Ahorro típico |
|---|---|---|---|
| convertPathData | Redondea coordenadas, convierte comandos absolutos en relativos, colapsa L en H y V y elimina subpaths de longitud cero y redundantes | Control de precisión numérica | 20–60% |
| cleanupNumericValues | Redondea a la misma precisión todos los demás números del archivo (width, x, y, stroke-width) | Control de precisión numérica | 5–30% |
| mergePaths | Une paths hermanos consecutivos con los mismos estilos en un único atributo d= | Siempre activo, de preset-default | 5–20% |
| convertShapeToPath | Reescribe rect, polygon, line y polyline como paths para que mergePaths pueda alcanzarlos | Siempre activo, de preset-default | Hasta 30 bytes por forma |
| convertEllipseToCircle | Reescribe como círculo una elipse con radios iguales | Siempre activo, de preset-default | Unos pocos bytes por forma |
| convertTransform | Colapsa y redondea las listas de transform, convirtiendo matrix() en la forma más corta de translate, scale o rotate cuando son equivalentes | Siempre activo, de preset-default | 1–10% |
| removeUselessStrokeAndFill | Elimina los atributos stroke y fill que solo repiten el valor por defecto | Siempre activo, de preset-default | 1–5% |
| collapseGroups | Pliega los envoltorios g que no aportan nada y baja sus atributos a los paths | Siempre activo, de preset-default | 1–8% |
| cleanupIds | Elimina o acorta los atributos id a los que no hace referencia nada | Interruptor “Conservar los atributos id” | 5–15% |
Comportamiento verificado con SVGO v4, la versión que ejecuta esta página. El control de precisión se pasa a convertPathData y cleanupNumericValues como floatPrecision. Los plugins marcados como siempre activos vienen de preset-default y no se pueden desactivar aquí; removeViewBox, removeTitle y removeDesc no están en preset-default en la v4 y solo se añaden como plugins independientes cuando se desmarcan sus interruptores. Los ahorros son rangos típicos medidos en iconos exportados desde Illustrator, Figma y Sketch.