Pengoptimal SVG

Cara Kerja Pengoptimalan SVG

Alat Pengoptimal SVG dirancang untuk membersihkan kode SVG dan memperkecil ukurannya tanpa mengubah tampilan grafis dari gambar tersebut. Pengguna cukup menempelkan kode SVG inline ke dalam area input yang disediakan. Alat ini kemudian memproses kode tersebut untuk membuang bagian-bagian yang tidak diperlukan, menampilkan perbandingan ukuran sebelum dan sesudah optimasi, serta menyediakan opsi untuk menyalin atau mengunduh kode hasil optimasi.

Proses pembersihan ini berfokus pada elemen-elemen redundan di dalam struktur XML SVG. Kode SVG sering kali membawa data berlebih dari perangkat lunak desain yang tidak memengaruhi visualisasi akhir di peramban web. Dengan membuang data tersebut, ukuran file dapat berkurang secara signifikan tanpa merusak integritas visual.

Elemen yang Dihapus dan Dipertahankan

Dalam proses optimasi, alat ini menerapkan aturan pembersihan yang aman untuk menjaga agar grafis tetap tampil sebagaimana mestinya.

Beberapa elemen yang dihapus secara otomatis meliputi:

• Komentar di dalam kode XML.
• Metadata yang biasanya disisipkan oleh aplikasi penyunting gambar.
• Namespace editor yang tidak diperlukan untuk rendering di peramban.
• Spasi atribut berlebih.
• Namespace yang tidak digunakan.
• Kode warna yang dapat dipersingkat ke bentuk setara yang lebih pendek (misalnya mengubah kode heksadesimal tertentu ke nama warna yang lebih ringkas).

Sebaliknya, untuk memastikan fungsionalitas dan struktur grafis tidak rusak, alat ini tetap mempertahankan:

• Atribut viewBox yang mengatur rasio aspek dan area pandang.
• Atribut id (ID) yang sering digunakan untuk manipulasi CSS atau JavaScript.
• Label.
• Geometri objek.

Alat ini juga menghindari tindakan agresif seperti penulisan ulang path, pengubahan nama ID, penghapusan viewBox, dan pembulatan presisi koordinat untuk mencegah terjadinya distorsi visual.

Batasan Input dan Keamanan XML

Alat ini bekerja dengan aturan ketat terkait format dan ukuran input demi menjaga keamanan dan kinerja proses optimasi.

Format input yang didukung adalah kode SVG inline normal. SVG yang menggunakan deklarasi tipe dokumen (doctype) atau entitas kustom akan diblokir secara otomatis. Pembatasan ini diterapkan karena adanya implikasi keamanan terkait parsing entitas XML dalam aplikasi web, yang dapat dieksploitasi jika tidak ditangani dengan benar.

Selain itu, terdapat batasan panjang karakter maksimum untuk mencegah kegagalan memori pada peramban. Jika proses optimasi memakan waktu terlalu lama (lebih dari 15 detik), sistem akan menghentikan proses secara otomatis untuk menjaga stabilitas peramban pengguna.

Metrik Hasil Optimasi

Setelah proses optimasi selesai, alat akan menampilkan beberapa metrik ukuran untuk menunjukkan efektivitas pembersihan. Metrik yang ditampilkan meliputi:

• Asli: Ukuran kode SVG awal dalam satuan byte.
• Hasil: Ukuran kode SVG setelah dioptimalkan dalam satuan byte.
• Dihemat: Jumlah ruang penyimpanan yang berhasil dipangkas, ditampilkan dalam satuan byte dan persentase.

Jika optimasi berhasil mengurangi ukuran file, sistem akan menampilkan pesan "Dioptimalkan — {pct}% lebih kecil ({saved} dihemat).". Namun, jika kode SVG yang dimasukkan sudah sangat bersih sehingga tidak ada ruang yang dapat dipangkas lagi, sistem akan menampilkan pesan "Dioptimalkan. Tidak ada pengurangan ukuran dengan pengaturan pembersihan aman.".

Penanganan Kesalahan dan Interupsi

Alat ini dilengkapi dengan sistem deteksi kesalahan instan untuk memandu pengguna jika terjadi masalah pada input. Berikut adalah beberapa pesan kesalahan yang dapat muncul:

• Tempelkan kode SVG terlebih dahulu.: Muncul jika pengguna menekan tombol optimasi saat area input masih kosong.
• Elemen <svg> tidak ditemukan.: Muncul jika teks yang ditempelkan tidak mengandung elemen SVG yang valid.
• SVG ini menggunakan tipe dokumen atau entitas kustom. Hapus entitas tersebut sebelum melakukan optimasi.: Muncul jika input mengandung deklarasi doctype atau entitas kustom yang dilarang.
• SVG ini terlalu besar untuk alat ini. Batasi hingga di bawah {max} karakter.: Muncul jika panjang karakter SVG melebihi batas maksimal yang ditentukan.
• Proses memakan waktu terlalu lama dan telah dihentikan — coba SVG yang lebih kecil.: Muncul jika proses optimasi melampaui batas waktu 15 detik.
• Gagal mengoptimalkan SVG ini.: Pesan kesalahan umum jika terjadi kegagalan sistem yang tidak terduga saat memproses kode.

Jika pengguna membersihkan area input atau mengubah isi input saat proses optimasi sedang berjalan, proses optimasi yang sedang berlangsung tersebut akan langsung dihentikan seketika.

Privasi dan Pemrosesan Data

Keamanan data pengguna menjadi prioritas utama dalam pengoperasian alat ini. Kode SVG Anda dioptimalkan langsung di browser Anda. Tidak ada data yang diunggah ke BroBroGo. Seluruh proses pembacaan, pembersihan, dan kalkulasi ukuran dilakukan secara lokal menggunakan sumber daya komputasi pada perangkat yang Anda gunakan.

Pertanyaan yang Sering Diajukan (FAQ)

Apa saja yang dihapus? Proses ini menghapus komentar, metadata, namespace editor, spasi atribut berlebih, namespace yang tidak digunakan, dan mempersingkat kode warna yang setara. Proses ini tetap mempertahankan viewBox, ID, label, dan geometri agar tetap utuh.

Apakah alat ini bisa mengoptimalkan semua jenis SVG? Alat ini menangani kode SVG inline standar. SVG dengan deklarasi tipe dokumen (doctype) atau entitas kustom akan diblokir karena dapat membuat proses parsing menjadi tidak aman. Hapus deklarasi tersebut dan coba lagi.

Apakah proses ini akan mengubah tampilan grafis? Alat optimasi ini menghindari penulisan ulang path, pengubahan nama ID, penghapusan viewBox, dan pembulatan presisi. Jika SVG Anda sangat bergantung pada komentar atau metadata untuk alur kerja desain Anda, sebaiknya simpan salinan file aslinya.