File SVG Terlalu Besar? 8 Trik Kompresi dan Optimasi

SVG kerap berukuran ratusan KB bahkan beberapa MB, dan penyebabnya biasanya jangkar yang berlebihan, jalur yang tumpang tindih, metadata editor, serta presisi desimal yang terlalu tinggi. Delapan trik berikut disusun dalam urutan "dari sumber hingga penyerahan" dan semuanya bisa dijalankan.

1. Tingkat jalur: kurangi jangkar dan gabungkan jalur

Trik 1: kurangi jangkar ( sederhanakan jalur)

Semakin banyak jangkar, semakin besar file dan semakin lambat render. Saat konversi, naikkan sedikit kehalusan agar jangkar berkurang dari sumber; SVG yang sudah ada bisa dirampingkan dengan "Object → Path → Simplify" di Illustrator atau "Path → Simplify" (Ctrl+L) di Inkscape. Di tool konversi PolySVG Anda juga bisa menyeimbangkan hasil dan ukuran secara langsung dengan mengatur kehalusan serta jumlah warna.

Trik 2: gabungkan jalur dan lapisan

Gabungkan beberapa jalur dengan warna isi sama menjadi satu agar atribut berulang berkurang; ratakan pengelompokan bersarang yang tak berguna, lalu hapus lapisan tersembunyi dan elemen kosong. Di aplikasi desain, gunakan "Unite" pada pathfinder atau gabungkan lapisan sebelum mengekspor.

2. Isi berkas: buang metadata dan turunkan presisi

Trik 3: buang metadata editor

SVG yang diekspor Illustrator atau Inkscape sering membawa namespace editor, <metadata>, komentar, dan pengaturan ekspor yang sama sekali tidak memengaruhi render — hapus manual atau biarkan SVGO membersihkan otomatis. Pastikan <title> dan <desc> tetap ada, karena keduanya berguna untuk aksesibilitas.

Trik 4: turunkan presisi desimal

Koordinat jalur sering membawa 6-8 angka desimal, padahal untuk render di layar cukup 1-2. Turunkan floatPrecision menjadi 1-2 pada konfigurasi SVGO, ukuran mengecil jelas tanpa perbedaan yang kasat mata. Pada ikon kecil, jangan memampatkan koordinat berlebihan lestari bentuknya berubah.

3. Otomatisasi: kompresi sekali klik dengan SVGO

Trik 5: optimalkan otomatis dengan SVGO

SVGO adalah de facto tool standar untuk optimasi SVG, dengan puluhan plugin bawaan: menghapus komentar dan metadata, menggabungkan jalur, menyempurnakan perintah jalur, merapikan angka. Cara pemakaian dasar:

npx svgo input.svg -o output.svg

Pada berkas biasa ukurannya bisa menyusut 30%-70%. Dua hal perlu diingat: jangan menghapus atribut viewBox karena penskalaan akan rusak; dan untuk ikon yang warnanya diubah dengan CSS, pertahankan pewarisan fill, jangan menuliskan warnanya mati.

Bandingkan ukuran berkas dan ukuran transfer nyata di developer tools peramban sebelum dan sesudah optimasi untuk memastikan manfaatnya; ubah hanya satu jenis parameter tiap kali agar mudah menemukan langkah mana yang penyebabnya bila hasilnya aneh.

4. Struktur dan pemakaian ulang: simbolkan dan kendalikan lapisan warna

Trik 6: pakai ulang dengan defs dan use

Saat satu ikon muncul berkali-kali di halaman, definisikan sekali di <defs> lalu rujuk berkali-kali dengan <use>, atau buat SVG sprite; ukuran dan jumlah permintaan turun bersamaan.

Trik 7: kendalikan lapisan warna, hindari bitmap tertanam

Saat memvektorisasi, turunkan jumlah warna agar lapisan berkurang; bila bisa memakai warna polos, jangan memakai gradasi rumit. Hindari mengembed bitmap base64 di dalam SVG — itu membuat berkas vektor berubah menjadi wadah bitmap dan ukurannya lepas kendali. Jalur sisa dari konversi bisa hapus jalur titik yang tidak diinginkan setelah konversi agar jalur potong lebih bersih.

5. Penyerahan: kompresi transfer dan cache

Trik 8: aktifkan gzip/Brotli dan cache

SVG berupa teks, sehingga dengan gzip/Brotli di server ukuran transfer biasanya turun lagi 60%-80%; pasang header cache panjang untuk SVG statis. Ikon yang sangat kecil bisa langsung disisipkan inline ke HTML agar permintaan hilang. Prinsipnya dijelaskan di keunggulan SVG; bila ingin mengendalikan ukuran sejak tahap konversi, baca metode gambar ke SVG.

Urutan itu penting: kendalikan jangkar dan lapisan warna dari sumber, bersihkan metadata dan presisi di dalam berkas, lalu jalankan SVGO, dan terakhir lakukan kompresi transfer. Empat lapisan ini digabung, ukuran SVG biasanya bisa turun satu orde besaran.