Cara Kerja Optimasi SVG di Browser
ToolMole memproses SVG sepenuhnya di browser Anda dengan JavaScript, sehingga file tetap aman dan tidak pernah diunggah ke server. Tool ini membaca struktur SVG, memisahkan data yang tidak relevan seperti metadata editor, komentar, serta namespace yang tidak digunakan.
Anda bisa memilih presisi desimal untuk koordinat, yang menentukan seberapa detail posisi dan bentuk geometris SVG. Saat presisi diubah, efeknya langsung terlihat pada tampilan SVG di browser, sehingga Anda dapat membandingkan hasil sebelum dan sesudah secara visual.
Apa Saja yang Dioptimalkan dan Tidak
Tool ini hanya menghapus data yang tidak memengaruhi tampilan seperti metadata, komentar, dan namespace. ID, class, serta referensi filter dan gradient tetap dipertahankan agar integrasi dengan CSS dan JavaScript tidak terganggu. Jika SVG berisi eksternal reference atau skrip, optimasi tidak berjalan untuk mencegah hasil yang rusak.
Optimasi fokus pada geometri dan metadata, bukan kompresi level file seperti gzip. Koordinat di-rounding sesuai pengaturan Anda, namun angka pada URL, class, dan konten teks tetap utuh.
Tips Pemilihan Presisi dan Aksesibilitas
Presisi desimal yang lebih rendah akan mengurangi ukuran file SVG lebih banyak, tetapi bisa membuat garis atau bentuk membelok. Untuk ikon atau ilustrasi sederhana, presisi 1–2 biasanya cukup tanpa perubahan visual. Pada SVG dengan filter atau gradient kompleks, gunakan presisi lebih tinggi agar hasil tetap sama.
Anda juga bisa memilih apakah elemen <title> disimpan untuk keperluan aksesibilitas. Bandingkan tampilan sebelum dan sesudah untuk memastikan SVG tetap identik di semua browser.
Pertanyaan yang Sering Diajukan
Berapa persen pengurangan ukuran file SVG yang bisa didapat?
Pada SVG rata-rata dari editor seperti Illustrator atau Figma, pengurangan bisa mencapai 20-60% tergantung jumlah metadata dan presisi koordinat. File dengan banyak data editor biasanya paling banyak dihemat.
Apakah tampilan SVG hasil optimasi benar-benar identik di semua browser?
Umumnya, hasil optimasi tetap identik bila presisi koordinat cukup tinggi. Jika efek visual berubah, naikkan presisi agar bentuk dan warna tetap sama di browser populer seperti Chrome, Firefox, dan Edge.
Bisakah memilih elemen metadata atau tag tertentu untuk dipertahankan?
Anda bisa mengatur retention elemen <code><title></code> demi aksesibilitas. Metadata lain seperti komentar dan namespace dihapus otomatis. ID, class, dan referensi filter selalu dipertahankan demi kompatibilitas.
Apakah tool ini aman untuk SVG yang mengandung filter atau gradient rumit?
Ya, referensi filter dan gradient tidak diubah, sehingga SVG tetap konsisten. Namun, disarankan untuk menggunakan presisi tinggi agar efek visual tetap sama untuk SVG kompleks.
Apakah tool ini bisa digunakan untuk SVG dari semua editor grafis?
SVG dari editor populer seperti Illustrator, Figma, Inkscape, dan CorelDraw didukung. ToolMole mampu mengenali metadata serta struktur SVG yang umum digunakan oleh editor-editor tersebut.
Bagaimana dampak pengaturan rounding koordinat pada kualitas ikon?
Semakin rendah presisi, semakin kecil file. Namun, pada ikon atau ilustrasi detail, koordinat yang terlalu dibulatkan bisa membuat bentuk tampak kurang halus. Selalu cek hasil visual sebelum mengunduh.
Ada masalah atau ide untuk alat ini? Kirim masukan