Optimizador de SVG
Un SVG exportado desde Figma, Illustrator o Sketch es XML correcto, pero llega cargado de cosas que un navegador nunca dibuja: metadatos del editor, un comentario del generador, grupos que envuelven una sola ruta, coordenadas con cinco decimales y colores escritos en su forma larga. Este optimizador lo elimina todo de un solo pegado. Sueltas el marcado y recuperas el SVG equivalente más pequeño, con los tamaños original, optimizado y gzip mostrados en paralelo y una vista previa en vivo de ambos para confirmar que la forma quedó intacta. Es el motor svgo ejecutándose por completo en tu navegador, así que nada de lo que pegas sale de la pestaña.
- Usa el mismo motor svgo que emplean los pipelines de build, analizando el SVG en un árbol y aplicando decenas de transformaciones seguras en lugar de cortar por el texto
- Muestra los tamaños original, optimizado y gzip juntos, para que juzgues el resultado por lo que un servidor realmente envía y no por el conteo de bytes crudo
- Renderiza el SVG original y el optimizado en paralelo sobre un fondo de damero, para que veas de un vistazo que la optimización no rompió el dibujo
- Se ejecuta por completo en tu navegador, así que el SVG que pegas, incluidos logotipos e iconos sin publicar, permanece en tu equipo y desaparece al cerrar la pestaña
Resumen
Un optimizador de SVG solo merece la pena si puedes confiar en la salida y ver la ganancia. Este está construido en torno a ambas cosas: compresión precisa que puedes publicar, junto a los números y la vista previa que prueban que fue seguro.
- 01
Optimización basada en árbol
El SVG se analiza en un árbol de elementos real antes de cambiar nada, así que los metadatos, los grupos vacíos y los atributos redundantes se van mientras el dibujo queda idéntico. No hay un frágil buscar y reemplazar que se rompa con un degradado o una transformación anidada.
- 02
Decenas de transformaciones seguras
Se elimina la basura del editor, los prólogos XML y los comentarios del generador, se acortan los colores, se descartan los valores de atributo por defecto y se reescriben los datos de ruta a una forma más compacta. Cada transformación se elige para dejar el resultado renderizado sin cambios.
- 03
Un control de precisión que puedes ajustar
Las coordenadas exportadas con cinco decimales rara vez se necesitan. Redúcelas para achicar los datos de ruta y usa la vista previa en paralelo para detenerte en cuanto el detalle empiece a difuminarse.
- 04
Salida lista para responsive
Opcionalmente quita los atributos width y height para que el SVG herede el tamaño de la caja que lo contiene, la elección habitual para iconos e ilustraciones en línea que necesitan escalar.
- 05
Un desglose de tamaño fiable
Los tamaños original, optimizado y gzip se actualizan a medida que editas, junto al porcentaje exacto ahorrado. La cifra gzip es la que coincide con lo que viaja por la red.
- 06
Míralo antes de publicarlo
Cambia la salida a Vista previa y el SVG original y el optimizado se renderizan juntos sobre un damero, así una ruta de recorte rota o un relleno perdido resultan obvios antes de copiar el resultado.
Cómo usarla
Pasa de una exportación de editor inflada a un SVG esbelto y listo para producción en unos pocos pasos, con el ahorro y una vista previa siempre delante.
- 01
Pega tu SVG en el panel de entrada, o usa Subir para cargar un archivo .svg directamente desde el disco.
- 02
Elige tus opciones. Deja Multipaso activado para el resultado más pequeño, baja la Precisión mientras observas la vista previa y activa Quitar ancho/alto cuando quieras que el icono escale a su contenedor.
- 03
Cambia la salida a Vista previa para confirmar que el SVG optimizado se renderiza exactamente como el original, luego lee el desglose de tamaño para ver la ganancia.
- 04
Copia el SVG optimizado o descárgalo como archivo .svg, y colócalo en tu marcado, hoja de sprites o componente.
Detalles
Los detalles que hacen la salida segura de publicar y rápida de confiar.
- Construido sobre svgo, el optimizador de SVG estándar que trabaja sobre un árbol analizado y no por sustitución de texto, usando el mismo preset que las herramientas de build adoptan por defecto.
- El tamaño gzip se mide con la compresión integrada en tu navegador, así que la cifra refleja lo que un servidor real enviaría.
- La optimización se ejecuta mientras editas, sin un botón que pulsar y sin retraso entre cambiar una opción y ver el nuevo tamaño y la vista previa.
- Un error de análisis se muestra en el sitio con su mensaje, en lugar de producir en silencio una salida rota o vacía.
- Nada se sube ni se registra. El SVG que pegas, incluidos activos de marca sin publicar, permanece en tu navegador y desaparece al cerrar la pestaña.
Casos de uso
Dónde compensa reducir un SVG a lo esencial.
-
Iconos y logotipos en línea
Los SVG incrustados directamente en HTML o en un componente viajan en cada carga de página. Optimizarlos recorta el marcado que un navegador debe analizar y los bytes que debe descargar, en los activos que los usuarios ven primero.
-
Hojas de sprites de iconos
Un sprite que apila decenas de iconos multiplica cada byte desperdiciado. Optimizar cada símbolo antes de que entre en la hoja mantiene esbelto el archivo combinado.
-
CSS y data URIs
Cuando un SVG se incrusta como imagen de fondo o data URI, cada carácter cuenta y no puede comprimirse con gzip por separado. Un origen más pequeño es la única palanca que tienes.
-
Entrega de diseño a código
Las exportaciones directas de Figma, Illustrator o Sketch arrastran la mayor basura. Pásalas por aquí antes de que entren en el repositorio para que tus componentes partan de un marcado limpio.
Ver también
¿Necesitas un SVG de partida en lugar de reducir uno? Genera uno con elGenerador de patrones SVG , y cuando el icono va destinado a una pestaña del navegador, conviértelo a todos los tamaños necesarios con elGenerador de favicon .
Adónde van realmente los bytes de un SVG
Optimizar un SVG no es lo mismo que la compresión gzip, y no es ofuscación. Elimina marcado que un navegador no necesita mientras mantiene la imagen renderizada idéntica. Esto es lo que se va, y por qué es seguro.
-
Metadatos del editor y comentarios
Las herramientas de diseño incrustan comentarios del generador, prólogos XML, espacios de nombres privados y nombres de capa como ids. Nada de eso llega a la imagen renderizada, así que todo se elimina, salvo los comentarios reales que elijas conservar.
-
Grupos envolventes y nodos vacíos
Las exportaciones suelen envolver una sola forma en una o más etiquetas <g> que no llevan transformación ni estilo. Estas se colapsan en su hijo, y los contenedores y definiciones realmente vacíos se descartan por completo.
-
Números demasiado precisos
Una coordenada escrita como 16.00000 significa lo mismo que 16, y 13.847221 rara vez necesita más de un par de decimales en pantalla. Redondear los datos de ruta y coordenadas suele ser el mayor ahorro individual en un icono.
-
Colores en forma larga y valores por defecto
Un hex de seis dígitos como #FFFFFF se reduce a #fff o a la palabra clave, y los atributos fijados en su valor por defecto se eliminan porque el renderizador ya los asume.
-
Datos de ruta compactos
El atributo d de una ruta puede reescribirse con comandos relativos, segmentos fusionados y separadores omitidos para expresar exactamente la misma curva con muchos menos caracteres.
-
Por qué gzip es la cifra que cuenta
Los servidores envían SVG comprimido con gzip o brotli, que ya colapsan el espacio en blanco repetido. Optimizar sigue ayudando, porque elimina lo que la compresión no puede y entrega una entrada más limpia al compresor, pero juzga la ganancia real por el tamaño gzip y no por los bytes crudos.
Buenas prácticas
Hábitos que mantienen los SVG optimizados pequeños e intactos visualmente.
- Comprueba siempre la vista previa tras optimizar, sobre todo al bajar la precisión. El redondeo es donde un ajuste agresivo puede distorsionar curvas sutilmente o desalinear formas.
- Juzga la ganancia por el tamaño gzip, ya que es lo que el servidor transfiere realmente. Un gran ahorro en crudo puede reducirse a poco una vez aplicada la compresión de transporte.
- Quita width y height cuando el SVG deba escalar a su contenedor, pero consérvalos para imágenes que necesiten un tamaño intrínseco fijo, como el correo o algunos embeds sociales.
- Conserva el viewBox. Es lo que permite a un SVG escalar limpiamente, y esta herramienta lo preserva por defecto. No lo quites por unos pocos bytes extra.
- Optimiza como un paso de build o de entrega y confirma el resultado, pero mantén el origen editable en tu herramienta de diseño. Los datos de ruta optimizados no están pensados para editarse a mano.
Limitaciones
Lo que esta herramienta hace, y lo que deja a otros pasos.
- Optimiza un único documento SVG. No construye hojas de sprites, no empaqueta archivos referenciados ni inserta imágenes y fuentes externas.
- No rasteriza un SVG a PNG ni convierte entre formatos. Combínalo con el conversor de imágenes cuando necesites un mapa de bits.
- Los scripts y la interactividad dentro de un SVG se preservan pero no se analizan. La optimización apunta al dibujo, no al comportamiento del JavaScript incrustado.
- Un documento mal formado que no puede analizarse se informa en lugar de repararse, así que una entrada muy dañada no producirá una salida parcial.
Preguntas frecuentes
Preguntas frecuentes sobre optimizar SVG, qué cambia y cuándo usarlo.
¿Optimizar cambiará el aspecto de mi SVG?
Con los ajustes por defecto, no. El optimizador solo elimina marcado que un navegador no dibuja y reescribe valores a formas más cortas que significan lo mismo, así que la imagen es idéntica. Lo único a vigilar es el control de Precisión: redondear demasiado las coordenadas puede distorsionar el detalle fino, que es exactamente para lo que está la vista previa en paralelo. Baja la precisión mientras observas la vista previa y detente antes de que algo se difumine.
¿Cuál es la diferencia entre optimizar y aplicar gzip a un SVG?
Trabajan juntos. Optimizar edita el propio marcado SVG, eliminando metadatos, grupos vacíos y números demasiado precisos que un compresor no puede saber que son innecesarios. Luego gzip o brotli comprime lo que envías, colapsando la repetición en la red. Quieres ambos: optimiza primero para la entrada más limpia, luego deja que el servidor la comprima para el transporte. Juzga la ganancia real por la cifra gzip que se muestra aquí.
¿Debería quitar los atributos width y height?
Depende de cómo se use el SVG. Quitarlos y conservar el viewBox permite que el SVG escale con fluidez al contenedor que lo aloja, que es lo que normalmente quieres para iconos e ilustraciones en línea. Consérvalos cuando la imagen necesite un tamaño intrínseco fijo, como algunos clientes de correo o embeds sociales que ignoran el viewBox. La herramienta siempre preserva el viewBox de cualquier modo.
¿Cuánto se reducirá mi SVG?
Depende por completo de cómo se exportó. Los archivos directos de Figma, Illustrator o Sketch arrastran la mayor holgura y a menudo pierden de un tercio a dos tercios de su tamaño crudo, mientras que un icono ya optimizado puede recortar poco. Con gzip en juego el porcentaje se encoge, porque la compresión ya había recuperado gran parte del espacio en blanco, y por eso la cifra gzip es la honesta.
¿El viewBox es seguro? Oí que quitarlo rompe el escalado.
Aquí es seguro. El viewBox es lo que hace a un SVG independiente de la resolución, así que esta herramienta lo conserva por defecto y nunca lo quita. Solo los atributos fijos width y height son opcionales de eliminar, y hacerlo en realidad mejora el escalado en lugar de perjudicarlo.
¿Puedo optimizar un SVG con degradados, filtros o animación?
Sí. Los degradados, filtros, rutas de recorte, máscaras y la animación SMIL o CSS se leen y se preservan. El optimizador entiende la estructura del SVG, así que las definiciones referenciadas quedan intactas y sus ids se conservan donde algo apunta a ellas. Confirma siempre con la vista previa cuando un archivo se apoya mucho en tales funciones.
¿Se sube mi SVG a algún sitio?
No. Todo se ejecuta en tu navegador. El SVG que pegas, cualquier archivo que subas y el resultado se procesan localmente, nunca se transmiten ni se almacenan, y desaparecen en cuanto cierras la pestaña, así que hasta los logotipos privados y los activos de marca sin publicar están seguros.
Herramientas relacionadas
Sigue con el resto del conjunto de herramientas de datos y formatos.