Optimizador de SVG

El SVG Optimizer es una herramienta en línea gratuita que reduce el tamaño de los archivos SVG eliminando metadatos del editor, comentarios, atributos predeterminados y exceso de precisión. 100% en el lado del cliente, sin subidas. Funciona por completo en tu navegador, sin instalación ni registro.

No. El optimizador se ejecuta por completo en tu navegador usando el DOMParser nativo. Los archivos nunca salen de tu dispositivo.

Una heurística aproximada de ~30% del tamaño en texto plano, típica para un marcado SVG bien estructurado. La compresión real de la CDN puede variar ligeramente.

Esos son la forma principal en que los lectores de pantalla anuncian el contenido SVG. Consérvalos para recursos públicos o de interfaz; elimínalos solo de imágenes puramente decorativas.

Sí, el SVG Optimizer es 100% gratis, sin registro, sin tarifas ocultas y sin límites de uso. Todo el procesamiento se realiza localmente en tu navegador, garantizando una privacidad total.

Por supuesto. El SVG Optimizer procesa todo en el lado del cliente, dentro de tu navegador. No se sube ni se almacena ningún dato en ningún servidor. Tu contenido permanece privado en tu dispositivo en todo momento.

Sí, el SVG Optimizer es totalmente adaptable y funciona en smartphones y tablets. Puedes usarlo en cualquier dispositivo con un navegador web moderno, sin necesidad de descargar ninguna app.

No se necesita ninguna cuenta ni registro. Simplemente abre el SVG Optimizer en tu navegador y empieza a usarlo de inmediato. No hay muros de registro ni restricciones de uso.

El SVG Optimizer admite una amplia gama de formatos y lenguajes populares. Consulta la interfaz de la herramienta para ver la lista completa de opciones disponibles.

Solo tienes que introducir tu entrada en el campo indicado, ajustar la configuración a tu gusto y la herramienta la procesará al instante. Después puedes copiar el resultado al portapapeles o descargarlo.

Un compresor de imágenes normal trabaja sobre formatos rasterizados como PNG y JPEG, descartando datos de píxeles para reducir el archivo. Un SVG no está hecho de píxeles en absoluto: es texto XML que describe formas, así que no hay nada que comprimir en el sentido fotográfico. Un optimizador de SVG, en cambio, reescribe ese texto: elimina los caracteres que el navegador nunca necesita, como los metadatos del editor, los comentarios, la declaración XML, los espacios de nombres redundantes y las coordenadas con hasta doce decimales. Como el SVG es texto plano, cada carácter eliminado es un byte real menos en la red, y la imagen se sigue renderizando idéntica píxel por píxel, ya que la geometría no se toca. Eso hace que el ahorro sea sin pérdida, a diferencia de la compresión rasterizada, que sacrifica calidad por tamaño. Pega tu código arriba y la herramienta te indicará exactamente cuántos bytes eliminó cada pasada de limpieza.

Para casi todos los gráficos web, con dos o tres decimales es más que suficiente. Las aplicaciones de diseño suelen exportar coordenadas como 100.000000 o 50.987654321, pero una pantalla renderiza en píxeles enteros, así que los dígitos a partir del tercero rara vez cambian un solo píxel visible mientras inflan el archivo. Esta herramienta usa por defecto una precisión de tres y te permite elegir entre uno y seis dígitos, redondeando cada atributo numérico y cada coordenada de trazado a ese límite, recortando los ceros finales y eliminando el cero inicial en valores como 0.5. Baja a uno o dos dígitos en iconos pequeños, donde el ahorro es mayor; conserva cuatro o más solo en ilustraciones muy grandes o dibujos técnicos precisos, donde el redondeo podría desplazar visiblemente una curva. Usa la vista previa lado a lado para confirmar que la forma sigue viéndose bien después de bajar la precisión.

Sí, siempre que el optimizador sea inteligente respecto a qué IDs están realmente referenciados, y este lo es. Antes de eliminar nada, escanea todo el documento en busca de IDs señalados por url(#id), href="#id" y xlink:href="#id", que es como los gradientes, filtros, clip paths y elementos <use> se enlazan entre sí internamente. Solo se eliminan los IDs que nada referencia, así que los que dependen de tu CSS, tus animaciones o tus símbolos reutilizables se conservan. El riesgo a vigilar son las referencias externas: si tu JavaScript o una hoja de estilos en otro archivo apunta a un elemento SVG por su id, la herramienta no puede verlo y podría eliminarlo. En iconos independientes rara vez es un problema, pero si manipulas tus SVG con scripts, revisa el resultado o deja desactivado el interruptor "Eliminar IDs sin usar". Pruébalo arriba y revisa la pestaña de diferencias.

Todo atributo de presentación de SVG tiene un valor por defecto definido por la especificación, y el navegador lo aplica siempre que el atributo está ausente. Así que fill-opacity="1", stroke-width="1", stroke-linecap="butt" y opacity="1" describen el valor que el elemento ya tendría aunque no escribieras nada. Incluirlos es inofensivo, pero es puro peso muerto: el resultado renderizado es idéntico byte a byte con o sin ellos. Los editores añaden estos atributos explícitos porque serializan el estado computado completo de un elemento, no el mínimo necesario para dibujarlo. Este optimizador conoce los valores por defecto de la especificación y elimina cualquier atributo cuyo valor coincida con el suyo, lo que se acumula rápidamente en un set de iconos donde los mismos atributos redundantes se repiten en cada forma. Una advertencia: elimina los valores por defecto solo cuando nada los sobrescriba mediante CSS, ya que un atributo eliminado puede dejar que un estilo heredado tome el control. Pega tu archivo para ver la limpieza en acción.

SVGO es el popular optimizador de línea de comandos basado en Node que se ejecuta como parte de un paso de compilación, configurado mediante plugins y archivos de configuración. Esta herramienta cubre las mismas limpiezas de alto valor —eliminar metadatos del editor, comentarios, atributos por defecto, espacios de nombres e IDs sin uso, y redondear la precisión— pero se ejecuta enteramente en tu navegador, sin instalación, sin configuración y sin terminal. Eso la hace ideal para limpiezas puntuales: un logotipo que un cliente acaba de enviar por correo, un icono que tomaste de Figma, o un código que quieres inspeccionar antes de confirmarlo. Tienes catorce interruptores individuales, una vista previa en vivo de antes y después sobre un fondo a cuadros, y una comparación byte a byte, para que veas exactamente qué cambió en lugar de confiar en un resultado de compilación silencioso. Para un pipeline de assets recurrente, la automatización con SVGO sigue siendo la mejor opción; para una optimización interactiva rápida, pega tu SVG arriba y descarga el resultado.