Optimizador SVG
SVG más ligeros
SVG original
Opciones
Conservar viewBox permite redimensionar la imagen con CSS; <title> es la alternativa textual para los lectores de pantalla.
SVG optimizado
Importa o pega un SVG para optimizarlo.
Todo ocurre en tu navegador: el archivo no se envía a ningún sitio. La vista previa se muestra como imagen, así que no se ejecuta ningún script del SVG.
Acerca de la herramienta
Esta herramienta reduce el peso de los archivos SVG exportados desde Figma, Illustrator o Inkscape. Usa svgo con su configuración por defecto, que elimina metadatos, comentarios y atributos sobrantes y simplifica los trazados. Importas un archivo de hasta 5 MB o pegas el código, y comparas el tamaño antes y después, el porcentaje ahorrado y las dos vistas previas una junto a otra.
Varias opciones ajustan el resultado: varias pasadas, una precisión de 0 a 8 decimales, eliminar viewBox, width y height o la etiqueta title, y conservar los id. El SVG optimizado se copia o se descarga como .min.svg. La herramienta también lo convierte en un componente React, en JSX o TypeScript, con el nombre que elijas y las props pasadas a la etiqueta svg.
Cómo usarla
- Pulsa «Importar un archivo SVG» o pega tu código en «O pega el código SVG».
- Ajusta las «Opciones»: «Varias pasadas», «Precisión (decimales)», «Eliminar viewBox», «Conservar los identificadores (id)»…
- Revisa el tamaño «Antes» y «Después», el «Ahorro» y las dos vistas previas.
- Pulsa «Copiar» o «Descargar» para obtener el SVG optimizado.
- Para React, escribe el «Nombre del componente», marca o no «TypeScript (props tipadas)» y pulsa «Copiar el componente».
Preguntas frecuentes
¿Se envía mi SVG a un servidor?
No. svgo se carga en la página, y tanto la optimización como la conversión a React se hacen en tu navegador. El archivo no se envía a ningún sitio y la vista previa se muestra como imagen, así que no se ejecuta ningún script del SVG.
¿Conviene eliminar el atributo viewBox?
Normalmente no. viewBox permite redimensionar la imagen con CSS manteniendo sus proporciones; por eso la opción viene desactivada. Eliminar width y height suele ser más útil para un icono cuyo tamaño fijas en CSS.
¿Qué precisión debo elegir?
La precisión fija cuántos decimales se conservan en trazados y transformaciones, de 0 a 8, con 3 por defecto. Un valor más bajo ahorra más bytes, pero puede deformar los detalles pequeños: compara las dos vistas previas antes de descargar.
¿Cómo funciona la conversión a componente React?
Los atributos se renombran para JSX (class pasa a className, stroke-width a strokeWidth), los estilos en línea se convierten en objetos y se eliminan las etiquetas script y los atributos de eventos. Las props del componente se pasan a la etiqueta svg.