Optimasi SVG
Minify SVG dengan hapus komentar, metadata, elemen tersembunyi, group kosong, whitespace, ID tak terpakai. Preview live, % hemat, salin, download. 100% offline.
Tentang tools ini
Minifier SVG JavaScript murni. Tempel SVG (atau drop file .svg, atau tempel dari clipboard) dan tool menghapus komentar, <metadata> / <title> / <desc>, elemen dengan display:none, group kosong, dan whitespace berlebih, plus opsional membulatkan angka ke 2 tempat desimal dan menghapus atribut id tak terpakai. Tiap optimasi bisa di-toggle independen. Kotak preview menampilkan SVG yang dioptimasi di-render pada 160x160, viewBox dibaca dari source, dan ukuran byte sebelum / sesudah muncul di baris stats dengan badge "hemat %". Tombol download menyimpan SVG yang dioptimasi ke device kamu sebagai optimized.svg. Output adalah blok teks bersih yang bisa kamu salin. Aman dipakai pada icon dan logo sebelum commit ke design system — hemat tipikal pada SVG yang ditulis tangan dari tool seperti Figma atau Illustrator adalah 20-50%, lebih pada SVG copy-paste dengan CSS dan metadata tertanam.
Detail
- Kategori
- developer
- Versi
- 1.0.0
- Ukuran
- 14 KB
- Diperbarui
- Jun 2026
Pertanyaan Umum
Apakah ini optimasi lossless?
Secara visual, ya — ia hanya menghapus hal yang tidak punya efek render (komentar, metadata, display:none, group kosong, whitespace berlebih, id tak terpakai). Ia tidak mengubah data path, warna, atau transform. Satu-satunya opsi dengan efek terlihat adalah "Bulatkan desimal (2)" yang memotong presisi koordinat — untuk kebanyakan icon dan logo 2 tempat desimal sudah lebih dari cukup (bedanya sub-pixel), tapi untuk SVG yang sangat besar atau resolusi tinggi kamu mungkin ingin mempertahankan 3 atau 4 desimal untuk menghindari artefak presisi.
Kenapa ID tak terpakai dihapus?
Banyak tool desain (Figma, Illustrator, Sketch, Inkscape) auto-generate atribut id="layer_42" untuk tiap shape, bahkan ketika tidak ada yang mereferensikannya. Mempertahankan mereka hanya membengkakkan file. Tool memindai referensi url(#id), xlink:href="#id", dan href="#id" dan menghapus atribut id apa pun yang tidak direferensikan. Hati-hati: kalau kamu embed SVG inline di HTML dan memakai CSS seperti #my-logo { ... } untuk men-style-nya dari luar, id itu AKAN direferensikan (via selector CSS) tapi optimizer tidak bisa melihat itu. Dalam kasus itu, matikan "Hapus ID tak terpakai".
Apakah ini mendukung SVG dengan style atau script tertanam?
Ia menghapus blok <style> hanya via strip metadata kalau kamu mengaktifkannya — dan hanya kalau tag style dibungkus dalam <metadata>. Atribut style inline (style="fill:red") dipertahankan. Blok <script> dipertahankan apa adanya. Kalau SVG kamu punya animasi (<animate>, <animateTransform>, <animateMotion>) itu juga dipertahankan, dan optimizer tidak akan menyentuh nilai atributnya. Pakai optimizer untuk icon dan ilustrasi statis; untuk SVG animasi kompleks, hematnya akan lebih kecil dan kamu mungkin ingin mempertahankan metadata.
Apa yang ditampilkan kotak preview?
Kotak preview merender SVG yang dioptimasi menggunakan renderer SVG standar browser. Kalau source punya viewBox="0 0 24 24" dan width="24" height="24", preview menampilkannya di-scale untuk fit 160x160. Kalau source tidak punya width/height, optimizer tidak menambahkannya — browser akan fallback ke viewBox atau default 300x150. viewBox dibaca dari source dan ditampilkan di judul kartu sebagai "viewBox: 0 0 X Y" supaya kamu bisa verifikasi optimizer tidak mengacaukan sistem koordinat.
Apakah SVG saya privat?
Ya. Optimizer adalah JavaScript murni sisi client yang di-inline di HTML. Tidak ada panggilan jaringan, tidak ada upload API, tidak ada CDN. File yang kamu drop atau tempel tetap di browser kamu. Hasil yang didownload mendarat di folder Downloads lokal kamu. Kamu bisa optimasi SVG proprietary, logo pelanggan, atau ikon internal tanpa data apa pun yang ditransmisikan. Satu-satunya operasi file adalah klik <a download> standar browser dan FileReader untuk drop-zone dan input file.