Pengoptimal SVG

Apa itu Pengoptimal SVG?

Pengoptimal SVG adalah alat gratis berbasis browser untuk desainer web, pembuat ikon, dan pengembang front-end yang perlu memangkas SVG tulisan tangan atau ekspor sebelum mengirimkannya. Editor vektor menambahkan bobot tak terlihat: komentar XML, blok metadata, atribut Inkscape/Sodipodi/Illustrator, desimal berlebih, transform tak berguna, grup pembungkus, serta ID dan defs yang tidak dirujuk apa pun. Aktifkan setiap pembersihan di Pengaturan, tempel markup atau jatuhkan berkas .svg, amati render Asli dan Dioptimalkan diperbarui berdampingan, dan baca statistik Sebelum, Sesudah, Dihemat, Gzip, dan Brotli. Salin hasilnya atau unduh sebagai .min.svg. Gunakan untuk meringankan ikon inline, sprite sheet, logo, dan ilustrasi.

Cara menggunakan Pengoptimal SVG

1. Tempel SVG Anda, atau jatuhkan/unggah berkas .svg — markup mengisi kotak input.
2. Buka Pengaturan dan aktifkan tepat pembersihan yang Anda inginkan: bulatkan koordinat, hapus komentar, metadata dan atribut editor, grup kosong, ID dan defs tak terpakai, gabungkan transform, minifikasi gaya inline, perpendek warna hex, hapus nilai bawaan, dan minifikasi spasi.
3. Jika pembulatan koordinat aktif, atur presisi (0-5 tempat desimal).
4. Bandingkan render Asli dan Dioptimalkan berdampingan untuk memastikan gambar tetap benar.
5. Baca statistik Sebelum, Sesudah, Dihemat, Gzip, dan Brotli untuk melihat penghematan ukuran nyata.
6. Salin SVG yang dioptimalkan, atau unduh sebagai berkas .min.svg.

Contoh

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

Pertanyaan yang sering diajukan

Apa tepatnya yang dihapus oleh pengoptimal?

Dengan sakelar yang sesuai aktif: komentar XML, elemen <metadata>, <title>, dan <desc>, atribut namespace editor (Inkscape, Sodipodi, Illustrator), grup kosong, ID yang tidak dirujuk apa pun, dan <defs> tanpa referensi. Ia juga dapat membulatkan atribut numerik dan data path, menggabungkan transform tak berguna, meminifikasi atribut style dan CSS <style>, memperpendek warna hex (#ffffff→#fff), dan menghapus atribut presentasi bawaan seperti fill-opacity="1".

Apakah membulatkan koordinat akan mengubah tampilan SVG saya?

Membulatkan ke presisi rendah dapat menggeser titik sepersekian unit yang sangat kecil, biasanya tak terlihat tetapi lebih kecil. Naikkan presisi (hingga 5 desimal) untuk geometri tepat, atau matikan pembulatan agar angka tetap utuh.

Bisakah saya memuat berkas dan melihat pratinjau hasil?

Bisa. Jatuhkan atau unggah berkas .svg (atau tempel markup) dan render Asli serta Dioptimalkan muncul berdampingan sehingga Anda bisa melihat kerusakan. Lalu salin keluaran atau unduh .min.svg yang dioptimalkan — tidak ada yang diunggah; berkas dibaca secara lokal.

Apa arti angka Gzip dan Brotli?

Ukuran Gzip diukur dengan benar-benar mengompresi SVG yang dioptimalkan di browser Anda, jadi mencerminkan byte nyata pada koneksi gzip. Angka Brotli adalah perkiraan yang diturunkan dari ukuran gzip itu (brotli biasanya mengompresi teks sedikit lebih kecil); encoder brotli asli terlalu berat untuk dibundel, jadi ditandai dengan tilde.

Apakah SVG saya diunggah ke mana pun?

Tidak. Parsing, pembersihan, pengukuran ukuran, dan serialisasi semuanya terjadi secara lokal di browser Anda menggunakan DOMParser bawaan. Tidak ada yang dikirim ke server, jadi alat ini berfungsi offline dan karya Anda tetap privat.