Optimizador SVG - Optimizar y Minificar Archivos SVG en Línea
Optimiza, minifica y comprime archivos SVG eliminando metadatos, optimizando rutas y limpiando código redundante. Basado en SVGO, 100% del lado del cliente.
Preguntas Frecuentes
¿Qué es la optimización SVG y por qué la necesito?
La optimización SVG reduce el tamaño de archivos SVG eliminando datos innecesarios y aplicando transformaciones sin pérdida. Herramientas como Adobe Illustrator, Figma e Inkscape incrustan metadatos verbosos, espacios de nombres del editor, comentarios y datos de ruta no optimizados. Estos datos adicionales pueden hacer que los archivos SVG sean 2-5 veces más grandes de lo necesario. Optimizar SVGs mejora los tiempos de carga, reduce el ancho de banda y mejora las puntuaciones de Core Web Vitals.
¿Cómo uso esta herramienta de optimización SVG?
Hay dos formas de proporcionar entrada SVG: (1) Arrastra y suelta un archivo SVG en el área de carga, o haz clic para buscar. (2) Pega el marcado SVG directamente en el área de entrada de código. Una vez cargado, la herramienta optimiza automáticamente usando el preset predeterminado de SVGO. Puedes ajustar la optimización con el control de precisión, el modo multipaso o alternando plugins individuales.
¿Son seguros mis datos SVG? ¿Se suben archivos al servidor?
Tus datos SVG son 100% seguros y nunca salen de tu navegador. Toda la optimización se realiza del lado del cliente usando la biblioteca JavaScript SVGO. No se transmiten datos SVG a ningún servidor, no se recopilan datos y no se realiza seguimiento. Esto hace que la herramienta sea segura para activos SVG propietarios o confidenciales.
¿Cuál es la diferencia entre tamaño crudo y tamaño gzip?
El tamaño crudo es el tamaño real del archivo en bytes en disco. El tamaño gzip es el tamaño después de la compresión gzip, que es lo que los servidores web usan típicamente al transferir archivos por HTTP. El tamaño gzip representa mejor el impacto real en el ancho de banda. Esta herramienta muestra ambas métricas para que puedas tomar decisiones informadas.
¿Qué hace la configuración de precisión?
La configuración de precisión (0-8) controla cuántos decimales se preservan en los valores numéricos del SVG, particularmente en coordenadas de datos de ruta y valores de transformación. Menor precisión (1-2) produce archivos más pequeños pero puede causar distorsión visible en SVGs complejos. La precisión predeterminada de 3 es un buen equilibrio para la mayoría de los SVGs.
¿Qué es el modo multipaso?
El modo multipaso ejecuta la canalización de optimización SVGO múltiples veces hasta que no se logra más reducción de tamaño. Un solo paso puede dejar oportunidades de optimización que solo se hacen evidentes después de transformaciones anteriores. El multipaso típicamente logra una reducción adicional del 1-5% sobre el paso único.
¿Qué plugins de SVGO son seguros de usar?
Los 33 plugins del preset-default son generalmente seguros para la mayoría de los SVGs y están habilitados por defecto. Sin embargo, algunos pueden causar problemas en casos específicos: convertShapeToPath puede causar problemas con animaciones CSS; inlineStyles puede aumentar el tamaño si los estilos se comparten entre muchos elementos. Si tu SVG optimizado se ve diferente, intenta deshabilitar plugins uno por uno.
Ejemplos de Código
import { optimize } from 'svgo';
import { readFileSync, writeFileSync } from 'fs';
function optimizeSvg(svgString, options = {}) {
const { precision = 3, multipass = true, prettify = false } = options;
const result = optimize(svgString, {
multipass,
floatPrecision: precision,
js2svg: { pretty: prettify, indent: 2 },
plugins: ['preset-default'],
});
const originalSize = Buffer.byteLength(svgString, 'utf8');
const optimizedSize = Buffer.byteLength(result.data, 'utf8');
const reduction = Math.round((1 - optimizedSize / originalSize) * 100);
return { data: result.data, originalSize, optimizedSize, reduction };
}
const svg = readFileSync('icon.svg', 'utf8');
const result = optimizeSvg(svg, { precision: 2 });
console.log(`${result.originalSize} -> ${result.optimizedSize} (${result.reduction}% reduction)`);
writeFileSync('icon.min.svg', result.data);