SVGO: optimiza un SVG sin perder la estructura necesaria

Para optimizar un SVG con SVGO sin romper su uso en una página, conserva el original, identifica la estructura de la que depende la página y prueba después una copia optimizada por separado en esa página. Un archivo más pequeño y una vista previa independiente sin cambios no demuestran que los selectores CSS, scripts o referencias sigan funcionando.

Nuestra insignia original hace visible esa diferencia. El conjunto predeterminado de SVGO redujo su código original de 437 a 263 bytes, pero eliminó el identificador que el HTML circundante utilizaba para cambiar el color del sol. Desactivar cleanupIds produjo una copia de 281 bytes que conservó la referencia. Estas medidas describen solo este ejemplo con SVGO 4.1.0, no una garantía de compresión para otros gráficos.

SVGO edita código SVG existente. Si solo tienes un PNG o JPG, crea o recupera primero geometría vectorial. La optimización no puede convertir los objetos dentro de un mapa de bits en trazados editables.

Decide qué estructura SVG necesitas conservar

Antes de ejecutar el optimizador, distingue lo visible de lo que otro documento o aplicación referencia. El conjunto predeterminado de SVGO incluye operaciones que cambian identificadores, grupos, estilos y datos de trazados. Una integración también puede elegir otros complementos, así que comprueba la configuración de la herramienta que realmente procesa el archivo.

Son comprobaciones separadas. Conservar un identificador no conserva cada grupo, nodo u objeto editable. Del mismo modo, un renderizado correcto no demuestra que un editor recupere la estructura de capas que prefieres. Conserva un maestro editable y produce una copia de entrega para el contexto de destino.

Para símbolos reutilizables, la guía de sprites SVG trata el lado consumidor de la referencia. Este artículo se centra en lo que puede cambiar una optimización antes de que ese consumidor reciba el archivo.

Reproduce una referencia CSS externa rota

Utiliza una carpeta temporal vacía con Node.js y npm disponibles. Guarda esta ilustración creada a mano como input.svg, incluido el salto de línea final. Es un ejemplo de configuración, no un resultado de conversión de PerfectVector.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <!-- Original illustration for an SVGO configuration test. -->
  <metadata>Editable master: preserve the badge-accent CSS hook.</metadata>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle id="badge-accent" cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
</svg>

Instala la versión exacta utilizada en este ejemplo y produce después un archivo nuevo de salida:

npm install --save-exact svgo@4.1.0
npx svgo input.svg -o default.svg

Ejecuta esto en la carpeta limpia para que un svgo.config.mjs existente no aporte ajustes inesperados. El repositorio oficial de SVGO documenta nombres de archivo de salida separados y carga de configuración. Para una compilación de proyecto, conserva versión y configuración bajo control de versiones para que una actualización sea un cambio deliberado.

Abre default.svg como texto. Su círculo sigue teniendo relleno coral, pero ha desaparecido el identificador badge-accent. Ese identificador no estaba referenciado dentro del documento SVG. La documentación de cleanupIds explica que el complemento elimina identificadores no utilizados y acorta los referenciados. El selector de una página externa queda fuera de la entrada de este ejemplo.

Para ver la consecuencia, coloca el código SVG directamente en una página HTML con este estilo fuera del SVG:

<style>
  #badge-accent { fill: #f5bf42; }
</style>

Utiliza una copia por página para esta prueba. El sol del SVG original se vuelve dorado porque el selector coincide. El sol optimizado con el conjunto predeterminado permanece coral porque falta su identificador. Cargar cualquiera de los archivos mediante un elemento img sería otra prueba: la página anfitriona no seleccionaría una forma interior del mismo documento.

Conserva la referencia y repite la prueba

Guarda esto como svgo.config.mjs en la misma carpeta:

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupIds: false,
        },
      },
    },
  ],
};

Escribe ahora otra copia:

npx svgo input.svg --config svgo.config.mjs -o preserved.svg
wc -c input.svg default.svg preserved.svg

La anulación desactiva solo este complemento y mantiene el resto del conjunto predeterminado. Es un punto de partida para la dependencia del identificador demostrada. No es una configuración universalmente segura para gráficos arbitrarios, animación, relaciones de accesibilidad o estructura específica de aplicaciones.

Ejecutamos los comandos anteriores en una carpeta limpia y, de forma independiente, las configuraciones equivalentes mediante la API JavaScript de SVGO 4.1.0. Las salidas de CLI y API fueron idénticas byte por byte, sin salto de línea final añadido a los archivos optimizados. Después renderizamos cada resultado en su propio documento HTML con la misma regla CSS externa. El navegador indicó estos resultados:

La salida que conservó el identificador ahorró 156 bytes, aproximadamente el 35.7% de esta fuente. Costó 18 bytes más que la salida predeterminada y mantuvo el comportamiento necesario. Espacios, finales de línea, versiones y formato de salida pueden cambiar tus cifras de bytes.

Las tres copias conservaron viewBox="0 0 160 160" en esta prueba. Comprobamos el resultado visible y el relleno calculado del navegador. No medimos tiempo de transferencia de red ni probamos todos los navegadores, editores, funciones SVG o integraciones de compilación.

Ajusta parámetros para una dependencia específica

