Cómo funciona la optimización de SVG
La herramienta analiza su archivo SVG directamente en el navegador mediante JavaScript, sin necesidad de enviar datos a servidores. Detecta y elimina metadatos generados por editores, comentarios ocultos y espacios innecesarios, manteniendo intactos los elementos visuales y funcionales.
Puede seleccionar la precisión de los decimales para coordenadas, lo que permite reducir el tamaño del archivo ajustando los valores geométricos. Además, la herramienta le muestra una comparación visual entre el SVG original y el optimizado, asegurando que ambos lucen igual en todos los navegadores.
Qué partes del SVG se conservan y se eliminan
Durante la optimización, IDs, clases, referencias a gradientes y filtros se mantienen para evitar afectar la funcionalidad o el diseño, especialmente en proyectos web. Los números incrustados en URLs, nombres de clase y textos no se modifican para preservar enlaces y estilos.
Puede elegir si desea conservar el elemento <title>, útil para accesibilidad y SEO. Sin embargo, elementos externos, scripts y referencias fuera del SVG no se optimizan, manteniendo la seguridad y compatibilidad del archivo.
Cuándo y cómo ajustar la precisión del SVG
Reducir la cantidad de decimales en coordenadas ayuda a bajar el tamaño del archivo, pero si el ajuste es excesivo, las curvas y detalles pueden perder calidad visual. Se recomienda comparar ambos SVGs y ajustar el nivel de precisión hasta que el resultado visual sea idéntico.
La herramienta está pensada para archivos generados por todos los editores populares, pero en SVGs con filtros o gradientes complejos, conviene revisar cuidadosamente para garantizar que se mantenga la apariencia deseada. No se realiza compresión adicional como gzip, por lo que puede combinarse con otras técnicas si busca una reducción máxima.
Preguntas frecuentes
¿Cuánto puedo reducir el tamaño de un SVG típico?
Generalmente, la reducción varía entre el 10% y el 40%, dependiendo de la cantidad de metadatos y la precisión seleccionada. SVGs muy detallados o generados por editores suelen incluir datos innecesarios que puede eliminar para ahorrar espacio.
¿El SVG optimizado se verá igual que el original en todos los navegadores?
Sí, mientras no se reduzca demasiado la precisión de las coordenadas, la apariencia será idéntica. Puede comparar ambos SVGs visualmente y ajustar el nivel de decimales para garantizar que no haya diferencias perceptibles.
¿Puedo elegir qué metadatos o elementos se mantienen?
Puede decidir si conserva el elemento <code><title></code> para accesibilidad. Los metadatos editoriales, comentarios y namespaces innecesarios se eliminan automáticamente, mientras IDs, clases y referencias importantes se preservan para no afectar el funcionamiento.
¿Es seguro optimizar SVGs con filtros y gradientes complejos?
La herramienta mantiene las referencias a filtros y gradientes, pero se recomienda revisar el resultado cuando el SVG contiene efectos avanzados. El renderizado en el navegador ayuda a asegurar que no se pierda calidad visual.
¿Funciona con SVGs exportados de cualquier editor?
Sí, puede trabajar con SVGs de los principales programas de diseño como Illustrator, Inkscape y Sketch. Si el archivo contiene datos específicos de algún editor, estos serán eliminados sin afectar el contenido gráfico.
¿Cómo afecta el redondeo de coordenadas a la calidad de iconos o ilustraciones?
El redondeo ayuda a reducir tamaño, pero si el valor es demasiado bajo, las curvas pueden volverse angulosas o perder detalles. Lo ideal es ajustar la precisión hasta que el SVG optimizado se vea exactamente igual al original.
¿Algo no funciona o tienes una idea para esta herramienta? Cuéntanos