Optimizador SVG

Cómo funciona

1. Pega o importa un SVG: introduce el marcado SVG directamente o importa un archivo .svg exportado desde Illustrator, Figma o Sketch.
2. Configura las pasadas de optimización: elige qué optimizaciones aplicar, eliminación de comentarios, retirada de metadatos, simplificación de rutas y normalización del viewBox.
3. Optimiza: la herramienta ejecuta las pasadas elegidas y muestra el porcentaje de reducción de tamaño.
4. Descarga o copia: guarda el SVG optimizado o copia el marcado para pegarlo en tu código.

¿Por qué optimizar tus SVG?

Los archivos SVG exportados desde herramientas de diseño están llenos de datos innecesarios, metadatos de editor, declaraciones de estilo en línea con valores por defecto, grupos vacíos, atributos de transformación redundantes y comentarios. Este exceso aumenta el tamaño sin cambiar nada del renderizado. SVGO (el optimizador SVG estándar del sector usado aquí) suele reducir el tamaño entre un 50 y un 80 % preservando un renderizado exacto al píxel. SVG más pequeños cargan más rápido, se integran más rápidamente en HTML y reducen el ancho de banda, especialmente importante para sistemas de iconos que cargan decenas de SVG por página.

Optimizaciones aplicadas

• Comentarios eliminados: comentarios de generador y de editor retirados
• Metadatos retirados: elementos title, desc y XMP
• Grupos vacíos fusionados: elementos <g> de envoltura innecesarios retirados
• Rutas simplificadas: comandos de ruta redundantes fusionados y acortados
• Atributos limpiados: valores por defecto y atributos de presentación retirados
• ViewBox normalizado: sistema de coordenadas coherente

Breve historia de SVG y SVGO

Scalable Vector Graphics nació de una competencia entre dos propuestas del W3C: Precision Graphics Markup Language (PGML) de Adobe, IBM, Netscape y Sun, y Vector Markup Language (VML) de Microsoft. Ambos fueron presentados en 1998; el compromiso del W3C se convirtió en SVG, recomendado como SVG 1.0 en septiembre de 2001. Internet Explorer se negó notoriamente a incluir soporte SVG hasta IE9 (2011), mientras que Firefox, Safari y Opera lo soportaron desde mediados de los 2000. SVG 1.1 apareció en 2003, con una segunda edición en 2011. SVG Tiny 1.2 apuntó a dispositivos móviles en 2008. SVG 2 comenzó a redactarse alrededor de 2016 pero se estancó; hoy sigue siendo un Candidate Recommendation Draft (última modificación en 2018), con los navegadores enviando piezas individualmente. La optimización llegó después. SVGO fue creado por Kir Belevich (svg-go) y publicado por primera vez en GitHub en octubre de 2012, escrito en JavaScript. Se convirtió en el estándar de facto, integrado en webpack-loader, Vite, Sketch, plugins de exportación de Figma, y la interfaz web SVGOMG de Jake Archibald (equipo Chrome) lanzada en 2015. SVGO 3 (lanzado en 2023) modernizó la base de código. Esta herramienta implementa un subconjunto seguro de los plugins más impactantes de SVGO, ejecutándose enteramente en tu navegador.

Lo que realmente hace un optimizador SVG