Si solo unos pocos identificadores son puntos públicos de referencia, cleanupIds también ofrece opciones preserve y preservePrefixes. Utilízalas cuando puedas nombrar la dependencia y después repite la misma prueba del consumidor. Si se insertarán juntos varios SVG en HTML, comprueba también identificadores duplicados. Conservar un identificador ya duplicado no lo hace único; renombrar uno requiere actualizar sus consumidores.

Un estilo o script dentro del SVG puede cambiar el comportamiento del optimizador. La documentación de cleanupIds describe una protección que evita actuar cuando esos elementos están presentes. No extrapoles esa protección a CSS de otro documento ni fuerces la limpieza sin entender qué referencias dependen de los identificadores.

Trata la precisión numérica por separado. Menos decimales pueden reducir el código, pero el cambio aceptable depende de la escala de coordenadas del gráfico y de su tamaño final de visualización. Revisa huecos pequeños, esquinas y curvas a los tamaños donde se utilizará el gráfico. Una comprobación correcta de identificadores no dice nada sobre esos detalles.

Conserva viewBox cuando tu disposición dependa de su comportamiento de escalado. La documentación del complemento removeViewBox advierte sobre consecuencias de escalado y recorte. No está en el conjunto predeterminado documentado que se utiliza aquí; añadirlo explícitamente es otra decisión. Evita copiar configuraciones antiguas sin comprobar para qué versión y conjunto se escribieron.

Para un contorno con muchos puntos de vectorización, optimizar el código y limpiar deliberadamente nodos también responden a preguntas distintas. Utiliza la guía de nodos SVG para evaluar si la geometría necesita simplificarse y compara la silueta después de editar. Un archivo original más pequeño no implica automáticamente un trazado de corte más limpio.

Valida la copia de entrega donde se utilizará

Después de elegir una configuración, coloca el archivo optimizado en el flujo receptor real. Comprueba el estado predeterminado y cualquier estado de cursor, selección, tema o animación que dependa de él. Una vista previa estática puede pasar por alto un selector que solo se ejecuta tras una interacción.

Para un gráfico web, revisa la salida compilada final además del archivo local optimizado. Un framework o empaquetador puede ejecutar su propia optimización después. Repite la prueba si el código entregado difiere.

Para una entrega editable, abre la copia en el editor previsto y selecciona las piezas que necesite el destinatario. Confirma letras pequeñas, huecos, colores separados y recortes. Conserva el maestro de origen incluso cuando la copia web supere las pruebas.

Optimizar archivos también es distinto de comprimir el transporte. La guía de SVGZ frente a SVG demuestra un ciclo de compresión y descompresión gzip que restaura bytes de origen idénticos. SVGO cambia esa fuente antes de entregarla; gzip puede codificar después esos bytes. Compara cada operación con su propio objetivo.

Cuándo corresponde vectorizar antes de optimizar

Si falta el maestro vectorial y la única fuente es un PNG o JPG plano, el flujo de imagen a vector de PerfectVector puede ayudar a preparar un SVG candidato. Compara el resultado con la fuente y revisa huecos, detalles pequeños y regiones separadas antes de aceptarlo. Añade los identificadores o grupos que necesite la página después de comprobar el gráfico y optimiza después una copia de entrega y prueba esas referencias.

PerfectVector no es un optimizador de SVG existentes ni reconstruye los selectores de tu sitio web. Utiliza el maestro vectorial existente cuando esté disponible. Conserva una foto como ráster cuando su detalle de tono continuo importe más que los contornos editables. Las guías de preparación vectorial del blog tratan esas elecciones de fuente.

Preguntas frecuentes

¿Desactivar cleanupIds hace seguro optimizar cualquier SVG? No. Conserva identificadores frente a la eliminación y reducción de ese complemento, pero otros complementos pueden seguir cambiando estilos, grupos, formas o datos de trazados. Valida las funciones y referencias que utiliza el flujo receptor.

¿Por qué un SVG optimizado se ve bien por separado, pero mal en mi página? La vista previa independiente puede no ejecutar CSS o scripts externos. En nuestro ejemplo, el relleno coral propio del SVG se renderizó normalmente, mientras que el cambio a dorado de la página falló porque se había eliminado el identificador seleccionado.

¿Debo optimizar mi único maestro editable? Conserva el maestro y escribe una copia optimizada de entrega. Un archivo puede renderizarse correctamente después de optimizar mientras su estructura de objetos resulta menos útil para editar después.

¿Puede SVGO convertir un PNG en trazados vectoriales? No. SVGO procesa código SVG. La vectorización de ráster a vector es una operación anterior cuando el gráfico necesita geometría editable y no existe un maestro vectorial adecuado.

Fuentes

1. Repositorio de SVGO — Explica instalación, salidas de línea de comandos, carga de configuración y API optimize.
2. Conjunto predeterminado de SVGO — Enumera sus complementos y documenta anulaciones y diferencias de integración.
3. SVGO cleanupIds — Documenta eliminación y reducción de identificadores, opciones de conservación y protecciones relacionadas.
4. SVGO removeViewBox — Explica el riesgo de escalado al eliminar explícitamente viewBox.

Conserva la copia más pequeña que supere tus comprobaciones de gráficos y comportamiento. Si el archivo inicial aún carece de geometría vectorial editable, prepara un SVG desde tu gráfico ráster, revisa sus formas y conserva las referencias que añadas antes de optimizar la copia de entrega.