Optimizador de SVG Online

En la gran mayoría de los casos, no. Las optimizaciones seguras que realiza la herramienta (eliminación de metadatos, comentarios, elementos ocultos, atributos redundantes y simplificación de paths sin pérdida de precisión) no afectan la apariencia visual. Sin embargo, existe un pequeño conjunto de optimizaciones que pueden causar cambios en casos edge: la reducción de precisión decimal en coordenadas puede afectar levemente la forma de paths muy detallados (aunque visualmente imperceptible en la mayoría de los casos), y la eliminación de ciertos atributos CSS puede afectar SVGs con estilos complejos. Para SVGs que se usarán como iconos simples o ilustraciones estáticas, la optimización es completamente segura. Para SVGs con animaciones CSS o JavaScript que dependen de IDs o clases específicos, se recomienda revisar el resultado antes de usarlo en producción.

La optimización de SVG elimina todo aquello que es innecesario para la renderización visual. En la categoría de metadatos innecesarios: bloques <?xml version='1.0'?> cuando no son necesarios, declaraciones DOCTYPE, comentarios (excepto los de licencia que algunas organizaciones requieren preservar), elementos metadata de XML y los namespaces de Inkscape (inkscape:, sodipodi:), Adobe Illustrator (ai:, i:) y CorelDRAW. En la categoría de atributos redundantes: atributos con valores predeterminados (como fill='black' cuando black ya es el valor predeterminado), atributos de estilo que pueden consolidarse en el atributo style o en CSS. En la categoría de geometría: paths con comandos redundantes (moveto seguido inmediatamente de otro moveto), subpaths vacíos, y transformaciones identidad (transform='translate(0,0)'). La optimización de paths convierte curvas de Bézier a formas más cortas cuando es posible y reduce la precisión decimal de coordenadas.

El ahorro varía enormemente dependiendo del origen del SVG. Los SVGs exportados de Adobe Illustrator son notoriamente inflados: pueden contener decenas de kilobytes de metadatos de la aplicación, capas ocultas, definiciones no usadas y paths sin optimizar. Un ícono simple exportado de Illustrator de 50 KB puede reducirse a 3-5 KB después de optimización (reducción del 90%+). Los SVGs de Figma son más limpios pero aún tienen room for improvement: reducciones del 30-50% son comunes. Los SVGs de Inkscape tienen metadatos específicos de la aplicación (namespace sodipodi y inkscape) que suman peso innecesario para producción: reducciones del 40-60% son típicas. Para SVGs ya optimizados manualmente, las ganancias son menores (10-20%). En promedio, SVGO reporta una reducción media del 55-65% en sus benchmarks con SVGs de prueba del mundo real.

Absolutamente. Los SVGs sin optimizar tienen impacto directo en el rendimiento web. Un SVG de 80 KB vs uno optimizado de 8 KB representa 10x menos datos que el navegador debe descargar, parsear y renderizar. El impacto es especialmente notable en dispositivos móviles con conexiones lentas. Para iconos SVG (los más comunes en la web), el tamaño óptimo después de optimización debería ser inferior a 1 KB para iconos simples y inferior a 10 KB para ilustraciones complejas. Además de la reducción de tamaño directa, los SVGs optimizados se comprimen mejor con gzip o Brotli (los algoritmos de compresión HTTP), porque los archivos más limpios tienen menor entropía. Herramientas de auditoría de rendimiento como Lighthouse de Google penalizan los assets no optimizados, incluyendo SVGs sobredimensionados, en sus puntuaciones de Performance.

Sí, ciertas optimizaciones agresivas pueden romper SVGs con interactividad. Los casos principales son: (1) Eliminación de IDs: si un SVG tiene animaciones CSS o JavaScript que referencian elementos por su ID (document.getElementById o CSS animation con keyframes ligados a IDs), eliminar esos IDs romperá la funcionalidad. (2) Eliminación de clases: similar al caso anterior con clases CSS. (3) Colapso de grupos: fusionar grupos <g> puede cambiar el orden de renderizado o eliminar puntos de referencia para animaciones. (4) Inlining de estilos: convertir clases CSS a atributos de estilo inline puede interferir con CSS externo que apunta a esas clases. Para SVGs animados o interactivos, la recomendación es usar un perfil de optimización conservador que preserve IDs y clases, o revisar manualmente el resultado.

SVGO (SVG Optimizer) es la herramienta de optimización de SVG más usada en el ecosistema JavaScript/Node.js. Fue creada por Kir Belevich en 2012 y está disponible como paquete npm (npm install -g svgo). SVGO usa una arquitectura de plugins: cada tipo de optimización es un plugin independiente que puede activarse o desactivarse individualmente. Los plugins se organizan en dos categorías: preset-default (plugins activados por defecto, considerados seguros) y plugins opcionales (más agresivos, desactivados por defecto). SVGO v3 (lanzado en 2022) es la versión actual, con soporte completo para SVG 2.0 y optimizaciones mejoradas. La herramienta se integra en los build systems más populares: existe svgo-loader para webpack, @svgr/webpack para React (que usa SVGO internamente), vite-plugin-svgo para Vite, y plugins para Rollup y esbuild. En 2020, Jake Archibald creó SVGOMG, una interfaz web para SVGO que permite visualizar el resultado y ajustar los plugins interactivamente.