Tanpa unggah, 100% lokal, tanpa akun

Pengoptimal SVG

Tempel atau jatuhkan SVG dan perkecil dengan SVGO. Semuanya tetap di browser Anda.

Cara kerja Pengoptimal SVG

SVG Optimizer menjalankan SVGO (SVG Optimizer) di Web Worker di dalam browser Anda untuk meminifikasi dan membersihkan file SVG tanpa mengunggahnya. SVGO menerapkan serangkaian plugin yang dapat dikonfigurasi yang menghapus komentar, menciutkan whitespace, menggabungkan jalur identik, mengonversi bentuk ke representasi paling kompaknya, dan menghapus atribut yang tidak memiliki efek visual. Hasilnya adalah SVG yang lebih kecil yang merender identik dengan aslinya.

File SVG yang dihasilkan oleh alat desain seperti Figma, Illustrator, atau Inkscape sering kali mengandung overhead yang signifikan: metadata khusus editor, grup kosong, atribut transform yang berlebihan, dan deklarasi namespace yang tidak diperlukan browser mana pun. Set plugin default SVGO menghapus overhead ini dengan andal. File yang dioptimalkan ditawarkan sebagai unduhan dan persentase pengurangan ukuran ditampilkan sehingga Anda dapat mengonfirmasi bahwa optimalisasi itu bermanfaat.

Ditulis oleh Bastien Sulyan

Cara menggunakan Pengoptimal SVG, langkah demi langkah

  1. Jatuhkan file SVG Anda ke area unggah atau klik untuk mencari.
  2. Web Worker SVGO menjalankan optimalisasi segera dengan set plugin default.
  3. Lihat persentase pengurangan dan ukuran file asli versus yang dioptimalkan.
  4. Klik Unduh untuk menyimpan SVG yang dioptimalkan ke perangkat Anda.
  5. Jika plugin tertentu menyebabkan masalah rendering, sesuaikan konfigurasi plugin dan optimalkan ulang.

Kasus penggunaan umum

  • Seorang pengembang front-end mengoptimalkan ikon yang diekspor dari Figma sebelum memasukkannya ke pipeline aset produksi, mengurangi setiap ikon dari 4 KB menjadi di bawah 1 KB.
  • Seorang desainer web membersihkan ilustrasi SVG yang diekspor dari Illustrator yang mengandung lapisan metadata editor yang tidak terlihat di browser tetapi membengkakkan file.
  • Seorang pengembang yang membangun font ikon dari glyph SVG memastikan setiap SVG sumber bersih dan terstruktur secara konsisten sebelum langkah pembuatan font.
  • Seorang insinyur performa mengaudit SVG inline dalam HTML dan menggantikan setiap aslinya yang membengkak dengan versi yang dioptimalkan SVGO untuk meningkatkan berat halaman.

Pertanyaan yang sering diajukan

Apakah SVGO akan mengubah tampilan SVG saya?

Plugin default SVGO dipilih untuk secara visual tidak merusak: SVG yang dioptimalkan merender identik dengan aslinya di semua browser standar. Beberapa plugin agresif (seperti yang membulatkan koordinat jalur dengan sangat berat) dapat memperkenalkan perbedaan rendering yang halus. Jika Anda melihat perubahan visual, bandingkan file asli dan yang dioptimalkan di browser dan nonaktifkan plugin tertentu yang menyebabkan masalah.

Apakah file SVG dikirim ke server untuk optimalisasi?

Tidak. SVGO berjalan di Web Worker di dalam tab browser Anda. Teks SVG dibaca dari disk lokal Anda, diproses di memori JavaScript, dan keluaran dikembalikan ke halaman untuk diunduh. Konten file tidak meninggalkan perangkat Anda.

Seberapa kecil SVG saya setelah dioptimalkan?

Pengurangan bergantung pada sumber. SVG yang diekspor dari alat desain dengan metadata editor biasanya menyusut sebesar 30 hingga 70 persen. SVG yang ditulis tangan dan sudah ramping mungkin hanya mengalami pengurangan 5 hingga 15 persen. Alat ini menampilkan jumlah byte yang tepat dan persentasenya sehingga Anda dapat mengevaluasi setiap file secara individual.

Apakah optimalisasi mempengaruhi animasi SVG atau JavaScript di dalam file?

Konfigurasi ini mempertahankan elemen animasi dan atribut SMIL. Alat ini memang menghapus elemen script: alat ini menambahkan plugin removeScripts di atas preset default SVGO, karena SVG yang akan Anda sematkan seharusnya tidak membawa kode yang dapat dieksekusi. Beberapa plugin yang membersihkan atribut dapat berinteraksi dengan animasi jika animasi tersebut mereferensikan atribut itu berdasarkan ID; periksa keluaran yang dirender setelah mengoptimalkan file yang menggunakan animasi kompleks.

Bisakah saya mengoptimalkan beberapa file SVG sekaligus?

Versi saat ini memproses satu file SVG dalam satu waktu. Jatuhkan file, unduh hasilnya, lalu jatuhkan file berikutnya. Pemrosesan batch untuk beberapa file dalam satu sesi tidak tersedia dalam rilis ini.

Versi SVGO apa yang digunakan alat ini?

Alat ini menyertakan SVGO yang berjalan di Web Worker. Versi yang disertakan dicatat dalam informasi tentang alat. SVGO dikelola secara aktif dan API plugin berubah secara signifikan antara v1, v2, dan v3; alat saat ini menggunakan format plugin v3.

Alat terkait

Jaga semuanya tetap lokal, jelajahi alat pelengkap.

Semua alat gambar