• Reducción de precisión decimal. Illustrator exporta caminos con 6 dígitos decimales como M127.348293. Tres decimales son visualmente idénticos para tamaños típicos de iconos; uno o dos suelen ser suficientes. SVGO usa 3 decimales por defecto vía el plugin cleanupNumericValues. Menor precisión = archivo más pequeño.
• Colapsar grupos inútiles. Las herramientas de diseño envuelven cada operación en elementos <g>; muchos quedan vacíos tras la simplificación. El plugin collapseGroups fusiona grupos con un solo hijo en su padre.
• Eliminar metadatos. Illustrator estampa cada exportación con bloques <metadata>...</metadata> conteniendo paquetes XMP, Inkscape con atributos de namespace sodipodi, Figma con IDs de editor. Nada de esto afecta el renderizado. removeMetadata, removeEditorsNSData y removeXMLProcInst los manejan.
• Optimización de comandos de camino. Convertir coordenadas absolutas a relativas (a menudo más cortas), fusionar segmentos de línea consecutivos (l 5,0 l 0,5 se queda en dos; L 5,0 L 5,5 se convierte en v 5), eliminar Z inútiles tras z. El plugin convertPathData puede ahorrar 30-50 % en cadenas de camino.
• Eliminación de atributos por defecto. fill="black", stroke="none", stroke-width="1" son valores por defecto; SVGO los elimina. Combinado con mergeStyles, esto suele reducir las exportaciones con estilos inline a la mitad.
• Acortamiento de colores. #ffffff → #fff; rgb(255,255,255) → #fff; colores nombrados (aliceblue) → hex si es más corto. El plugin convertColors.
• Eliminación de IDs no usados. Los IDs generados por el editor como id="path-7423" generalmente nunca se referencian. El cleanupIds de SVGO elimina IDs huérfanos y minifica el resto a a, b, c...

Dónde importa la optimización SVG

• Sistemas de iconos. Una página con 30 iconos SVG a 2 KB cada uno son 60 KB; optimizados a 800 bytes cada uno ahorra 36 KB. Heroicons, Lucide, Phosphor, Feather todos envían SVG pre-optimizados; si los has extraído de un archivo de diseño, necesitas hacerlo tú mismo.
• Logos y assets de marca. Los logos entregados a clientes suelen ser 50-100 KB desde Illustrator; optimizados son 5-10 KB. Misma fidelidad visual, menor ancho de banda, carga de página más rápida. El SVG del logo de Wikipedia bajó de 39 KB a 11 KB tras una sola pasada de optimización.
• SVG inline en HTML. Cuando pones SVG inline (sin petición HTTP extra), cada byte del SVG infla el payload HTML que bloquea el parser del navegador. Un icono de 200 bytes vs 2 KB importa para el tiempo de primer pintado.
• Visualización de datos. D3.js, Observable, la salida SVG de ECharts y React-vis producen SVGs grandes con miles de elementos. Un diagrama de dispersión con 5.000 puntos fácilmente son 500 KB en bruto; optimizado puede bajar a 150 KB manteniéndose idéntico.
• Generación de fuentes de iconos. Herramientas como IcoMoon, Fontello y Fontastic convierten SVGs a fuentes de iconos. Pre-optimizar los SVG fuente asegura salida de fuente más limpia y archivos de fuente más pequeños.
• Assets de impresión y PDF. Embeber SVG en PDF (vía herramientas web-to-PDF como Puppeteer, wkhtmltopdf) significa que el bloat SVG termina en el PDF final. Optimiza primero.
• SVG seguro para email. Muchos clientes de email (Outlook, algunas apps Gmail) no renderizan SVG en absoluto; para los que sí (Apple Mail, Gmail web), un SVG inline más pequeño mantiene los emails bajo el umbral de corte de Gmail de 102 KB.

Errores de optimización que rompen SVGs

