Optimizador de SVG
Minifica SVG: elimina comentarios, metadatos y restos del editor, y colapsa espacios.
Tu SVG se optimiza localmente en tu navegador y nada se sube a un servidor.
¿También necesitas reducir imágenes ráster? Prueba el Optimizador de Imágenes.
Acerca de Optimizador de SVG
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.
Ejemplo
Entrada
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<!-- heart icon -->
<title>heart</title>
<path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/>
</svg>
Salida
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/></svg>
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
Todas las herramientas de ArrayKit