Optimizador de SVG
Un SVG exportado desde una herramienta de diseño es, en buena parte, algo que no dibuja. Trae los metadatos del editor, un bloque de comentarios, nombres de capas, coordenadas con seis decimales y atributos que repiten los valores por defecto. Esto ejecuta SVGO — el mismo optimizador que usan las herramientas de compilación — sobre lo que pegues o sueltes, y muestra el resultado junto al original: el marcado nuevo, el tamaño antes y después, cuánto queda una vez comprimido con gzip (que es lo que un servidor envía de verdad) y ambas versiones dibujadas para ver de un vistazo que nada se ha roto. Los interruptores son los que importan en la práctica: la precisión de las coordenadas, si conservar los IDs a los que tu CSS o tu JavaScript puedan referirse, y si quitar el ancho y el alto para que el icono se adapte a su contenedor. Todo ocurre en la página; el archivo nunca se sube.
Todo ocurre en tu navegador: el archivo nunca se sube.
Cómo usar
- Pega tu SVG en el cuadro, o suelta un archivo .svg encima.
- Pulsa Optimizar. Debajo aparecen el tamaño, el tamaño con gzip y ambos dibujos.
- Baja la precisión si el archivo sigue siendo grande: 1 o 2 decimales suele ser invisible.
- Activa «Conservar IDs» si tu CSS o tu JavaScript apuntan a elementos dentro del SVG.
- Copia el resultado o descárgalo como .svg.
Preguntas frecuentes
- ¿Se sube mi SVG a algún sitio?
- No. SVGO se ejecuta dentro de la pestaña del navegador, sobre el texto del cuadro. No se envía nada a ningún servidor y, al cerrar la pestaña, no queda ninguna copia.
- Las dos vistas previas se ven idénticas. ¿Es lo esperado?
- Sí, de eso se trata. Optimizar elimina lo que no dibuja y reescribe lo que sí en una forma más corta. Si las vistas difieren, algo del archivo dependía de lo que se quitó: sube la precisión o conserva los IDs y prueba otra vez.
- ¿Cuándo debo conservar los IDs?
- Cuando algo fuera del SVG se refiere a ellos: CSS como `#icon-star path`, JavaScript que llama a getElementById, o un `<use href="#…">` en otro archivo. Por defecto SVGO acorta los IDs para ahorrar bytes, y eso rompe esas referencias. Dentro de un archivo autocontenido, las referencias internas se actualizan a la vez y siguen siendo correctas de cualquier modo.
- ¿Qué hace en realidad el control de precisión?
- Redondea los números de los datos de trazado. Una coordenada como 12.345678 pasa a 12.346 con 3 y a 12.3 con 1. Para un icono en pantalla, uno o dos decimales suelen ser indistinguibles y pueden reducir un trazado a la mitad. En una ilustración grande o muy ampliada, redondear demasiado se nota como ondulación en las curvas.
- ¿Por qué mostrar el tamaño con gzip?
- Porque es lo que realmente viaja. Los servidores comprimen el SVG, y el recuento de bytes en crudo exagera el ahorro: quitar espacios repetidos parece espectacular en disco y apenas cuenta después de gzip. El par comprimido es la comparación honesta.
- ¿Debería quitar el ancho y el alto?
- Quítalos si el SVG va en línea y lo dimensiona el CSS: así llena la caja que le des. Consérvalos si va en una etiqueta `<img>` o donde el navegador necesite un tamaño intrínseco, o podría dibujarse en un tamaño por defecto. El viewBox se conserva siempre; sin él el dibujo se quedaría sin sistema de coordenadas que escalar.
Herramientas relacionadas
Comprimir PDF
Reduce un PDF reencodificando las imágenes que lleva dentro. El texto sigue siendo seleccionable y buscable. No se sube nada.
Compresor de Imágenes
Comprime y redimensiona imágenes JPEG, PNG y WebP en tu navegador.
Minificador HTML / CSS / JS
Quita espacios y comentarios de HTML, CSS o JavaScript — ve el tamaño ahorrado y copia el resultado.
Conversor SVG → PNG
Rasteriza SVG a PNG a cualquier tamaño, con fondo transparente o sólido, todo en el navegador.
Recortar audio
Corta un fragmento de un archivo de audio arrastrando sobre su onda, añade fundidos y descárgalo en WAV. No se sube nada.
Inspector de archivos HAR (visor de HTTP Archive)
Suelta un archivo .har exportado de DevTools de Chrome / Firefox / Safari y verás al instante cada solicitud — método, estado, tamaño, tiempo, tipo de contenido — con estadísticas, tablas de más lentas/más grandes y entradas filtrables / ordenables. Todo se ejecuta en tu navegador.