Cara memperkecil ukuran file SVG tanpa merusaknya

SVG yang diekspor dari aplikasi desain sebagian besar berisi teks yang dibuang begitu saja oleh browser: metadata editor, komentar, dan koordinat yang ditulis hingga enam angka desimal. Menghapus semua itu aman. Masalahnya, dua pengaturan yang paling andal mengecilkan file juga bisa merusaknya, dan jumlah byte tidak bisa memberi tahu Anda mana yang terjadi.

Mengoptimalkan SVG dengan alat ini

1. Buka SVG optimiser. Tempel markup Anda ke kotak berlabel SVG markup, tekan Open SVG files di bawahnya, atau jatuhkan file SVG di mana saja pada halaman; beberapa file dioptimalkan bersama, masing-masing di kartunya sendiri. Kotak itu awalnya berisi contoh ikon kecil, dan baris hitungannya menyebutkan berapa karakter dan baris di dalamnya.
2. Tidak ada tombol yang perlu ditekan: setiap file dioptimalkan ulang setiap kali Anda mengubah teksnya atau pengaturan. Baca angka-angka di Result: Before, After, Saved, dan Gzipped (ukuran gzip sebelum → sesudah, “which is what ships”, yang benar-benar dikirim). Kartu setiap file menunjukkan ukuran sebelum dan sesudahnya sendiri.
3. Geser Coordinate precision (presisi koordinat). Rentangnya dari 0 hingga 6 angka desimal dan dimulai di 3. Di bawah 2, sebuah peringatan muncul di bawah slider.
4. Biarkan Run repeatedly until it stops shrinking tetap dicentang. Opsi ini aktif secara default dan mengulang optimasi sampai satu putaran tidak lagi menghemat apa pun.
5. Buka More options untuk melihat Options that can break the file (opsi yang bisa merusak file): Remove viewBox, Remove <title>, dan Shorten and drop unused ids. Semuanya tidak dicentang, dan masing-masing menyebutkan risikonya di bawah namanya. Baris di bawah More options menyebutkan mana yang aktif, dan Result menyebutkannya meski grup itu tertutup.
6. Bandingkan kedua pratinjau hasil render, berlabel Original dan Optimised. Jika keduanya berbeda, pengaturan terakhir yang Anda ubah adalah penyebabnya.
7. Tekan Download optimised SVG (atau tombol D) untuk menyimpan hasilnya, sebagai optimised.svg untuk markup yang ditempel atau logo-optimised.svg untuk file bernama logo.svg, atau Copy SVG code (atau tombol C). Dengan beberapa file, All 3 as .zip menyimpan semuanya sekaligus.

Apa yang dihapus setiap pengaturan, dan apa yang bisa dirusaknya

Pengaturan	Nilai awal	Yang dihemat	Yang bisa rusak
Komentar, metadata editor, definisi yang tidak terpakai	Selalu aktif	Byte yang mudah dibuang di ekspor aplikasi desain mana pun	Tidak ada yang terlihat
Presisi koordinat	3 angka desimal	Sebagian besar penghematan pada ekspor biasa	Kurva, di bawah 2 angka desimal
Jalankan berulang	Aktif	Apa pun yang tersisa setelah satu putaran	Tidak ada
Hapus viewBox	Tidak dicentang	Sangat sedikit byte	Kemampuan diskalakan
Hapus <title>	Tidak dicentang	Teks judul	Nama aksesibel
Persingkat dan buang id yang tidak terpakai	Tidak dicentang	String id	CSS eksternal, skrip, dan referensi <use> dari dokumen lain

Presisi adalah tempat byte berada

Presisi koordinat adalah jumlah angka desimal yang dipertahankan pada setiap angka di dalam file. Aplikasi desain biasanya menulis enam angka desimal atau lebih, dan tidak ada layar yang bisa menampilkan perbedaannya.

Contoh bawaan alat ini menunjukkan seberapa besar skalanya. Tanda centangnya digambar oleh path berikut:

M 16.000000 24.000000 L 22.000000 30.000000 L 32.000000 14.000000

String itu panjangnya 65 karakter. Keenam koordinatnya masing-masing membawa titik desimal dan enam angka nol, jadi 6 × 7 = 42 dari 65 karakter itu tidak menyatakan apa-apa. Ketika digit di belakangnya bukan nol, pada ikon yang digambar dalam ukuran sebenarnya digit-digit itu tetap hanya menggambarkan perbedaan yang jauh lebih kecil dari satu piksel, dan itulah yang dipangkas slider: tiga angka desimal adalah titik awal, dua biasanya cukup untuk ikon, dan di bawah dua kurvanya mulai terdistorsi secara kasatmata. Pratinjau berdampingan disediakan agar Anda bisa melihat hal itu terjadi, alih-alih memercayai sebuah persentase.

