Tus archivos nunca salen de tu dispositivo

Optimizador de SVG

La optimización se ejecuta por completo dentro de tu navegador. Varios archivos a la vez y vista previa antes/después.

0 B subidos — esta página no ha enviado tus archivos a ningún sitio?

Ni lo que escribes ni los archivos que eliges salen de aquí — todo se ejecuta dentro de esta página y ninguna petición lleva tu contenido a un servidor.

Otras herramientas envían lo que escribes a un servidor y lo procesan allí. Aunque prometan borrarlo después, mientras tanto tu contenido está en la máquina de otra persona. Aquí no existe el paso de envío. Cuanto más delicado sea el contenido — contraseñas, cláusulas de contrato, notas privadas — mayor es la diferencia. Cómo comprobarlo →

Reduce los SVG exportados desde herramientas de diseño sin cambiar cómo se ven

Los SVG guardados desde Illustrator, Figma, Sketch o Inkscape llevan mucho más que el dibujo. Esta herramienta quita ese material sobrante con las reglas predeterminadas de SVGO, un optimizador de código abierto muy usado, y muestra el tamaño antes y después junto a una vista previa lado a lado. Puedes procesar varios archivos a la vez y tus logotipos nunca se suben.

Un poco más a fondo

Un SVG es un archivo de texto, escrito en XML, que describe una imagen como coordenadas de puntos y curvas. Los editores agregan mucho que el navegador no necesita para dibujarla: comentarios con el nombre del programa, atributos propios del editor como los nombres de capa, bloques de metadatos, definiciones e ID sin uso y coordenadas con decimales larguísimos. Al quitar todo eso, la misma imagen se expresa con menos bytes. Los archivos recién exportados de una herramienta de diseño suelen reducirse entre un 30 % y un 70 %; los que ya estaban limpios pueden cambiar muy poco.

El optimizador aplica las reglas predeterminadas de SVGO una y otra vez hasta que una pasada ya no cambia nada. En concreto, #ff0000 se acorta a red, las coordenadas se redondean a tres decimales y figuras como los rectángulos se reescriben como trazados más cortos. Se eliminan los elementos ocultos con display:none, los ID sin uso y el elemento title, y los ID que sí se usan reciben nombres cortos como a y b. No hay interruptores para reglas sueltas, y tampoco es un filtro de seguridad: los elementos script y atributos como onclick se quedan donde están.

Cómo se usa

Cuándo ayuda

Logotipos e iconos de un sitioReduce el logotipo del encabezado y los iconos de la interfaz para que haya menos que descargar antes de que aparezca la página.
Iconos insertados en el códigoOptimiza el código pegado y usa Copiar para llevar el resultado a tu HTML o a un componente de React con una fuente más corta.
Ordenar un juego de iconosSuelta de una vez decenas de iconos que te pasó un diseñador y usa Guardar todo antes de subirlos al repositorio.
Limpiar archivos antes de entregarlosQuita comentarios del editor, nombres de capa y bloques de metadatos de los gráficos antes de mandarlos a un cliente o publicarlos.

Tropiezos comunes

Al cambiar el tamaño con CSS, la imagen se recorta en vez de escalar.Cuando el original tiene width y height más un viewBox equivalente, las reglas predeterminadas quitan el viewBox. Sin él, el dibujo ya no se ajusta al tamaño, así que copia el atributo viewBox del original y vuelve a ponerlo en el elemento svg del resultado.
Mi sprite de iconos quedó casi vacío.Un sprite guarda los iconos en símbolos con ID que solo se usan desde otras páginas. Dentro del archivo esos ID parecen sin uso, así que se eliminan y los símbolos se van con ellos. El mismo cambio de nombres rompe el CSS o los scripts que buscan un elemento por su ID. Para esos archivos, ejecuta SVGO por tu cuenta con una configuración que conserve los ID.
Aparece “La optimización ha fallado” con un mensaje como “Unexpected close tag”.El archivo no es XML bien formado, a menudo porque una etiqueta quedó sin cerrar o solo se copió parte del código. Abre el original en el navegador; si ahí también da error, vuelve a exportarlo desde tu editor.
Se ignora el código pegado, o Guardar todo solo guardó algunos archivos.Mientras haya archivos en la lista, el cuadro de pegado no se usa; quítalos con ✕ y presiona Optimizar otra vez. Si Guardar todo se detiene a medias, es posible que tu navegador esté pidiendo permiso para descargar varios archivos; acéptalo y vuelve a presionar el botón.

Consejo Antes de usar un resultado, compara con calma las vistas Original y Optimizado en bordes, textos y degradados, y quédate con el original de cualquier archivo donde notes una diferencia.

Preguntas frecuentes

¿Qué se optimiza exactamente?

Se aplican las reglas predeterminadas de SVGO, el optimizador de SVG de código abierto más usado, en varias pasadas. Elimina metadatos del editor, comentarios y elementos ocultos, redondea coordenadas, fusiona trazados y acorta los colores. Los archivos exportados directamente desde una herramienta de diseño suelen reducirse entre un 30 % y un 70 %; los que ya están limpios pueden reducirse muy poco. Las reglas predeterminadas también quitan algunas cosas además del dibujo: consulta más abajo “¿Y si la imagen optimizada se ve distinta?”.

¿Se suben mis archivos a algún sitio?

No. Todo se ejecuta dentro de tu navegador y tus archivos no se suben a ningún sitio. Seguro incluso para logotipos e iconos aún sin publicar.

¿Y si la imagen optimizada se ve distinta?

Además del dibujo, las reglas predeterminadas cambian lo siguiente. viewBox: si width y height coinciden con el viewBox, el viewBox se elimina, así que al cambiar el tamaño con CSS el dibujo puede recortarse en vez de escalarse. <title>: se elimina el título que leen los lectores de pantalla. ID: los ID que no se usan dentro del archivo se eliminan y los demás se acortan, así que un archivo de sprites que se usa desde fuera como archivo.svg#id, o el CSS y los scripts que apuntan a esos ID, pueden dejar de funcionar. Revisa la vista previa antes/después, aunque puede no mostrar nada de esto: para archivos de ese tipo, quédate con el original.

¿Se pueden procesar varios archivos?

Sí. Selecciona varios y se optimizan de una vez; después puedes guardarlos uno a uno o con [Guardar todo].