Cara menggunakan Optimizer SVG
- Tempel markup SVG atau buka file
.svg. - Gunakan pengaturan default untuk penghematan terbaik, atau turunkan presisi agar path makin kecil.
- Bandingkan pratinjau asli dan hasil optimasi untuk memastikan tidak ada bagian yang bergeser.
- Salin markup hasil optimasi atau unduh
.svg.
Mengapa perlu mengoptimalkan file SVG?
SVG yang diekspor dari aplikasi desain sering membawa banyak data tambahan: metadata editor, komentar, layer tersembunyi, nilai atribut default, grup kosong, dan koordinat dengan enam angka desimal. Semua itu tidak memengaruhi tampilan gambar, tetapi bisa membuat file dua sampai lima kali lebih besar dari yang diperlukan. Ikon SVG yang di-inline juga mengulang pembengkakan ini di setiap halaman.
Apa yang dilakukan SVGO?
SVGO adalah optimizer SVG standar yang dipakai sebagian besar build tool. Alat ini menjalankan serangkaian plugin yang aman:
- Menghapus deklarasi XML, komentar,
<metadata>, namespace editor (Illustrator, Inkscape, Sketch), dan elemen tersembunyi. - Menggabungkan grup yang tidak berguna, menggabungkan path jika memungkinkan, dan mengubah bentuk menjadi data path yang lebih pendek.
- Membulatkan angka sesuai presisi yang dipilih dan menulis ulang perintah path dalam bentuk paling ringkas.
- Memperkecil gaya inline dan warna (
#FFFFFF→#fff) serta menghapus nilai default. - Memperpendek ID dan menghapus ID yang tidak dirujuk oleh elemen mana pun.
Alat ini selalu mempertahankan viewBox, yang diperlukan agar SVG bisa diskalakan dengan benar.
Memilih presisi
| Presisi | Cocok untuk |
|---|---|
| 1 | Ikon sederhana yang digambar di grid piksel |
| 2–3 | Sebagian besar ikon, logo, dan ilustrasi (default 3) |
| 4–5 | Ilustrasi detail, peta, dan bagan dengan kurva halus |
Presisi yang lebih rendah berarti digit lebih sedikit dan file lebih kecil, tetapi kurva bisa sedikit bergeser. Itulah gunanya pratinjau.
Width, height, dan viewBox
Menghapus width dan height membuat SVG bisa menyesuaikan ukuran kontainernya lewat CSS, yang biasanya diinginkan untuk ikon dan SVG inline. Pertahankan keduanya jika SVG dipakai di <img> tanpa dimensi eksplisit.
Langkah selanjutnya: ubah SVG hasil optimasi menjadi background CSS, komponen React, atau elemen Webflow.
Juga dicari sebagai: svgo online, kompres svg, minify svg, svg minifier, optimasi svg online, svg compressor, perkecil ukuran svg, hapus metadata svg.
Tool yang cocok dipakai bersama Optimizer SVG
- Skala ViewBox SVG — Normalisasi ikon ke viewBox baru (misalnya 24×24) dengan mengubah skala koordinat asli di dalam setiap path, circle, rect, dan polygon — tanpa trik transform="scale()".
- Kompres Gambar — Perkecil foto dan grafis hingga 90% tanpa penurunan kualitas yang terlihat, tergantung gambar dan pengaturannya.
- Kompres & Dekompres Gzip — Kompres teks atau file apa pun dengan gzip, zlib, atau raw deflate, atau tempel Base64 / buka file .gz untuk didekompresi.
- Kompres & Dekompres Brotli — Kompres teks atau file dengan Brotli pada kualitas 0 sampai 11, dekompres data .br, dan bandingkan hasilnya dengan gzip.