Kompres file SVG

SVG adalah kode, bukan piksel

File SVG (Scalable Vector Graphics) adalah dokumen teks dalam XML yang mendeskripsikan bentuk: path, lingkaran, gradasi, teks. Karena berisi instruksi, bukan piksel, gambarnya tetap tajam di ukuran berapa pun, dari favicon 16 piksel hingga papan reklame. Ikon, logo, ilustrasi, diagram, dan peta di web sering berformat SVG, dan format ini sudah menjadi standar W3C sejak 2001.

Karena berupa teks, ada efek sampingnya: ukuran file bergantung pada seberapa bertele-tele editor menuliskannya, bukan pada seberapa besar gambar ditampilkan. Dua SVG yang tampil identik bisa berbeda ukuran hingga beberapa kali lipat.

Apa yang membuat file SVG lebih berat dari seharusnya

• Metadata editor. Illustrator, Inkscape, Figma, dan Sketch menambahkan namespace sendiri, nama layer, komentar ekspor, dan terkadang salinan dokumen yang bisa diedit di dalamnya.
• Presisi berlebihan. Koordinat seperti 12.483920174 padahal 12.48 tampil persis sama di ukuran realistis mana pun.
• Struktur yang mubazir. Grup kosong, layer tersembunyi, nilai atribut bawaan, definisi yang tidak terpakai, dan gaya yang bisa ditulis lebih ringkas.
• Sintaks path yang panjang. Perintah absolut padahal yang relatif lebih pendek, huruf perintah yang berulang, spasi yang tidak perlu.
• Bitmap yang disematkan. Foto yang ditempel ke dalam ilustrasi disimpan sebagai teks Base64 di dalam SVG, yang sekitar sepertiga lebih besar daripada file gambar aslinya.

Cara alat ini mengoptimalkan SVG

Alat ini menjalankan SVGO, pengoptimal SVG open source yang banyak dipakai, di browser Anda. SVGO menghapus metadata dan komentar, meringkas grup yang tidak berguna, memperpendek data path, membulatkan angka ke 3 tempat desimal secara bawaan (Anda bisa memilih 0 hingga 6), dan menggabungkan gaya, mengulangi prosesnya sampai tidak ada lagi yang berubah. Hasilnya tetap SVG biasa yang bisa dibuka di editor mana pun atau ditempel ke HTML. Dalam pengujian kami pada delapan SVG, mulai dari ikon yang dioptimalkan secara manual hingga ekspor Inkscape yang penuh data editor, penghematannya berkisar antara 8% dan 42%.

Secara teknis, optimasi ini lossy dalam arti sempit: pembulatan mengubah koordinat dalam jumlah sangat kecil, dan data khusus editor hilang, sehingga Anda tidak bisa membuka kembali file dengan semua layer aslinya. Simpan file sumber dari alat desain Anda dan anggap SVG yang sudah dioptimalkan sebagai versi publikasi.

Server biasanya mengirim SVG dengan kompresi gzip atau Brotli, yang memperkecil teks lagi dalam perjalanan ke browser. Optimasi dan kompresi server saling melengkapi, karena data yang sudah dihapus tidak perlu dikompres sama sekali.

Saat SVG yang dioptimalkan bermasalah

• CSS atau JavaScript tidak lagi menemukan elemen. Pengoptimal memperpendek atau menghapus ID dan nama class yang tampak tidak terpakai di dalam file. Jika gaya atau skrip halaman Anda menargetkannya, periksa hasilnya sebelum dipublikasikan.
• Ikon tidak lagi bisa diskalakan. SVG memerlukan atribut viewBox agar bisa berubah ukuran dengan benar. Alat ini mempertahankannya, jadi periksa apakah file aslinya memilikinya; SVG yang hanya punya lebar dan tinggi tetap memang tidak pernah bisa diskalakan dengan baik.
• Bentuk kecil tampak terdistorsi. Ikon sangat kecil yang digambar di kanvas besar bisa terpengaruh pembulatan. Ini jarang terjadi dengan presisi bawaan.
• Sebagian besar isi file adalah foto yang disematkan. Ekspor foto itu sebagai JPG atau WebP terpisah lalu tautkan, atau ubah seluruh grafik menjadi bitmap.

Pertanyaan seputar SVG

Halaman terkait

Gambar bitmap ditangani oleh kompresor gambar. Untuk latar belakang tentang apa yang berjalan secara lokal dan alasannya, lihat cara kerja.