SVG Optimizer
Understand SVG Optimizer
Elimina del marcado SVG los metadatos del editor, los comentarios y los atributos sin usar, e informa del ahorro exacto en bytes.
How it works
Un SVG exportado desde Inkscape, Illustrator, Figma o Sketch lleva gran cantidad de información que el navegador nunca lee: instrucciones de procesamiento XML, un DOCTYPE, comentarios, un bloque `<metadata>` con RDF y espacios de nombres enteros de atributos privados del editor, como `inkscape:label` y `sodipodi:docname`. Todo eso se elimina, las declaraciones `style` sencillas como `style="fill: #5C5BFE"` se promueven a atributos de presentación (`fill="#5C5BFE"`), se descartan los atributos `id` que nada del documento referencia y se colapsa el espacio en blanco entre etiquetas. Los tamaños se miden en bytes UTF-8 antes y después, así que el porcentaje mostrado es el ahorro real en la red antes de la compresión.
When to use it
- Limpiar un conjunto de iconos antes de incrustarlo en una biblioteca de componentes o de construir una hoja de sprites
- Recortar el peso de un SVG que se va a incrustar en HTML, donde cada byte está en la ruta crítica
- Eliminar el nombre del documento, los nombres de capa y los metadatos de autoría de un editor antes de publicar un archivo
- Dejar un SVG generado por una máquina lo bastante legible como para editarlo a mano
Watch out for
- Un `id` referenciado solo desde CSS o JavaScript externos parece no utilizado y se elimina. Si su hoja de estilos apunta a `#logo-path` o su script llama a `getElementById`, revise la salida antes de publicarla.
- Promover un `style` en línea a atributos rebaja su especificidad. Un estilo en línea gana a cualquier regla de la hoja de estilos; un atributo de presentación pierde frente a todas, así que una regla que antes quedaba anulada puede pasar a imponerse.
- Los datos de las rutas no se tocan. Las coordenadas no se redondean, las rutas no se fusionan y las formas no se convierten: los ahorros mayores en una ilustración detallada requieren un optimizador completo como SVGO.
- El ahorro en bytes se reduce tras gzip o brotli. Los metadatos repetitivos se comprimen bien, así que una reducción del 60 % en bruto puede quedarse en torno al 25 % en la red.
Not the right tool for: Sanear SVG no confiable. Esto es un optimizador de tamaño, no un filtro de seguridad: un SVG aceptado de un usuario puede llevar `<script>`, manejadores de eventos y `foreignObject`, y debe sanearse en el servidor antes de renderizarlo.
Frequently Asked Questions
¿Cuánto puede reducir el tamaño la optimización de un SVG?
Las reducciones habituales van del 20 % al 70 %. Los SVG exportados desde Inkscape, Adobe Illustrator o Figma contienen abundantes metadatos del editor, comentarios y atributos redundantes. Un SVG exportado de 50 KB suele quedarse en 10-20 KB tras optimizarlo, una mejora crítica en los sprites de iconos.
¿La optimización romperá las animaciones de mi SVG?
Es posible. Este optimizador elimina los atributos id que no ve referenciados por url(#id) ni por href="#id", así que el CSS o el JavaScript que apunte a un elemento por su ID puede dejar de coincidir. Las animaciones CSS basadas en clases y el SMIL del interior del archivo no se ven afectados. Revise la salida antes de sustituir un SVG animado.
¿Cuál es la diferencia entre minificar y optimizar?
Minificar solo elimina espacios en blanco y comentarios. Optimizar además reescribe el contenido: descarta los metadatos del editor, promueve propiedades de estilo simples a atributos de presentación y elimina los ID sin referencias. Esta herramienta hace ambas cosas. No fusiona rutas, ni colapsa grupos, ni convierte formas en rutas: eso lo hace SVGO.
How to Use SVG Optimizer
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.