Reduce el peso de tus SVGs eliminando metadatos y elementos innecesarios
Pega un SVG y pulsa Optimizar para reducir su tamaño
También podrías necesitar
Los archivos SVG exportados desde herramientas de diseño como Inkscape, Adobe Illustrator o Figma incluyen grandes cantidades de datos innecesarios para el uso web: comentarios del editor, namespaces propietarios (inkscape:, sodipodi:, dc:, cc:, rdf:), metadatos XML, elementos title y desc, grupos vacíos sin hijos ni atributos, IDs auto-generados como `path123`, y atributos style vacíos. Estos datos pueden representar entre el 20% y el 60% del tamaño total del SVG sin afectar su renderizado visual. Esta herramienta aplica optimizaciones seguras usando el DOMParser y XMLSerializer nativos del navegador: 1) elimina comentarios HTML; 2) elimina los elementos title, desc y metadata; 3) elimina todos los atributos de namespaces de editores (inkscape:*, sodipodi:*, dc:*, cc:*, rdf:*); 4) elimina grupos vacíos; 5) elimina IDs con patrones de editor (path1, layer2, etc.); 6) elimina atributos style vacíos; 7) normaliza el whitespace en atributos numéricos. Todo ocurre en el navegador — el SVG nunca abandona tu dispositivo.
¿Las optimizaciones afectan la apariencia del SVG?
Las optimizaciones aplicadas son visualmente seguras: eliminan metadatos, comentarios, namespaces de editor y IDs auto-generados que no afectan el renderizado. No modifica paths, colores, transformaciones, viewBox ni ningún atributo que controle la apariencia. Sin embargo, si tu SVG usa JavaScript interno que referencia IDs específicos como `path123`, eliminar esos IDs podría afectar la funcionalidad. En ese caso, asegúrate de que los IDs que necesitas no sigan el patrón automático.
¿Qué es SVGO y en qué se diferencia?
SVGO (SVG Optimizer) es la herramienta Node.js estándar de la industria con ~30 plugins de optimización, incluyendo optimizaciones más agresivas como simplificación de paths, merge de transformaciones y conversión de formas. Esta herramienta hace optimizaciones más conservadoras directamente en el navegador sin dependencias — ideal para optimización rápida sin instalar nada. Para optimizaciones máximas en producción, considera SVGO CLI o el plugin de Vite/webpack.
¿Por qué mi SVG no redujo mucho?
Si el SVG ya fue exportado limpio (por ejemplo, directamente desde Figma con opción 'Optimizar') o fue procesado previamente por SVGO, tendrá poco metadata que eliminar. El mayor ahorro viene de SVGs exportados desde Inkscape (que añade mucho overhead de namespaces) o de SVGs con muchos comentarios y metadatos de Adobe. Los SVGs de iconos simples suelen reducirse menos en porcentaje que SVGs de ilustraciones complejas.
¿Puedo usar el SVG optimizado directamente en HTML?
Sí. El SVG optimizado es XML válido que puedes incrustar directamente en tu HTML como SVG inline (`<svg>...</svg>`), referenciarlo con `<img src='...'>`, o usarlo en CSS como background-image. Para SVG inline, eliminar los elementos title y desc puede afectar la accesibilidad — si el SVG es informativo (no decorativo), añade `aria-label` al elemento svg o un `<title>` de accesibilidad después.
¿El resultado preserva animaciones SMIL o CSS dentro del SVG?
Sí. Las animaciones SMIL (animate, animateTransform) y los estilos CSS dentro de elementos <style> se preservan íntegramente — la herramienta no toca el contenido de los elementos de animación ni los estilos inline. Solo elimina los metadatos externos y atributos de herramientas de edición, no la lógica visual o de animación del SVG.