Dua pengaturan yang merusak file

viewBox adalah atribut yang memetakan koordinat internal sebuah gambar ke kotak apa pun tempat SVG itu digambar. Atribut inilah yang memungkinkan satu file diskalakan ke ukuran berapa pun. Hapus atribut itu, dan SVG terkunci pada atribut width dan height-nya: SVG tidak akan mengisi container atau merespons pengaturan ukuran dari CSS. Inilah penyebab paling umum ikon yang sudah dioptimalkan tampil dengan ukuran yang salah di production, padahal pengaturan itu hanya menghemat sangat sedikit byte.

Elemen <title> adalah cara screen reader memberi nama pada SVG. Hapus elemen itu, dan grafik informatif diumumkan tanpa nama apa pun. Elemen ini hanya aman dihapus dari ikon yang murni dekoratif dan sudah disembunyikan dari teknologi bantu dengan aria-hidden.

SVGO, mesin yang dijalankan alat ini, mengeluarkan kedua opsi tersebut dari preset default-nya di versi 4 justru karena alasan-alasan ini. Jika Anda membandingkan output alat ini dengan optimiser yang lebih lama dan hasil di sini sedikit lebih besar, viewBox dan title yang dipertahankan hampir selalu menjadi pembedanya. File yang lebih kecil itulah yang rusak.

Periksa id Anda secara manual

Id adalah risiko yang lebih senyap. Jika ada sesuatu di luar SVG yang merujuk ke sebuah id di dalamnya (stylesheet, skrip, atau elemen <use> di dokumen lain yang menunjuk ke dalam sprite sheet), memperpendek atau menghapus id itu akan memutus rujukannya tanpa perubahan apa pun yang terlihat di pratinjau, karena pratinjau menampilkan file itu secara terpisah.

Jadi, biarkan Shorten and drop unused ids tidak dicentang untuk file apa pun yang dirujuk oleh file lain, dan centang hanya untuk ikon mandiri, yang isinya tidak dipedulikan oleh apa pun di luar file. Untuk sprite sheet, id adalah seluruh antarmukanya.

Kotak centang itu dulu tidak selalu bekerja sesuai labelnya. Saat menulis panduan ini, kami menemukan bahwa SVGO 4.1, versi yang dijalankan alat ini, masih menyertakan pembersihan id di preset default-nya, sehingga id tetap diperpendek atau dibuang meskipun kotaknya tidak dicentang. Kini alat ini secara eksplisit mematikan pembersihan tersebut saat kotaknya kosong, dan sebuah tes di kode situs memeriksa kedua arah. Jika Anda pernah mengoptimalkan sprite sheet di sini sebelum Oktober 2026, cari id yang diandalkan situs Anda di dalam output-nya.

Byte mentah melebih-lebihkan penghematan

Server mengompresi SVG saat dikirim, dan kompresi sudah menangani pengulangan. Dua hasil yang tampak jauh berbeda sebelum dikompresi sering kali menjadi jauh lebih dekat setelah di-gzip, dan karena itulah alat ini menampilkan angka gzip di samping angka mentahnya. Jika sebuah pengaturan berisiko memberi penghematan mentah yang besar tetapi nyaris tidak ada setelah gzip, pilih file yang lebih aman.

Cara lain untuk melakukannya

SVGO juga bisa dijalankan dari command line:

npx svgo input.svg -o output.svg

Perintah itu memakai preset default SVGO. Di versi 4 dan sesudahnya, preset default mempertahankan viewBox dan elemen title, sama seperti alat ini. Untuk presisi dan pengaturan lainnya, lihat dokumentasi SVGO sendiri. Tidak ada optimiser SVG bawaan di macOS maupun Windows.

Memastikan tidak ada yang diunggah

SVGO berjalan di dalam tab. Saat halaman pertama kali mengoptimalkan sesuatu, yang langsung terjadi begitu contoh dimuat, browser Anda mengunduh kode SVGO itu sendiri, sekitar 195 KB setelah gzip; itulah satu-satunya permintaan yang akan Anda lihat di panel Network pada developer tools, dan arahnya masuk, bukan keluar. Setelah itu, Anda bisa memutus koneksi jaringan, menempel file Anda sendiri, dan alat ini tetap bekerja.

Selanjutnya

Tempel file Anda ke SVG optimiser, turunkan presisi ke dua, lalu bandingkan pratinjaunya. Jika SVG itu adalah logo yang akan dijadikan favicon, Favicon generator bisa langsung menerimanya. Jika Anda berencana menyematkannya langsung di CSS, Data URI converter akan memberi tahu apakah hal itu sepadan.