• Eliminar IDs que están referenciados. Los SVG suelen usar <defs> con IDs referenciados vía url(#gradient-1) en fill o stroke. La eliminación agresiva de IDs rompe degradados, máscaras, clip paths, filtros. Usa una herramienta que rastree referencias, no regex ciego.
• Eliminar atributos width/height ciegamente. Pierde la relación de aspecto natural. El resultado: <img src="icon.svg"> se estira para llenar su contenedor sin tamaño intrínseco, causando CLS (Cumulative Layout Shift). Mantén al menos viewBox; preferiblemente mantén también width/height.
• Reducción decimal demasiado agresiva. Reducir a 0 decimales en iconos pequeños hace los caminos visiblemente dentados. 3 decimales es un default seguro; baja a 1 solo para iconos más grandes que 64×64 o donde la perfección al píxel no es requerida.
• Eliminar xmlns al hacer inline. Los archivos SVG independientes necesitan xmlns="http://www.w3.org/2000/svg". El SVG inline en HTML no (el parser HTML5 lo maneja), pero si pudieras extraer el SVG a un archivo más tarde, mantén el xmlns. La confusión aquí rompe el renderizado SVG de Safari.
• Reemplazar currentColor con fill codificado. fill="currentColor" es un poderoso hook CSS: el icono hereda el color del texto. Los optimizadores agresivos lo reemplazan con el valor calculado, rompiendo modo oscuro y sistemas de iconos con temas.
• Fusionar caminos que deberían quedar separados. Algunas animaciones apuntan a IDs específicos de caminos; algunas herramientas de accesibilidad dependen de múltiples elementos <path> con texto <title> individual. El plugin mergePaths destruye estos. Desactívalo para SVGs animados o accesibles.
• Eliminar <title> y <desc> accesibles. Los SVG usados como imágenes independientes o en etiquetas <img> necesitan <title> para lectores de pantalla (similar al texto alt). La eliminación agresiva de metadatos quita esto. O mantén los títulos, o añade aria-label en el elemento SVG inline.

Más preguntas frecuentes

¿Cuánto puede realmente ahorrar la optimización SVG?

Depende mucho de la fuente. Las exportaciones de Adobe Illustrator suelen reducirse en 60-80 % en la primera pasada, principalmente por eliminación de metadatos, namespaces de editor y reducción de precisión decimal. Las exportaciones de Figma son más limpias de fábrica (típicamente 20-40 % de ahorro). ¿SVG escrito a mano por un desarrollador? Suele ser 5-15 %, ya que no hay mucho que eliminar. El logo de Wikipedia, caso extremo de bloat Illustrator, pasó de 39 KB a 11 KB. Un icono típico 24×24 de Figma baja de 1,4 KB a 0,6 KB.

¿Cuándo debería poner SVG inline vs usarlo como archivo externo?

Inline (<svg>...</svg> en HTML) para iconos pequeños (bajo 2 KB), contenido crítico sobre la línea de flotación, y en cualquier lugar donde necesites CSS para estilizar el SVG (p. ej. currentColor, estados hover, modo oscuro). Archivo externo (<img src="icon.svg"> o background-image CSS) para iconos idénticos usados repetidamente (el navegador cachea), ilustraciones más grandes, contenido que no necesita temática CSS. Sprite SVG (archivo único con múltiples elementos <symbol>, referenciados por <use>) fue el patrón de sistema de iconos de 2014-2019, ahora largamente reemplazado por componentes inline-svg en React/Vue/Svelte.

¿Hay riesgos de seguridad en SVG no optimizados?

Sí. SVG puede incrustar etiquetas <script> y manejadores de eventos onload, onclick; los SVG subidos por usuarios son un vector XSS. SVG puede referenciar recursos externos vía <image href="...">, filtrando la IP del espectador. Las fuentes SVG (deprecadas pero aún parseable) tenían históricamente desbordamientos de buffer. Un buen optimizador elimina <script> y manejadores de eventos como parte de la limpieza; si aceptas subidas SVG de usuarios, pásalos por un saneador endurecido (DOMPurify con perfil SVG) antes de servir.

¿Puedo optimizar SVG usando la línea de comandos?

Sí. npx svgo input.svg -o output.svg usa la biblioteca canónica SVGO. Configura plugins vía svgo.config.js. Integraciones CI: imagemin-svgo en webpack, vite-plugin-svgo, GitHub Action antfu/svg-opt. Para optimización por lotes: svgo -f ./icons -o ./icons-optimised. La herramienta de navegador aquí es más rápida para casos puntuales y funciona sin Node instalado.

¿Se envía mi SVG a un servidor cuando optimizo aquí?

No. La optimización corre enteramente en tu navegador vía JavaScript sobre el markup SVG que pegas. Abre la pestaña Network en DevTools mientras optimizas; verás cero peticiones salientes. Seguro para logos propietarios, diseños de iconos no lanzados, SVG corporativos internos, y cualquier cosa sujeta a NDA.

Herramientas relacionadas