Pengoptimal SVG

Kompres file SVG secara online — hapus metadata, komentar, dan atribut yang tidak perlu untuk mengurangi ukuran file

Membagikan:

Pengoptimal SVG

Mengapa mengoptimalkan file SVG?

File SVG yang diekspor dari Illustrator, Figma, dan Inkscape mengandung banyak data yang tidak perlu — komentar, metadata editor, atribut redundan, dan container kosong. Setelah dioptimalkan, ukuran file dapat dikurangi 30-70% dan loading menjadi lebih cepat.

🎯

8 Strategi Optimasi

Setiap pass optimasi dapat diaktifkan/dinonaktifkan secara individual untuk kontrol yang tepat

📊

Statistik Pengurangan Ukuran

Lihat ukuran asli, ukuran yang dioptimalkan, dan persentase penghematan setelah setiap optimasi

✅

Optimasi Lossless

Semua optimasi mempertahankan tampilan visual SVG — hanya menghapus metadata yang tidak terlihat

Optimasi SVG dalam 3 langkah

1

Tempel kode SVG

Salin kode sumber SVG dari alat desain atau file dan tempel ke field input

2

Pilih optimasi

Centang opsi optimasi yang diinginkan — pengaturan default memberikan pengurangan maksimal

3

Salin dan gunakan

Salin SVG yang dioptimalkan dan ganti file asli, atau sematkan langsung ke HTML

Kasus Penggunaan Optimasi SVG

🎨

Perpustakaan Ikon

Optimalkan set ikon yang diekspor dari Figma atau Illustrator sebelum ditambahkan ke perpustakaan

🏢

Logo

Bersihkan logo SVG untuk header situs web, favicon, dan aset merek

✨

SVG Animasi

Kurangi ukuran dasar SVG animasi yang sudah besar karena data animasi

📱

PWA dan Mobile

SVG yang lebih kecil mengurangi penggunaan data mobile dan meningkatkan skor Lighthouse

Praktik Terbaik Optimasi SVG

✓ Hati-hati menghapus ID dengan animasi CSS

Jika SVG menggunakan animasi CSS atau JS yang menargetkan elemen berdasarkan ID, nonaktifkan 'Hapus ID' agar animasi tidak rusak.

✓ Pertahankan viewBox, hapus width/height

Menghapus atribut width/height dan hanya menyimpan viewBox memungkinkan SVG untuk diskalakan secara responsif melalui CSS.

✓ Bulatkan angka ke 2 desimal

Koordinat jalur dengan lebih dari 5 desimal tidak dapat dibedakan secara visual. Pembulatan ke 2 mengurangi ukuran file.

✓ Otomatiskan SVGO di CI/CD

Dalam proyek besar, integrasikan SVGO ke proses build untuk mengoptimalkan semua SVG secara otomatis.

❓ Pertanyaan yang Sering Diajukan

Berapa banyak optimasi SVG dapat mengurangi ukuran file?

Biasanya menghemat 30-70% tergantung sumbernya. SVG Illustrator menunjukkan penghematan terbesar; ekspor Figma sudah relatif bersih.

Apakah optimasi mengubah tampilan SVG?

Tidak — semua optimasi dalam alat ini hanya menghapus data yang tidak terlihat atau membulatkan angka dengan presisi yang tidak terdeteksi. Hasil visual identik dengan aslinya.

Mengapa menghapus atribut width dan height?

Nilai width/height yang di-hardcode mencegah SVG untuk diskalakan secara responsif melalui CSS. Menghapusnya dan hanya menyimpan viewBox memungkinkan kontrol ukuran penuh melalui properti CSS.

Apa perbedaan antara alat ini dan SVGO?

SVGO adalah alat command-line Node.js yang merupakan standar untuk optimasi SVG. Alat ini menyediakan antarmuka browser yang ramah pengguna untuk optimasi yang paling umum tanpa menginstal Node.js.