Sin subida, 100% local, sin cuenta

Optimizador SVG

Pega o suelta un SVG y redúcelo con SVGO. Todo permanece en tu navegador.

Cómo funciona Optimizador SVG

El optimizador SVG ejecuta SVGO (SVG Optimizer) en un Web Worker dentro de tu navegador para minificar y limpiar tus archivos SVG sin subirlos. SVGO aplica un conjunto configurable de complementos que eliminan comentarios, contraen el espacio en blanco, fusionan rutas idénticas, convierten formas a su representación más compacta y eliminan atributos sin efecto visual. El resultado es un SVG más pequeño que se renderiza de forma idéntica al original.

Los archivos SVG producidos por herramientas de diseño como Figma, Illustrator o Inkscape a menudo contienen una sobrecarga significativa: metadatos específicos del editor, grupos vacíos, atributos de transformación redundantes y declaraciones de espacio de nombres que ningún navegador necesita. El conjunto de complementos predeterminado de SVGO elimina esta sobrecarga de forma fiable. El archivo optimizado se ofrece como descarga y se muestra el porcentaje de reducción de tamaño para que puedas confirmar que la optimización valió la pena.

Escrito por Bastien Sulyan

Cómo usar Optimizador SVG, paso a paso

  1. Arrastra tu archivo SVG al área de carga o haz clic para explorar.
  2. El Web Worker de SVGO ejecuta la optimización inmediatamente con el conjunto de complementos predeterminado.
  3. Visualiza el porcentaje de reducción y los tamaños de archivo original y optimizado.
  4. Haz clic en Descargar para guardar el SVG optimizado en tu dispositivo.
  5. Si determinados complementos causan problemas de renderizado, ajusta la configuración de complementos y vuelve a optimizar.

Casos de uso comunes

  • Un desarrollador de frontend optimiza iconos exportados de Figma antes de incluirlos en un pipeline de recursos de producción, reduciendo cada icono de 4 KB a menos de 1 KB.
  • Un diseñador web limpia ilustraciones SVG exportadas de Illustrator que contienen capas de metadatos del editor invisibles en el navegador pero que inflan el archivo.
  • Un desarrollador que construye una fuente de iconos a partir de glifos SVG garantiza que cada SVG fuente esté limpio y estructurado de forma consistente antes del paso de creación de la fuente.
  • Un ingeniero de rendimiento audita SVG en línea en HTML y reemplaza cada original inflado por una versión optimizada con SVGO para mejorar el peso de la página.

Preguntas frecuentes

¿Cambiará SVGO el aspecto de mi SVG?

Los complementos predeterminados de SVGO están elegidos para ser visualmente sin pérdida: el SVG optimizado se renderiza de forma idéntica al original en todos los navegadores estándar. Algunos complementos agresivos (como los que redondean las coordenadas de ruta muy intensamente) pueden introducir diferencias de renderizado sutiles. Si notas un cambio visual, compara los archivos original y optimizado en un navegador y desactiva el complemento específico que causa el problema.

¿El archivo SVG se envía a un servidor para su optimización?

No. SVGO se ejecuta en un Web Worker dentro de tu pestaña del navegador. El texto SVG se lee desde tu disco local, se procesa en la memoria JavaScript y la salida se devuelve a la página para su descarga. El contenido del archivo no sale de tu dispositivo.

¿Cuánto más pequeño quedará mi SVG?

La reducción depende de la fuente. Los SVGs exportados de herramientas de diseño con metadatos del editor suelen reducirse entre un 30 y un 70 por ciento. Los SVGs escritos a mano que ya son compactos pueden ver solo una reducción del 5 al 15 por ciento. La herramienta muestra los recuentos exactos de bytes y el porcentaje para que puedas evaluar cada archivo individualmente.

¿La optimización afecta a las animaciones SVG o al JavaScript dentro del archivo?

La configuración conserva los elementos de animación y los atributos SMIL. Sí elimina los elementos script: la herramienta añade el complemento removeScripts encima del preset predeterminado de SVGO, porque un SVG que vas a incrustar no debería llevar código ejecutable. Algunos complementos que limpian atributos podrían interactuar con las animaciones si la animación referencia esos atributos por ID; comprueba la salida renderizada después de optimizar archivos que usan animaciones complejas.

¿Puedo optimizar varios archivos SVG a la vez?

La versión actual procesa un archivo SVG a la vez. Arrastra un archivo, descarga el resultado y luego arrastra el siguiente. El procesamiento por lotes de múltiples archivos en una sola sesión no está disponible en esta versión.

¿Qué versión de SVGO usa la herramienta?

La herramienta incluye SVGO ejecutándose en un Web Worker. La versión incluida se indica en la información de la herramienta. SVGO se mantiene activamente y la API de complementos cambió significativamente entre las versiones v1, v2 y v3; la herramienta actual usa el formato de complementos v3.

Herramientas relacionadas

Mantén todo en local, explora herramientas complementarias.

Todas las herramientas de imagen