Un optimizador de SVG rápido y privado
Los gráficos vectoriales escalables (SVG) son el estándar en la web para iconos e ilustraciones nítidos que no dependen de la resolución. Sin embargo, al exportar un SVG desde una herramienta de diseño, el archivo resultante rara vez está optimizado para producción. Este optimizador de SVG te permite limpiar tus gráficos vectoriales al instante, eliminando código innecesario y reduciendo el tamaño del archivo sin sacrificar la calidad visual.
Como esta herramienta se ejecuta completamente en tu navegador, tus gráficos nunca se suben a un servidor. Puedes comprimir archivos SVG de forma segura, incluso si contienen logotipos privados, diseños de productos inéditos o diagramas confidenciales. El procesamiento es instantáneo y te muestra en tiempo real cuánto espacio has ahorrado, además de una comparación visual del antes y el después para garantizar que tus gráficos se mantengan perfectamente intactos.
Por qué necesitas comprimir archivos SVG
A diferencia de las imágenes de mapa de bits (como JPEGs o PNGs) que almacenan datos de píxeles, los SVGs son esencialmente archivos de texto XML que contienen instrucciones matemáticas sobre cómo dibujar formas. Cuando los editores vectoriales generan estos archivos, suelen incluir una gran cantidad de datos innecesarios que los navegadores no necesitan para renderizar la imagen.
Las causas más comunes del exceso de tamaño en los SVG incluyen:
- Metadatos del editor: Etiquetas y atributos específicos del software que creó el archivo, utilizados solo con fines de edición.
- Comentarios y elementos vacíos: Notas de desarrolladores, grupos vacíos (
<g>) y capas ocultas que no aportan nada al resultado visual final. - Precisión excesiva: Coordenadas de trazados con seis o más decimales (por ejemplo,
14.123456), que ocupan bytes innecesarios. - Atributos predeterminados: Estilos y atributos que coinciden con el comportamiento predeterminado del navegador y no necesitan declararse explícitamente.
Al usar un minificador SVG, eliminas este texto oculto. Cuando reduces el tamaño del archivo SVG, tus páginas web cargan más rápido, consumen menos ancho de banda y mejoran el rendimiento general de tu sitio y el posicionamiento SEO.
Cómo minificar SVG online
Esta herramienta ofrece varias opciones personalizables para darte un control preciso sobre el proceso de optimización. Dependiendo de cómo planees usar el gráfico final, puedes ajustar estas configuraciones para lograr el equilibrio perfecto entre el tamaño del archivo y la legibilidad del código.
Precisión decimal
Los trazados vectoriales se dibujan usando coordenadas. El software de diseño suele exportar estas coordenadas con una precisión extrema, lo que genera largas cadenas de números. Al reducir la precisión decimal (el número de decimales), puedes disminuir drásticamente la cantidad de caracteres de tu archivo. Una precisión de 1 o 2 suele ser perfecta para iconos web. Si notas que las curvas se ven dentadas o que las formas cambian en la vista previa, simplemente aumenta el control deslizante de precisión hasta que la imagen se vea bien de nuevo.
Optimización multipasada
La optimización suele ser un proceso en capas. Eliminar un elemento innecesario puede hacer que un elemento padre quede vacío, el cual también se puede eliminar. Activar la opción "Multipasada" le indica al optimizador que ejecute sus rutinas de limpieza repetidamente hasta que el tamaño del archivo ya no se pueda reducir más. Esto garantiza el archivo de salida más pequeño posible.
Eliminar dimensiones
Por defecto, muchos SVG se exportan con atributos width y height fijos (por ejemplo, width="500px"). Aunque esto bloquea la imagen a un tamaño específico, dificulta el diseño web responsivo. Al marcar "Eliminar dimensiones", se eliminan estos atributos pero se conserva el viewBox. Esto permite que el SVG se escale de forma fluida según el CSS de su contenedor padre, facilitando mucho su uso en diseños web modernos.
Formato legible
Si tu objetivo es el tamaño de archivo mínimo absoluto, deja esta opción desmarcada. La herramienta generará una única y densa línea de código. Sin embargo, si estás limpiando un SVG que planeas editar manualmente, animar o incrustar directamente en un documento HTML, marcar "Formato legible" formateará el resultado con sangrías y saltos de línea ordenados.
Buenas prácticas para gráficos vectoriales
Optimizar tus SVG es solo un paso para crear un sitio web rápido y accesible. Al trabajar con gráficos vectoriales, ten en cuenta cómo se implementarán. Si incrustas el SVG directamente en tu HTML, minificar el archivo es crucial para reducir el tamaño del documento. También es recomendable pasar toda tu página por un Minificador de HTML o un Minificador de CSS para obtener el máximo rendimiento.
Comprueba siempre la vista previa después de optimizar. Aunque la mayoría de los SVG se comprimen sin problemas, las ilustraciones muy complejas con degradados detallados o trazados de recorte precisos pueden requerir una mayor precisión decimal para mantener su aspecto original. El visor integrado del antes y el después facilita la detección de cualquier cambio no deseado antes de descargar el archivo minificado.
Por último, aunque los SVG son perfectos para logotipos, iconos e ilustraciones planas, no son adecuados para fotografías complejas. Si tienes un SVG compuesto principalmente por imágenes rasterizadas incrustadas (como JPEG codificados en base64), la optimización tendrá poco efecto. En esos casos, es mejor convertir el gráfico por completo usando un conversor de SVG a PNG.