Optimizador de SVG

¿Qué es Optimizador de SVG?

El Optimizador de SVG es una herramienta gratuita que funciona en el navegador, pensada 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 mucho peso invisible: comentarios XML, bloques de metadatos, atributos de espacios de nombres de Inkscape, Sodipodi e Illustrator, decimales redundantes y grupos envoltorio sin hijos. Esta herramienta analiza tu marcado con el propio DOMParser del navegador, aplica las limpiezas que actives y vuelve a serializar un SVG más compacto. Activa cada paso en Ajustes, fija la precisión de redondeo de coordenadas y lee las estadísticas Antes, Después y Ahorrado para confirmar la mejora. Úsalo para aligerar iconos SVG en línea, hojas de sprites, logotipos e ilustraciones, o simplemente para ordenar marcado desordenado antes de pegarlo en el código.

Cómo usar Optimizador de SVG

1. Pega o canaliza el código fuente de tu SVG en el cuadro de entrada.
2. Abre Ajustes para elegir qué limpiezas se ejecutan: redondear coordenadas, eliminar comentarios, quitar metadatos y atributos del editor, eliminar grupos vacíos.
3. Si el redondeo de coordenadas está activo, fija la precisión (0-5 decimales) para equilibrar tamaño y exactitud.
4. Lee las estadísticas de tamaño Antes, Después y Ahorrado para ver cuánto más pequeño es el resultado.
5. Copia el SVG optimizado del cuadro de salida y pégalo en tu proyecto.

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"><g></g><circle cx="5" cy="5" r="3"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="3"/></svg>

Preguntas frecuentes

¿Qué elimina exactamente el optimizador?

Según los interruptores que actives: comentarios XML, elementos <metadata>, <title> y <desc>, atributos de espacios de nombres propios del editor (como Inkscape, Sodipodi e Illustrator) y grupos (<g>) sin hijos. También puede redondear atributos numéricos y datos de trazado a un número de decimales elegido.

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

Redondear a una precisión baja puede desplazar los puntos una fracción minúscula de unidad, normalmente imperceptible, pero reduce el archivo. Sube la precisión (hasta 5 decimales) si necesitas geometría exacta, o desactiva por completo la opción de redondear coordenadas para no tocar los números.

¿Garantiza el archivo más pequeño posible?

No. Realiza limpiezas estructurales seguras (comentarios, metadatos, atributos del editor, grupos vacíos, redondeo de coordenadas) pero no fusiona trazados, no minimiza estilos ni aplica todas las transformaciones que podría hacer una biblioteca pesada. Para la mayoría de iconos y exportaciones, el ahorro que muestra la estadística Ahorrado es notable.

¿Qué pasa si mi SVG no es válido?

Si el marcado no puede analizarse como SVG, se muestra un mensaje de error y no se produce salida. Corrige el marcado (por ejemplo, equilibra las etiquetas) y el resultado se actualiza automáticamente.

¿Se sube mi SVG a algún sitio?

No. El análisis, la limpieza y la serialización ocurren de forma local 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.