Optimización de SVG y flujo de trabajo con Data URI

Los iconos SVG inline y los assets UI pequeños suelen llegar con espacios extra, metadatos del editor o markup riesgoso. Puedes optimizar SVG como texto en el navegador y copiar fragmentos Data URI sin subir archivos.

Cuándo optimizar SVG

Optimiza cuando necesitas:

• Archivos sprite o icono más pequeños antes del commit
• Un URI data:image/svg+xml para background-image en CSS
• Un fragmento SVG limpio para documentación o ejemplos de componentes

Omite la optimización cuando aún necesitas formato legible para edición manual — usa el modo Safe primero.

Flujo de trabajo local

1. Copia SVG desde tu export de diseño, componente o sprite sheet.
2. Abre SVG Optimizer.
3. Pega el markup o sube un archivo .svg.
4. Revisa la pre-comprobación de seguridad para <script>, atributos de eventos o URLs externas.
5. Ejecuta optimización Safe por defecto.
6. Copia SVG optimizado, Data URI codificado en URL o fragmento CSS background-image.

Safe vs Aggressive

• Safe mantiene viewBox, title, desc, role y aria-* cuando es posible.
• Aggressive minifica más y puede eliminar metadatos útiles para accesibilidad.

Nota de seguridad

Trata el SVG pegado como código, no como texto inofensivo. Esta herramienta no renderiza SVG en la página, pero aún debes revisar patrones de alto riesgo antes de usar la salida en producción.

Herramientas relacionadas

• Base64 — inspecciona o convierte otros payloads codificados.
• CSS Unit Converter — combina fondos Data URI con cálculos de layout.
• Image Compressor — compresión de bitmap cuando SVG no es el formato adecuado.