Optimizador de SVG
Suelta archivos aquí o haz clic para seleccionar
- Seguro
- El procesamiento se realiza en tu dispositivo, por lo que la entrada/salida no se envía a ningún lugar.
Explicación
Analiza la estructura del SVG y elimina el marcado innecesario siempre que no afecte al renderizado. Expande estilos, optimiza las dimensiones, reduce atributos y simplifica datos numéricos y de trazado para disminuir eficazmente el tamaño sin perder calidad visual.
Qué hace la optimización
| Estilos | Siempre que sea posible, el CSS de <style> se distribuye en atributos style de cada elemento. Después puede convertirse en atributos de presentación como fill y stroke; los elementos <style> que queden vacíos y ya no sean necesarios se eliminan. |
|---|---|
| Dimensiones | Elimina las declaraciones width y height de style, además de los atributos width y height del elemento raíz <svg>. Se conserva viewBox, necesario para un renderizado adaptable. |
| Atributos | Elimina atributos innecesarios añadidos por herramientas de diseño como Figma, Adobe XD e Illustrator, por ejemplo data-name. También puede eliminar id y class si no tienen referencias o si dejan de ser necesarios al combinar o convertir elementos, como de <line> a <path>. |
| Referencias | Comprueba atributos de referencia como filter, clip-path y mask, y los elimina cuando el destino al que apuntan no existe. Las referencias válidas que afectan al aspecto se conservan. |
| Números y trazados | Compara el renderizado con distintos niveles de redondeo (floatPrecision) y elige automáticamente el más ligero que mantenga al mínimo las diferencias visuales. También simplifica datos de trazado, como el atributo d de <path>, elimina espacios y redundancias innecesarias y aplica multipass para repetir la optimización y reducir al máximo el tamaño. |
| Compatibilidad | Para evitar problemas de renderizado, se conserva viewBox. Si el SVG contiene elementos <text>, también se mantiene xml:space, que controla el tratamiento de los espacios; puede eliminarse cuando no hay <text>. En SVG con animaciones se omiten algunas optimizaciones por seguridad. El CSS complejo que resulte difícil de insertar en línea también puede conservarse para mantener el aspecto original. |
Notas
La reducción de tamaño y el resultado final pueden variar según la estructura y el marcado del SVG. Los estilos difíciles de expandir o insertar automáticamente, como selectores complejos o media queries, pueden conservarse para mantener el renderizado.
Al combinar o convertir elementos, por ejemplo de <line> a <path>, los atributos id y class de los elementos originales pueden eliminarse si dejan de ser necesarios por el cambio de estructura.
Los atributos de referencia como filter, clip-path y mask se eliminan automáticamente si el destino no existe, por ejemplo en referencias url(#...) rotas, para mantener la coherencia del SVG.
Los SVG con animaciones, como animaciones CSS o etiquetas <animate>, pueden optimizarse, pero se omiten algunas operaciones porque el comportamiento de la animación puede romperse con facilidad. Si el SVG contiene scripts (JS), la optimización puede provocar resultados inesperados.