Pengoptimal SVG yang cepat dan privat
Scalable Vector Graphics (SVG) adalah standar untuk ikon dan ilustrasi web yang tajam dan bebas resolusi. Namun, saat Anda mengekspor SVG dari aplikasi desain, file yang dihasilkan jarang sekali optimal untuk tahap produksi. Pengoptimal SVG ini memungkinkan Anda membersihkan grafik vektor secara instan, membuang kode yang tidak perlu, dan memperkecil ukuran file tanpa mengurangi kualitas visualnya.
Karena alat ini berjalan sepenuhnya di browser, grafik Anda tidak akan pernah diunggah ke server. Anda dapat mengompres file SVG dengan aman, termasuk logo eksklusif, desain produk yang belum dirilis, atau diagram rahasia. Prosesnya berlangsung instan, menampilkan info penghematan ukuran file secara real-time serta perbandingan visual sebelum dan sesudah untuk memastikan grafik Anda tetap utuh sempurna.
Mengapa Anda perlu mengompres file SVG
Tidak seperti gambar raster (seperti JPEG atau PNG) yang menyimpan data piksel, SVG pada dasarnya adalah file teks XML yang berisi instruksi matematis tentang cara menggambar bentuk. Saat editor vektor membuat file ini, sering kali ada banyak data berlebih yang sebenarnya tidak dibutuhkan browser untuk merender gambar.
Penyebab umum membengkaknya ukuran file SVG antara lain:
- Metadata editor: Tag dan atribut khusus dari software pembuat file, yang hanya digunakan untuk keperluan pengeditan.
- Komentar dan elemen kosong: Catatan developer, grup kosong (
<g>), dan layer tersembunyi yang tidak memberikan efek apa pun pada hasil visual akhir. - Presisi berlebih: Koordinat path dengan enam angka desimal atau lebih (misalnya,
14.123456), yang memakan byte yang tidak perlu. - Atribut bawaan: Style dan atribut yang sudah sesuai dengan pengaturan bawaan browser sehingga tidak perlu dideklarasikan secara eksplisit.
Dengan menggunakan SVG minifier, Anda dapat menghapus teks tersembunyi ini. Saat Anda memperkecil ukuran file SVG, halaman web Anda akan dimuat lebih cepat, menghemat bandwidth, serta meningkatkan performa situs dan peringkat SEO secara keseluruhan.
Cara minify SVG online
Alat ini menyediakan beberapa opsi yang dapat disesuaikan untuk memberi Anda kontrol penuh atas proses optimasi. Tergantung pada rencana penggunaan grafik akhir, Anda bisa menyesuaikan pengaturan ini untuk mencapai keseimbangan sempurna antara ukuran file dan keterbacaan kode.
Presisi float
Path vektor digambar menggunakan koordinat. Software desain sering mengekspor koordinat ini dengan presisi tinggi, menghasilkan deretan angka yang panjang. Dengan menurunkan presisi float (jumlah tempat desimal), Anda dapat mengurangi jumlah karakter pada file secara drastis. Presisi 1 atau 2 biasanya sangat pas untuk ikon web. Jika Anda melihat kurva tampak bergerigi atau bentuknya bergeser di pratinjau visual, cukup naikkan slider presisi sampai gambar terlihat benar kembali.
Optimasi multipass
Optimasi sering kali merupakan proses yang berlapis. Menghapus satu elemen yang tidak perlu bisa membuat elemen induknya menjadi kosong, yang kemudian bisa ikut dihapus. Mengaktifkan pengaturan "Multipass" memerintahkan optimizer untuk menjalankan rutinitas pembersihannya berulang kali sampai ukuran file tidak dapat dikurangi lagi. Hal ini menjamin hasil akhir dengan ukuran terkecil.
Hapus dimensi
Secara default, banyak SVG diekspor dengan atribut width dan height yang di-hardcode (misalnya, width="500px"). Meskipun hal ini mengunci gambar pada ukuran tertentu, desain web responsif menjadi lebih sulit diterapkan. Mencentang "Hapus dimensi" akan menghapus atribut tersebut namun tetap mempertahankan viewBox. Ini memungkinkan SVG untuk diskalakan secara fleksibel berdasarkan CSS dari kontainer induknya, sehingga jauh lebih mudah digunakan dalam tata letak web modern.
Pretty print
Jika tujuan Anda adalah ukuran file sekecil mungkin, biarkan opsi ini tidak dicentang. Alat ini akan menghasilkan satu baris kode yang padat. Namun, jika Anda membersihkan SVG yang rencananya akan diedit secara manual, dianimasikan, atau disematkan langsung ke dalam dokumen HTML, mencentang "Pretty print" akan memformat hasilnya dengan indentasi dan jeda baris yang rapi.
Praktik terbaik untuk grafik vektor
Mengoptimalkan SVG Anda hanyalah satu langkah dalam membuat website yang cepat dan mudah diakses. Saat menggunakan grafik vektor, pertimbangkan cara penerapannya. Jika Anda menyematkan SVG secara langsung (inline) ke dalam HTML, meminifikasi SVG sangat penting agar ukuran dokumen HTML tetap kecil. Anda juga dapat memproses seluruh halaman menggunakan HTML Minifier atau CSS Minifier untuk performa maksimal.
Selalu periksa pratinjau visual setelah optimasi. Meskipun sebagian besar SVG dapat dikompresi tanpa masalah, ilustrasi kompleks dengan gradien rumit atau clipping path yang presisi mungkin memerlukan tingkat presisi float yang lebih tinggi untuk mempertahankan tampilan aslinya. Fitur pratinjau sebelum dan sesudah bawaan memudahkan Anda melihat perubahan yang tidak diinginkan sebelum mengunduh file hasil minifikasi.
Terakhir, meskipun SVG sangat cocok untuk logo, ikon, dan ilustrasi datar, format ini tidak sesuai untuk foto yang kompleks. Jika SVG Anda sebagian besar berisi gambar raster yang disematkan (seperti JPEG dengan encoding base64), optimasi tidak akan memberikan banyak pengaruh. Dalam kasus seperti ini, lebih baik Anda mengonversi gambar tersebut sepenuhnya menggunakan konverter SVG ke PNG.