Optimizador de SVG

¿Qué es Optimizador de SVG?

El Optimizador de SVG es una herramienta gratuita en el navegador para diseñadores web, autores de iconos y desarrolladores front-end que necesitan aligerar SVG escrito a mano o exportado antes de publicarlo. Los editores vectoriales añaden peso invisible: comentarios XML, bloques de metadatos, atributos de Inkscape/Sodipodi/Illustrator, decimales redundantes, transformaciones inútiles, grupos envoltorio e IDs y defs que nadie referencia. Activa o desactiva cada limpieza en Ajustes, pega el marcado o suelta un archivo .svg, observa cómo se actualizan los renders Original y Optimizado en paralelo y lee las estadísticas Antes, Después, Ahorrado, Gzip y Brotli. Copia el resultado o descárgalo como .min.svg. Úsalo para aligerar iconos en línea, hojas de sprites, logotipos e ilustraciones.

Cómo usar Optimizador de SVG

1. Pega tu SVG, o suelta/sube un archivo .svg — el marcado llena el cuadro de entrada.
2. Abre Ajustes y activa exactamente las limpiezas que quieras: redondear coordenadas, quitar comentarios, metadatos y atributos del editor, grupos vacíos, IDs y defs sin usar, combinar transformaciones, minificar estilos en línea, acortar colores hex, quitar valores predeterminados y minificar espacios.
3. Si el redondeo de coordenadas está activo, fija la precisión (0-5 decimales).
4. Compara los renders Original y Optimizado en paralelo para confirmar que el dibujo sigue bien.
5. Lee las estadísticas Antes, Después, Ahorrado, Gzip y Brotli para ver el ahorro real de tamaño.
6. Copia el SVG optimizado o descárgalo como archivo .min.svg.

Ejemplos

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

Preguntas frecuentes

¿Qué elimina exactamente el optimizador?

Con los interruptores correspondientes activados: comentarios XML, elementos <metadata>, <title> y <desc>, atributos de espacios de nombres del editor (Inkscape, Sodipodi, Illustrator), grupos vacíos, IDs que nadie referencia y <defs> sin referenciar. También puede redondear atributos numéricos y datos de trazado, combinar transformaciones inútiles, minificar atributos style y CSS de <style>, acortar colores hex (#ffffff→#fff) y quitar atributos de presentación predeterminados como fill-opacity="1".

¿Redondear las coordenadas cambiará el aspecto de mi SVG?

Redondear a baja precisión puede desplazar puntos una fracción minúscula de unidad, normalmente imperceptible pero más pequeña. Sube la precisión (hasta 5 decimales) para geometría exacta, o desactiva el redondeo para no tocar los números.

¿Puedo cargar un archivo y previsualizar el resultado?

Sí. Suelta o sube un archivo .svg (o pega el marcado) y los renders Original y Optimizado aparecen en paralelo para detectar cualquier rotura. Luego copia la salida o descarga el .min.svg optimizado — nada se sube; el archivo se lee localmente.

¿Qué significan las cifras de Gzip y Brotli?

El tamaño Gzip se mide comprimiendo realmente el SVG optimizado en tu navegador, así que refleja los bytes reales por una conexión con gzip. La cifra Brotli es una estimación derivada de ese tamaño gzip (brotli suele comprimir el texto algo más); un codificador brotli real es demasiado pesado para incluirlo, por eso se marca con una tilde.

¿Se sube mi SVG a algún sitio?

No. El análisis, la limpieza, la medición de tamaño y la serialización ocurren localmente en tu navegador con el DOMParser integrado. Nada se envía a un servidor, así que la herramienta funciona sin conexión y tu trabajo permanece privado.