Optimice los SVG en su proceso de CI con una API REST (no es necesaria la instalación de SVGO)

Los SVG de iconos exportados desde Figma son entre 3 y 5 veces más grandes de lo necesario. Herramientas de diseño integradas metadatos, vacío <defs> bloques, atributos específicos del editor y datos de ruta detallados que los navegadores nunca usan. Se envía un icono de 24 píxeles que debería tener 800 bytes. a 3200 bytes. Multiplica eso por 50 íconos en un sistema de diseño y enviarás 120 KB de datos SVG innecesarios en cada carga de página.

La solución estándar es SVGO, una herramienta de Node.js que elimina esta hinchazón. Pero SVGO trae Más de 30 dependencias npm en su proyecto o entorno de CI. Si tu interfaz está construida con Go, Rust, Python o HTML simple, instalando Node.js y npm únicamente para minimizar los SVG es excesivo.

La API del optimizador SVG de botoi hace el mismo trabajo con una única solicitud HTTP. Sin instalaciones, sin dependencias, sin conflictos de versiones. Envíe el SVG sin formato y recupere la versión optimizada con métricas de tamaño.

Un comando curl para optimizar un SVG

Envía tu cadena SVG a la /v1/svg/optimize punto final:

curl -s -X POST https://api.botoi.com/v1/svg/optimize \\
  -H "Content-Type: application/json" \\
  -d '{
    "svg": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><!-- Figma metadata --><defs></defs><g id=\\"Layer_1\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\\" fill=\\"#1a73e8\\"/></g></svg>"
  }'

La API devuelve el SVG optimizado junto con los datos de tamaño antes/después:

{
  "success": true,
  "data": {
    "optimized": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\\" fill=\\"#1a73e8\\"/></svg>",
    "original_size": 12450,
    "optimized_size": 5180,
    "savings_percent": 58.4
  }
}

La respuesta incluye el recuento de bytes del SVG original y optimizado, más el porcentaje ahorrado. Utilice estos números para realizar un seguimiento del impacto de la optimización en su activo biblioteca.

Flujo de trabajo de GitHub Actions para optimización automática

Este flujo de trabajo se ejecuta en cada solicitud de extracción que modifica archivos SVG. se encuentra cambiado SVG, optimiza cada uno a través de la API y envía los resultados al PR rama. Los revisores ven SVG optimizados sin ningún paso manual.

Crear .github/workflows/optimize-svgs.yml en tu repositorio:

name: Optimize SVGs

on:
  pull_request:
    paths:
      - '**/*.svg'

jobs:
  optimize-svgs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Find changed SVG files
        id: changed
        run: |
          FILES=\$(git diff --name-only --diff-filter=ACM origin/\${{ github.base_ref }} HEAD -- '*.svg')
          echo "files=\$FILES" >> \$GITHUB_OUTPUT
          echo "Found SVGs: \$FILES"

      - name: Optimize SVGs
        if: steps.changed.outputs.files != ''
        run: |
          TOTAL_SAVED=0
          for FILE in \${{ steps.changed.outputs.files }}; do
            SVG_CONTENT=\$(cat "\$FILE")
            PAYLOAD=\$(jq -n --arg svg "\$SVG_CONTENT" '{"svg": \$svg}')

            RESPONSE=\$(curl -s -X POST https://api.botoi.com/v1/svg/optimize \\
              -H "Content-Type: application/json" \\
              -H "Authorization: Bearer \${{ secrets.BOTOI_API_KEY }}" \\
              -d "\$PAYLOAD")

            SUCCESS=\$(echo "\$RESPONSE" | jq -r '.success')
            if [ "\$SUCCESS" = "true" ]; then
              echo "\$RESPONSE" | jq -r '.data.optimized' > "\$FILE"
              SAVINGS=\$(echo "\$RESPONSE" | jq -r '.data.savings_percent')
              ORIGINAL=\$(echo "\$RESPONSE" | jq -r '.data.original_size')
              OPTIMIZED=\$(echo "\$RESPONSE" | jq -r '.data.optimized_size')
              echo "Optimized \$FILE: \$ORIGINAL -> \$OPTIMIZED bytes (\$SAVINGS% saved)"
              TOTAL_SAVED=\$((TOTAL_SAVED + ORIGINAL - OPTIMIZED))
            else
              echo "::warning::Failed to optimize \$FILE"
            fi
          done
          echo "Total bytes saved: \$TOTAL_SAVED"

      - name: Commit optimized SVGs
        run: |
          git config user.name "github-actions[bot]"
          git config user.email "github-actions[bot]@users.noreply.github.com"
          git add '*.svg'
          git diff --cached --quiet || git commit -m "chore: optimize SVG assets"
          git push

