Pegar el código en su lugar
Ajustes
Menos decimales, menos peso. Por debajo de dos, mira la comprobación.
Antes y después
Código optimizado
Cómo se usa
01
Suelta el archivo
Arrástralo, elígelo o pega el código directamente. La primera vez tarda un momento en preparar el optimizador.
02
Ajusta si hace falta
Los valores por defecto son conservadores a propósito. La precisión decimal es la palanca que más pesa.
03
Mira la comprobación
Dibujamos original y resultado y los comparamos píxel a píxel. Si algo cambió, lo dice antes de que te lo lleves.
04
Descarga o copia
El archivo optimizado, listo. Si vas a incrustarlo en el HTML, el botón de copiar te ahorra el paso.
Qué se quita y qué no
Un optimizador agresivo siempre gana en la báscula. La pregunta es qué se lleva por delante, así que aquí está la política, escrita.
| Qué | Criterio |
|---|---|
| Comentarios y metadatos | Se quitan siempre. No los lee nadie salvo el editor que los escribió. |
| Datos de Illustrator, Inkscape y Figma | Se quitan siempre. Son la mitad del peso de una exportación típica. |
| Decimales de los trazados | Se recortan a la precisión que elijas. Tres decimales es invisible; cero destroza el dibujo. |
| <title> y <desc> | Se conservan por defecto: son el nombre del icono para un lector de pantalla. |
| El viewBox | Se conserva por defecto. Sin él, el SVG deja de escalar y aparece a su tamaño original. |
| Los id | Se conservan por defecto: puede haber CSS o JavaScript de tu página apuntando a ellos. |
Por qué comprobamos el resultado
Antes de construir esto probamos a escribir nuestro propio optimizador. En quince minutos comprimía casi tanto como el que usamos ahora… y estropeaba cuatro de los cinco archivos de prueba. Uno se quedó completamente en blanco: había borrado unas etiquetas internas que parecían no servir para nada, y eran justo las que le daban el color al dibujo.
Esa es la parte difícil de una herramienta así: no comprimir, sino no estropear nada. Por eso por dentro usamos SVGO, un programa libre y gratuito que lleva años acumulando soluciones para los casos raros, y por eso el resultado se dibuja y se compara antes de ofrecértelo. Comprimir es fácil; responder por el resultado es el trabajo.
Preguntas frecuentes
¿Se sube mi archivo a algún servidor?
No. El archivo se lee en tu navegador, se optimiza en tu navegador y se descarga desde tu navegador. No hay ninguna petición de red con tu contenido, ni a nosotros ni a nadie. Puedes comprobarlo abriendo la pestaña de red de las herramientas de desarrollo.
¿Qué motor usa por dentro?
SVGO, la librería de código abierto que usa medio sector para esto, con licencia MIT. No la hemos reescrito ni la escondemos: nuestro es lo que la rodea —la interfaz, los valores por defecto, y la comprobación de que el resultado se ve igual—. Es exactamente lo que hace un estudio serio: no reinventar una pieza probada, y responder por cómo se integra.
¿Por qué la primera optimización tarda un momento?
Porque el optimizador son unos 550 KB de JavaScript y no queremos que los pague quien solo entra a leer la página. Se descarga la primera vez que sueltas un archivo, y se ejecuta en un hilo aparte para que la interfaz no se congele aunque el SVG sea grande. A partir de ahí, cada optimización es inmediata.
¿Por qué conserváis <title> si SVGO puede quitarlo?
Porque un SVG sin título es un icono mudo: un lector de pantalla no tiene qué anunciar. Ahorra unos bytes y cuesta accesibilidad, así que la decisión por defecto es conservarlo. Si el SVG es puramente decorativo y va marcado con aria-hidden, quitarlo no molesta a nadie y tienes la casilla para hacerlo.
¿Qué precisión decimal conviene?
Tres decimales es la que viene puesta y es invisible en cualquier uso normal. Para iconos pequeños puedes bajar a uno o dos y ahorrar bastante más. Cero suele romper el dibujo: pruébalo y mira la comprobación, que para eso está.
La comprobación dice «diferencias mínimas». ¿Es un problema?
Casi nunca. Suele ser el suavizado de los bordes, que cambia una fracción de tono al mover un punto unas milésimas. Se marca aparte de «idéntico» para que la decisión sea tuya y no nuestra; si el SVG es un logotipo que va a ir enorme en una valla, mira la vista previa antes de darlo por bueno.
¿Puede romper algo que la comparación no vea?
Sí, y conviene decirlo: una captura no ve animaciones, ni un id al que apunte el CSS o el JavaScript de tu página, ni el comportamiento de un SVG que se usa como sprite. Por eso los id se conservan por defecto. La comprobación atrapa el fallo más común —que el dibujo cambie—, no todos los fallos posibles.
¿Y si el SVG lleva imágenes incrustadas?
Funciona igual, pero si esas imágenes vienen de otro dominio el navegador no deja leer el lienzo donde se dibujan, así que la comparación no se puede hacer y aparece marcada como «no verificable». El archivo optimizado sigue siendo válido; lo que falta es nuestra garantía de que se ve igual.
Un SVG pesa poco. Una web, no siempre
Optimizar un archivo a mano está bien. Cuando el problema es una web entera que tarda tres segundos en aparecer, lo que hace falta es medir en qué se va ese tiempo y atacarlo donde nace.
Respondemos en menos de 24 horas hábilesBogotá · UTC−5