Este optimizador de SVG minifica el marcado SVG para que tus íconos y gráficos pesen menos y carguen más rápido. Pega un SVG exportado desde Figma, Illustrator, Inkscape o Sketch y la herramienta elimina el prólogo XML, el doctype, los comentarios, los metadatos y los restos específicos del editor de Inkscape, Sodipodi y Adobe, y luego colapsa los espacios para ahorrar bytes. Opcionalmente puedes eliminar los atributos width y height de la raíz para que el viewBox mantenga el gráfico totalmente escalable en diseños responsivos. Es una alternativa a SVGO práctica y ligera para desarrolladores front-end, diseñadores y cualquiera que necesite minificar SVG o incrustar íconos en HTML, CSS o componentes de React. Todo se procesa localmente en tu navegador, y la herramienta reporta el conteo de bytes antes y después para que veas exactamente cuánto se redujo tu archivo.
Características
Elimina el prólogo XML y las declaraciones DOCTYPE que los SVG incrustados y web no necesitan
Quita los comentarios para limpiar el marcado exportado
Borra los elementos metadata, title y desc que inflan el tamaño del archivo
Limpia los restos del editor de Inkscape, Sodipodi y Adobe, incluidos los atributos con espacio de nombres
Opcionalmente elimina width y height de la raíz para que el viewBox mantenga el gráfico escalable
Colapsa los espacios y el espaciado redundante entre etiquetas
Muestra el conteo de bytes optimizado y el porcentaje ahorrado
Activa o desactiva cada limpieza para que conserves exactamente el marcado que necesitas
Cómo usar Optimizador de SVG
Pega tu código SVG en el cuadro de entrada.
Activa o desactiva las opciones de comentarios, metadatos, datos del editor, dimensiones y espacios según tus necesidades.
Lee la salida optimizada y el ahorro de bytes que se muestra encima de ella.
Copia el SVG optimizado e incorpóralo a tu proyecto.
Prólogo, comentario y title eliminados, con los espacios colapsados.
Errores comunes y solución de problemas
El gráfico desaparece o se ve del tamaño equivocado después de eliminar las dimensiones. — Eliminar width y height solo funciona cuando el SVG tiene un viewBox. Si no tiene viewBox, mantén la opción de dimensiones desactivada.
Un ID o etiqueta al que hace referencia tu CSS o JavaScript se eliminó en la limpieza. — La opción de datos del editor elimina data-name y los atributos del editor con espacio de nombres. Desactívala si tu código depende de esos enganches.
La accesibilidad se rompe porque se eliminaron title y desc. — La opción de metadatos elimina los elementos title y desc. Desactívala cuando dependas de ellos para las etiquetas de lectores de pantalla.
La salida queda vacía después de pegar. — El optimizador necesita marcado SVG real; asegúrate de haber pegado el elemento svg completo y no solo una ruta de archivo o una imagen binaria.
Preguntas frecuentes
¿Qué es el Optimizador de SVG y qué elimina?
Es un minificador de SVG en el navegador que elimina el prólogo XML, el doctype, los comentarios, los metadatos, title y desc, y los restos del editor de herramientas como Inkscape, Sodipodi y Adobe, y luego colapsa los espacios. Tú controlas cada paso con interruptores.
¿Cómo minifico un SVG con esta herramienta?
Pega tu marcado SVG en el cuadro de entrada, activa las limpiezas que quieras y luego copia la salida optimizada. El conteo de bytes y el porcentaje ahorrado aparecen encima del resultado para que confirmes la reducción.
¿Optimizar cambiará cómo se ve mi SVG?
No, la configuración predeterminada solo elimina datos no visuales y espacios. Las rutas y formas visuales se conservan, así que el gráfico renderizado se mantiene idéntico.
¿Debo eliminar los atributos width y height?
Elimínalos solo si tu SVG tiene un viewBox. El viewBox mantiene el gráfico escalable, lo cual es ideal para íconos responsivos y dimensionados con CSS.
¿En qué se diferencia el Optimizador de SVG de SVGO?
Es un optimizador ligero y sin dependencias que cubre las limpiezas más comunes de SVGO en el navegador, sin instalar una herramienta de build ni una configuración de Node.
¿Se sube mi SVG a algún lugar?
No. El Optimizador de SVG procesa tu marcado localmente en tu navegador, así que tus datos nunca salen de tu dispositivo y nada se sube a un servidor.
Herramientas relacionadas
Formateador de CSS / SCSS — Embellece o minifica CSS/SCSS/LESS, ordena propiedades y quita duplicados.
Formateador de HTML — Embellece o minifica HTML, formatea CSS/JS en línea y previsualiza el resultado.
Formateador de XML — Embellece, minifica y valida XML, y convierte XML ↔ JSON.
Formateador de JS / TS — Embellece JavaScript, TypeScript y JSX/TSX con opciones de Prettier, o minifica JavaScript simple.
Optimizador de imágenes — Recodifica y reduce imágenes (JPEG/WebP/PNG), con redimensión opcional.