El flujo de trabajo solo procesa los SVG que cambiaron en el PR actual, manteniendo las llamadas API al mínimo. El --diff-filter=ACM capturas de bandera agregadas, copiadas y archivos modificados mientras se salta las eliminaciones.

Antes y después: comparación de tamaños en el mundo real

A continuación se muestran los resultados de ejecutar la API en SVG exportados desde Figma para un típico Conjunto de iconos e ilustraciones de la aplicación web:

Ahorro medio en estos archivos: 59,4%. Las mayores ganancias provienen de la ilustración. SVG que contienen metadatos incrustados y definiciones de ruta detalladas. Iconos simples todavía ver reducciones del 55-65% porque Figma exporta precisión decimal y atributos que los navegadores ignoran.

Script de optimización por lotes

Para uso local o integración en otros sistemas de CI (GitLab CI, CircleCI, Jenkins), este script de shell optimiza cada SVG en un directorio:

Ejecútelo en su directorio de activos:

chmod +x optimize-svgs.sh
./optimize-svgs.sh src/assets/icons

Establecer el BOTOI_API_KEY variable de entorno para omitir el anónimo límite de velocidad de 5 solicitudes por minuto. Sin una clave, el guión se detiene entre solicitudes para permanecer por debajo del límite.

Alternativa: gancho de confirmación previa

Si prefiere optimizar los SVG antes de que lleguen a su repositorio, use Git gancho de precompromiso. Este enfoque detecta SVG inflados en la máquina del desarrollador. en lugar de en CI:

El gancho solo procesa archivos SVG preparados para confirmación, por lo que no tocará los archivos que usted no ha cambiado. Cada archivo optimizado se vuelve a organizar automáticamente.

Qué se elimina durante la optimización

La API apunta a datos que no tienen impacto visual en el SVG renderizado:

• Metadatos del editor: Herramienta de incrustación específica de Figma, Illustrator y Sketch atributos (data-name, sketch:type) que los navegadores omiten.
• Comentarios XML: Las herramientas de diseño añaden comentarios como <!-- Generator: Adobe Illustrator 28.0 --> que no sirven para nada en producción.
• Grupos vacíos y definiciones: Los SVG exportados contienen archivos vacíos <g> y <defs> elementos sobrantes de la capa estructuras en la herramienta de diseño.
• Atributos redundantes: Valores predeterminados como fill-opacity="1" y stroke-miterlimit="4" coincide con los valores predeterminados del navegador y se puede eliminar.
• Exceso de precisión: Coordenadas del camino con 8 decimales. (12.34567890) se redondean a 2 (12.35) sin visible diferencia en la resolución de la pantalla.

Cuándo optimizar los SVG en otros lugares

El enfoque API funciona mejor para conjuntos de iconos, logotipos e ilustraciones de UI. algunos casos donde una estrategia diferente tiene más sentido:

• SVG con fuentes incrustadas: Si su SVG contiene <text> elementos con fuentes personalizadas, convierta texto en contornos en su herramienta de diseño antes optimizando. La API no crea subconjuntos ni incrusta fuentes.
• SVG animados: Las animaciones SMIL y CSS dentro de SVG son conservado, pero pruebe la salida para confirmar que los atributos de sincronización permanecen intactos.
• SVG de más de 2 MB: Por lo general, contienen imágenes rasterizadas codificadas en base64. Extráigalos como archivos PNG/JPEG separados y haga referencia a ellos en su lugar.