Optimizador de SVG
Pega código SVG o suelta archivos SVG para hacerlos más pequeños. El optimizador elimina metadatos, comentarios y restos de Inkscape, Illustrator, Sketch y Figma, redondea coordenadas, compacta los datos de trazado y reduce los espacios en blanco; después muestra el tamaño ahorrado y una vista previa lado a lado para que compruebes que nada ha cambiado.
Última actualización:
| Archivo | Original | Optimizado | Ahorro | Acciones |
|---|
Cómo usar Optimizador de SVG
- Añade tu SVG: pega el código en el cuadro de entrada, o suelta o elige uno o más archivos .svg. Se carga un ejemplo para que veas primero el resultado.
- Revisa las opciones. Los valores predeterminados son seguros para casi cualquier archivo; elige una precisión numérica menor para archivos más pequeños o Conservar para coordenadas exactas.
- Comprueba la vista previa: la imagen original y la optimizada se muestran lado a lado, y la comprobación visual indica si se ven idénticas.
- Copia o descarga el SVG optimizado. Con varios archivos, haz clic en Descargar todo (ZIP).
Qué elimina y cambia el optimizador
| Opción | Antes | Después |
|---|---|---|
| Declaración XML y doctype | <?xml version="1.0"?><!DOCTYPE svg ...> | eliminado (los navegadores no lo necesitan) |
| Datos del editor | inkscape:label="Layer 1", <sodipodi:namedview>, sketch:type | eliminado |
| Precisión numérica (3) | x="20.000000" r="12.500000" | x="20" r="12.5" |
| Compactar datos de trazado | M 100.00000,48.000000 L 152.00000,92.000000 L 140,92 | M100 48L152 92 140 92 |
| Acortar colores | #FFFFFF, rgb(255,0,0) | #fff, #f00 |
| ID sin usar | <rect id="rect833"> sin referencias | <rect> |
| Grupos vacíos | <g id="g841"></g>, <g> sin atributos | eliminado o desagrupado |
| Width/height (opcional) | width="200" height="200" viewBox="0 0 200 200" | viewBox="0 0 200 200" |
Cómo se mantiene la precisión al redondear
Los trazados suelen usar comandos relativos como l 10.333 0, donde cada punto se mide desde el anterior. Redondear cada paso por separado hace que los pequeños errores se acumulen a lo largo de un trazado largo, de modo que las formas pueden desplazarse o no cerrarse. Este optimizador sigue la posición exacta y la posición redondeada a medida que avanza y redondea cada paso relativo para que el trazado redondeado siempre caiga en el punto absoluto correctamente redondeado. El resultado tiene un error máximo de medio último decimal conservado en todo el trazado, sin importar su longitud.
La precisión se cuenta en unidades de usuario del viewBox. Con un icono de 24 × 24, 3 decimales significan una precisión de 1/1000 de unidad, muy por debajo de un píxel de pantalla. Con un viewBox de 0 0 1 1 cada unidad es la imagen completa, así que conserva 4 o más decimales.
Qué se conserva a propósito
- El contenido de texto dentro de
<text>,<tspan>,<title>y de los elementos conxml:space="preserve", incluidos los espacios. - Los ID referenciados: degradados, patrones, trazados de recorte, máscaras, filtros, marcadores, destinos de
<use>, disparadores de animaciones e ID mencionados en CSS. Los ID de los elementos<symbol>se conservan siempre para que los sprite sheets SVG sigan funcionando. - La accesibilidad:
<title>,<desc>y los atributosaria-*se mantienen salvo que elijas eliminar los títulos. - Los scripts: cuando un SVG contiene un script, no se eliminan los ID, porque el script podría buscar elementos por su ID.
Preguntas frecuentes
¿Cuánto se reducirá mi SVG?
Depende de dónde venga el archivo. Los SVG exportados desde Inkscape, Illustrator o Sketch suelen reducirse entre un 30 y un 70 por ciento porque contienen metadatos del editor y decimales largos. Los archivos que ya estaban minificados quizá solo se reduzcan unos pocos puntos porcentuales.
¿Optimizar cambiará el aspecto de mi SVG?
Con la configuración predeterminada no se espera ningún cambio visible. Los números se redondean a 3 decimales y las coordenadas relativas de los trazados se corrigen para que los errores de redondeo no se acumulen. La herramienta renderiza ambas versiones y compara sus píxeles para que confirmes que el resultado se ve idéntico; si ves una diferencia, aumenta la precisión o elige Conservar.
¿Qué precisión debo usar?
Usa 3 para la mayoría de iconos e ilustraciones y 1 o 2 para ilustraciones grandes medidas en cientos de píxeles. Los viewBox diminutos, por ejemplo 0 0 1 1, necesitan más dígitos, así que elige 4, 5 o Conservar.
¿Por qué conservar el viewBox pero eliminar width y height?
Sin atributos fijos de ancho y alto, el SVG se escala al tamaño de su contenedor en CSS, lo que lo hace adaptable. El viewBox mantiene sus proporciones. Si el archivo no tiene viewBox, la herramienta crea uno a partir del ancho y el alto antes de eliminarlos.
¿Es seguro eliminar los ID?
Solo se eliminan los ID a los que nada hace referencia. Se conservan los ID usados por degradados, trazados de recorte, máscaras, elementos use, animaciones o reglas CSS; los ID de los elementos symbol se conservan siempre para los sprite sheets, y no se elimina ningún ID cuando el archivo contiene un script.
¿Debo comprimir también mi SVG con gzip?
Sí. Los servidores web suelen enviar los SVG comprimidos con gzip o Brotli, lo que normalmente los reduce otro 60 a 80 por ciento. La herramienta muestra el tamaño con gzip para que veas lo que realmente descargan los visitantes.
¿Se suben mis archivos?
No. Todo se ejecuta en tu navegador con JavaScript, así que tus archivos SVG nunca salen de tu dispositivo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.