Otimize SVGs em seu pipeline de CI com uma API REST (não é necessária instalação de SVGO)

Os ícones SVGs exportados do Figma são 3-5x maiores do que precisam ser. Incorporação de ferramentas de design metadados, vazio <defs> blocos, atributos específicos do editor e dados de caminho detalhados que os navegadores nunca usam. Um ícone de 24px que deve ter 800 bytes é enviado em 3.200 bytes. Multiplique isso por 50 ícones em um sistema de design e você estará enviando 120 KB de dados SVG desnecessários em cada carregamento de página.

A correção padrão é SVGO, uma ferramenta Node.js que elimina esse inchaço. Mas SVGO traz Mais de 30 dependências npm em seu projeto ou ambiente de CI. Se o seu frontend for construído com Go, Rust, Python ou HTML simples, instalando Node.js e npm apenas para reduzir SVGs é um exagero.

A API do otimizador botoi SVG faz o mesmo trabalho com uma única solicitação HTTP. Sem instalações, sem dependências, sem conflitos de versão. Envie o SVG bruto e receba a versão otimizada com métricas de tamanho.

Um comando curl para otimizar um SVG

Envie sua string SVG para o /v1/svg/optimize ponto 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>"
  }'

A API retorna o SVG otimizado junto com os dados de tamanho antes/depois:

{
  "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
  }
}

A resposta inclui a contagem de bytes do SVG original e otimizado, além do percentual economizado. Use esses números para acompanhar o impacto da otimização em seu ativo biblioteca.

Fluxo de trabalho do GitHub Actions para otimização automática

Este fluxo de trabalho é executado em cada solicitação pull que modifica arquivos SVG. Encontra-se alterado SVGs, otimiza cada um por meio da API e envia os resultados de volta ao PR filial. Os revisores veem SVGs otimizados sem qualquer etapa manual.

Criar .github/workflows/optimize-svgs.yml no seu repositório:

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

O fluxo de trabalho processa apenas SVGs que foram alterados no PR atual, mantendo as chamadas de API ao mínimo. O --diff-filter=ACM flag capturas adicionadas, copiadas e arquivos modificados enquanto ignora exclusões.

Antes e depois: comparação de tamanhos no mundo real

Aqui estão os resultados da execução da API em SVGs exportados do Figma para um típico conjunto de ícones e ilustrações do aplicativo da web:

Economia média nesses arquivos: 59,4%. Os maiores ganhos vêm da ilustração SVGs que contêm metadados incorporados e definições de caminho detalhadas. Ícones simples ainda veja reduções de 55-65% porque Figma exporta precisão decimal e atributos que os navegadores ignoram.

Script de otimização em lote

Para uso local ou integração em outros sistemas de CI (GitLab CI, CircleCI, Jenkins), este script de shell otimiza cada SVG em um diretório:

Execute-o no seu diretório de ativos:

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

Defina o BOTOI_API_KEY variável de ambiente para ignorar o anônimo limite de taxa de 5 solicitações por minuto. Sem uma chave, o script faz uma pausa entre pedidos para permanecer abaixo do limite.

Alternativa: gancho de pré-confirmação

Se você preferir otimizar SVGs antes que cheguem ao seu repositório, use um Git gancho de pré-confirmação. Esta abordagem detecta SVGs inchados na máquina do desenvolvedor em vez de no CI:

O gancho processa apenas SVGs preparados para commit, portanto não tocará nos arquivos que você não mudou. Cada arquivo otimizado é reorganizado automaticamente.

O que é removido durante a otimização

A API tem como alvo dados que não têm impacto visual no SVG renderizado:

• Metadados do editor: Figma, Illustrator e Sketch incorporam ferramentas específicas atributos (data-name, sketch:type) que os navegadores ignoram.
• Comentários XML: Ferramentas de design adicionam comentários como <!-- Generator: Adobe Illustrator 28.0 --> que não servem para nada em produção.
• Grupos vazios e definições: SVGs exportados contêm espaços vazios <g> e <defs> elementos que sobraram da camada estruturas na ferramenta de design.
• Atributos redundantes: Valores padrão como fill-opacity="1" e stroke-miterlimit="4" correspondem aos padrões do navegador e podem ser removidos.
• Excesso de precisão: Coordenadas do caminho com 8 casas decimais (12.34567890) é arredondado para 2 (12.35) sem visível diferença na resolução da tela.

Quando otimizar SVGs em outro lugar

A abordagem API funciona melhor para conjuntos de ícones, logotipos e ilustrações de UI. Alguns casos onde uma estratégia diferente faz mais sentido:

• SVGs com fontes incorporadas: Se o seu SVG contiver <text> elementos com fontes personalizadas, converta texto em contornos em sua ferramenta de design antes otimizando. A API não cria subconjuntos nem incorpora fontes.
• SVGs animados: Animações SMIL e animações CSS dentro de SVGs são preservado, mas teste a saída para confirmar se os atributos de tempo permanecem intactos.
• SVGs acima de 2 MB: Eles normalmente contêm imagens raster codificadas em base64. Extraia-os como arquivos PNG/JPEG separados e faça referência a eles.