Optimizador de SVG

Varía significativamente según la fuente. Los archivos SVG exportados desde Adobe Illustrator suelen incluir grandes cantidades de metadatos específicos de Illustrator, datos de capas, referencias de fuentes y namespaces XML que se eliminan. Las exportaciones de Inkscape incluyen sus propios namespaces del editor y comentarios. Los SVGs de Figma suelen estar más limpios. Ahorros típicos: 20-40% para SVGs ya limpios, 40-70% para exportaciones de Illustrator o Inkscape con metadatos pesados. La herramienta muestra el recuento exacto de bytes antes y después para que siempre sepa el resultado.

Las herramientas de diseño incrustan datos propietarios dentro de los archivos SVG para preservar sus propias funciones de edición: Inkscape almacena nombres de capas y posiciones de guías en los namespaces sodipodi: y inkscape:, Illustrator incrusta datos en los namespaces i: y dc:, y las herramientas más antiguas incluyen metadatos de Sketch o Adobe. Ninguno de esto es necesario para renderizar el SVG en un navegador. La eliminación de datos del editor suele producir la mayor reducción individual de tamaño, especialmente para archivos complejos de Illustrator.

La precisión decimal controla cuántos dígitos se mantienen después del punto decimal en los valores de coordenadas (por ejemplo, d="M 10.3456789 20.1234567"). Reducir de 6 a 2 convierte esos valores en d="M 10.35 20.12", ahorrando bytes a costa de un ligero redondeo de coordenadas. Para iconos e ilustraciones simples, una precisión de 2-3 es imperceptible. Para dibujos técnicos detallados o ilustraciones con curvas finas, manténgase en 4-5. Compruebe la previsualización al 100% de zoom después de reducir la precisión para detectar cualquier artefacto de redondeo.

Los elementos SVG a menudo tienen IDs extensos generados por herramientas de diseño: id="rect_123456789" o id="Layer_1_xA0_Background". La limpieza de IDs reemplaza estos nombres por otros más cortos como id="a" o id="b", ahorrando bytes en archivos SVG grandes con muchos elementos referenciados. Esto es seguro para archivos SVG independientes. Si sus IDs de SVG están referenciados por selectores CSS externos o JavaScript en su página web (por ejemplo, document.getElementById("myIcon")), desactive esta opción o actualice sus referencias después de la optimización.

Sí. Haga clic en "O pegar código SVG" para cambiar al panel de entrada de código y pegue su marcado SVG directamente. Esto es útil cuando tiene un SVG incrustado en un archivo HTML, copiado de una herramienta de diseño o generado por una biblioteca de gráficos. Después de optimizar, copie el resultado con el botón Copy Code y péguelo de nuevo donde lo necesite.

No. La herramienta utiliza la API DOMParser integrada en el navegador para analizar y limpiar el SVG completamente en su pestaña del navegador. No ocurre ninguna subida de archivos, ningún servidor procesa su SVG y nada sale de su máquina. Esto lo hace seguro para optimizar activos SVG propietarios o sensibles, como diagramas de productos o activos de marca.

Optimice antes de incluir. Los archivos SVG más pequeños significan operaciones git más rápidas, un tamaño de repositorio menor y diffs más limpios (ya que los metadatos del editor suelen cambiar en cada guardado de Illustrator). Un buen flujo de trabajo: exporte el SVG desde su herramienta de diseño, páselo por este optimizador, revise la previsualización y luego incluya la versión optimizada. Guarde el archivo fuente original en una carpeta separada de activos de diseño si necesita volver a editarlo más tarde.