SVG Optimizer — Optimizador de SVG

Por qué optimizar archivos SVG

Los archivos SVG exportados desde herramientas de diseño como Illustrator, Figma, Sketch o Inkscape contienen mucho más que las formas que ves. Metadatos del editor, comentarios XML, capas ocultas, valores de atributos por defecto, definiciones sin usar, decimales excesivos y grupos redundantes pueden ocupar fácilmente la mitad del archivo. Esta herramienta ejecuta SVGO —el mismo optimizador que usan la mayoría de los pipelines de compilación y las bibliotecas de iconos— para eliminar ese lastre. Los SVG más pequeños cargan más rápido, aligeran los iconos inline en tu HTML y mantienen ordenados los repositorios.

El preset predeterminado aplica decenas de transformaciones seguras: elimina la declaración XML, los comentarios, los metadatos y los namespaces de los editores, limpia los ID, acorta los colores, fusiona trazados, convierte las formas básicas en trazados compactos cuando resultan más cortos y reescribe los datos de los trazados con comandos relativos y menos dígitos. Multipass repite el proceso hasta que no encuentra más ahorro, lo que a menudo permite rascar unos puntos porcentuales adicionales.

Cómo elegir las opciones

Precision (precisión) controla cuántos decimales se conservan en los números; 2–3 es suficiente para iconos, mientras que las ilustraciones detalladas o los mapas pueden necesitar más. Remove <title> ahorra bytes, pero elimina el nombre accesible, así que consérvalo en los gráficos con significado. Remove viewBox normalmente debe quedar desactivada, porque el viewBox es lo que permite que un SVG se escale de forma responsive. Remove width/height resulta útil cuando el tamaño lo controla el CSS. Remove scripts & event handlers elimina los elementos <script>, los atributos on* y los enlaces javascript:, una buena costumbre con SVG de origen desconocido. Pretty print indenta el resultado para facilitar su lectura a costa de unos pocos bytes.

Vistas previas privadas, locales y seguras

Todo el procesamiento se realiza en tu navegador; los archivos no se suben a ningún servidor. Ambas vistas previas se muestran mediante un elemento de imagen que carga una URL blob local, y los navegadores nunca ejecutan scripts dentro de los SVG mostrados de esta forma. Compara siempre las dos vistas previas antes de usar el resultado: una precisión demasiado agresiva o la eliminación del viewBox pueden cambiar cómo se renderiza un gráfico. Los indicadores de tamaño muestran los bytes ahorrados para que puedas equilibrar el peso del archivo y la fidelidad visual.