Pengoptimal SVG (SVGO)
Optimalkan dan minify kode SVG dengan SVGO di browser Anda. Menghapus metadata editor, komentar, dan markup berlebih serta menampilkan penghematan ukuran dengan pratinjau.
Memakai preset default SVGO yang mempertahankan viewBox, judul, dan deskripsi aksesibilitas.
Berjalan sepenuhnya di browser Anda. Data Anda tidak pernah diunggah.
Apa itu Pengoptimal SVG?
Pengoptimal SVG menjalankan SVGO, library optimasi SVG standar, pada kode SVG Anda. Alat ini menghapus metadata editor, komentar, elemen tersembunyi dan kosong, memperpendek data path, angka, dan warna, serta menggabungkan apa yang bisa digabung. Anda mendapatkan kode yang sudah dioptimalkan, pratinjau sebelum/sesudah, dan besarnya pengurangan ukuran.
Cara menggunakan Pengoptimal SVG
- Tempel kode SVG ke Kode SVG, atau letakkan/pilih file
.svg. - Sesuaikan opsi: Beberapa lintasan (hasil lebih kecil), Presisi angka (desimal), Pertahankan ID, Ganti width/height dengan viewBox (responsif), Rapikan keluaran.
- Bandingkan pratinjau sebelum/sesudah dan lencana ukurannya.
- Salin SVG yang sudah dioptimalkan atau unduh sebagai
name-min.svg.
Contoh
100×100 SVG from an editor with an XML declaration, a comment, <metadata>, empty <defs> and a nested <g> around a rect (474 bytes)
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M10 10h80v80H10z" style="fill:red;stroke:none"/></svg>
Kapan menggunakan Pengoptimal SVG
Gunakan pada ikon, logo, dan ilustrasi yang diekspor dari Figma, Illustrator, Inkscape, atau Sketch sebelum dipakai di situs web atau aplikasi. Aktifkan Pertahankan ID jika CSS, JavaScript, atau referensi <use> di tempat lain bergantung pada ID elemen. Selalu periksa pratinjau: SVG yang tidak biasa dengan skrip atau referensi eksternal mungkin perlu penyesuaian manual.
Cara kerja Pengoptimal SVG
Alat ini memuat build browser SVGO 4 sesuai kebutuhan dan menerapkan plugin preset-default-nya: menghapus deklarasi XML, doctype, komentar, metadata, dan namespace editor, membersihkan atribut dan nilai numerik, mengonversi bentuk menjadi path, meruntuhkan grup, menulis ulang data path dan transform, dan lainnya. Preset default SVGO 4 mempertahankan viewBox, <title>, dan <desc> yang bukan dari editor, sehingga penskalaan dan aksesibilitas tetap terjaga. Dengan multipass, plugin diulang hingga output tidak mengecil lagi.
Kasus Penggunaan Umum
- Memperkecil ikon yang diekspor dari alat desain sebelum dimasukkan ke component library.
- Merapikan logo SVG agar bisa disematkan inline di HTML.
- Memperkecil sprite SVG agar halaman lebih cepat dimuat.
- Menghapus metadata editor yang membocorkan path file atau nama penulis.
Catatan Keamanan
Gambar didekode, diproses, dan di-encode secara lokal di browser Anda dengan Canvas API. Tidak ada yang diunggah ke server.
Pertanyaan Umum
Apakah optimasi SVGO lossless?
Dengan preset default, hasilnya lossless secara visual di hampir semua kasus. Menurunkan presisi angka terlalu jauh (0–1 desimal) bisa menggeser bentuk kecil, jadi bandingkan pratinjaunya.
Mengapa CSS saya berhenti berfungsi setelah optimasi?
SVGO memperpendek atau menghapus ID yang tidak terpakai. Aktifkan Pertahankan ID jika gaya atau skrip Anda menargetkannya.
Apakah viewBox dihapus?
Tidak. Preset default SVGO 4 mempertahankan viewBox. Opsi Ganti width/height dengan viewBox (responsif) justru menghapus ukuran tetap, sehingga SVG menjadi responsif.