Optimalkan SVG di pipeline CI Anda dengan REST API (tidak perlu instalasi SVGO)

Ikon SVG yang diekspor dari Figma berukuran 3-5x lebih besar dari yang seharusnya. Alat desain disematkan metadata, kosong <defs> blok, atribut khusus editor, dan data jalur verbose yang tidak pernah digunakan browser. Ikon 24 piksel yang seharusnya berukuran 800 byte dikirimkan pada 3.200 byte. Kalikan dengan 50 ikon dalam sistem desain dan Anda mengirimkan 120 KB data SVG yang tidak perlu pada setiap pemuatan halaman.

Perbaikan standarnya adalah SVGO, alat Node.js yang menghilangkan pembengkakan ini. Tapi SVGO membawa 30+ ketergantungan npm ke dalam proyek atau lingkungan CI Anda. Jika frontend Anda sudah dibuat dengan Go, Rust, Python, atau HTML biasa, menginstal Node.js dan npm semata-mata untuk memperkecil SVG berlebihan.

API pengoptimal botoi SVG melakukan pekerjaan yang sama dengan satu permintaan HTTP. Tidak ada instalasi, tidak ada ketergantungan, tidak ada konflik versi. Kirim SVG mentah, dapatkan kembali versi yang dioptimalkan dengan metrik ukuran.

Satu perintah curl untuk mengoptimalkan SVG

Kirim string SVG Anda ke /v1/svg/optimize titik akhir:

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

API mengembalikan SVG yang dioptimalkan bersama dengan data ukuran sebelum/sesudah:

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

Responsnya mencakup jumlah byte SVG asli dan yang dioptimalkan, ditambah persentase disimpan. Gunakan angka-angka ini untuk melacak dampak pengoptimalan di seluruh aset Anda perpustakaan.

Alur kerja Tindakan GitHub untuk pengoptimalan otomatis

Alur kerja ini berjalan pada setiap permintaan tarik yang mengubah file SVG. Ternyata berubah SVG, mengoptimalkan masing-masing melalui API, dan mengembalikan hasilnya ke PR cabang. Peninjau melihat SVG yang dioptimalkan tanpa langkah manual apa pun.

Membuat .github/workflows/optimize-svgs.yml di repositori Anda:

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

Alur kerja hanya memproses SVG yang diubah di PR saat ini, dan mempertahankan panggilan API ke minimum. Itu --diff-filter=ACM tangkapan bendera ditambahkan, disalin, dan file yang dimodifikasi sambil melewatkan penghapusan.

Sebelum dan sesudah: perbandingan ukuran dunia nyata

Berikut adalah hasil dari menjalankan API pada SVG yang diekspor dari Figma secara umum kumpulan ikon dan ilustrasi aplikasi web:

Penghematan rata-rata pada file-file ini: 59,4%. Keuntungan terbesar datang dari ilustrasi SVG yang berisi metadata tersemat dan definisi jalur verbose. Ikon masih sederhana lihat pengurangan 55-65% karena Figma mengekspor presisi desimal dan atributnya browser mengabaikan.

Skrip pengoptimalan batch

Untuk penggunaan lokal atau integrasi ke sistem CI lainnya (GitLab CI, CircleCI, Jenkins), skrip shell ini mengoptimalkan setiap SVG dalam direktori:

Jalankan di direktori aset Anda:

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

Atur BOTOI_API_KEY variabel lingkungan untuk melewati anonim batas kecepatan 5 permintaan per menit. Tanpa kunci, skrip akan berhenti sejenak permintaan untuk tetap di bawah batas.

Alternatif: kait pra-komit

Jika Anda lebih memilih untuk mengoptimalkan SVG sebelum mencapai repositori Anda, gunakan Git kait pra-komitmen. Pendekatan ini menangkap SVG yang membengkak di mesin pengembang bukannya di CI:

Hook hanya memproses SVG yang dipentaskan untuk dikomit, sehingga tidak akan menyentuh file Anda belum berubah. Setiap file yang dioptimalkan dipentaskan ulang secara otomatis.

Apa yang dihapus selama pengoptimalan

API menargetkan data yang tidak memiliki dampak visual pada SVG yang dirender:

• Metadata penyunting: Figma, Illustrator, dan Sketch menyematkan alat khusus atribut (data-name, sketch:type) yang dilewati browser.
• Komentar XML: Alat desain menambahkan komentar seperti <!-- Generator: Adobe Illustrator 28.0 --> yang tidak ada gunanya dalam produksi.
• Grup dan def kosong: SVG yang diekspor berisi kosong <g> Dan <defs> elemen yang tersisa dari lapisan struktur dalam alat desain.
• Atribut yang berlebihan: Nilai default seperti fill-opacity="1" Dan stroke-miterlimit="4" cocok dengan default browser dan dapat dihapus.
• Presisi berlebih: Koordinat jalur dengan 8 tempat desimal (12.34567890) dibulatkan menjadi 2 (12.35) tanpa terlihat perbedaan pada resolusi layar.

Kapan mengoptimalkan SVG di tempat lain

Pendekatan API berfungsi paling baik untuk kumpulan ikon, logo, dan ilustrasi UI. Beberapa kasus dimana strategi yang berbeda lebih masuk akal:

• SVG dengan font tertanam: Jika SVG Anda berisi <text> elemen dengan font khusus, ubah teks menjadi kerangka di alat desain Anda sebelumnya mengoptimalkan. API tidak mengelompokkan atau menyematkan font.
• SVG animasi: Animasi SMIL dan animasi CSS di dalam SVG adalah dipertahankan, tetapi uji keluarannya untuk memastikan atribut waktu tetap utuh.
• SVG di atas 2 MB: Ini biasanya berisi gambar raster yang dikodekan base64. Ekstrak file tersebut sebagai file PNG/JPEG terpisah dan rujuk sebagai gantinya.