Pembersih SVG Online

Optimalkan dan bersihkan SVG yang diekspor dari Figma, Adobe Illustrator, atau Inkscape. Hapus metadata, atribut yang tidak perlu, dan grup kosong untuk menghasilkan SVG siap produksi.

Studio Utilitas

Ingin utilitas ini di situs Anda?

Sesuaikan warna dan mode gelap untuk WordPress, Notion, atau situs Anda sendiri.

Pertanyaan yang Sering Diajukan

Bisakah saya menempel seluruh HTML halaman yang berisi SVG tertanam?

Bisa. Pembersih akan mendeteksi elemen SVG di dalam HTML dan mengekstrak hanya blok tersebut untuk diproses. Cara ini juga berfungsi jika kamu langsung menempelkan fragmen SVG-nya.

Apakah ini berfungsi untuk SVG dari Illustrator?

Ya. Illustrator mengekspor SVG dengan deklarasi XML, metadata, dan namespace miliknya sendiri yang akan dihapus oleh pembersih. Hasilnya adalah SVG yang kompatibel dengan semua browser modern.

Apa perbedaan antara membersihkan dan meminifikasi?

Membersihkan menghapus atribut dan tag yang tidak diperlukan, tetapi tetap mempertahankan format indentasi agar kamu bisa membaca dan mengedit kode. Meminifikasi juga memampatkan semuanya menjadi satu baris untuk memperkecil ukuran file semaksimal mungkin.

Apakah menghapus ID bisa merusak SVG?

Hanya jika ada elemen dalam SVG yang merujuk elemen lain melalui ID, misalnya lewat fill="url(#gradient)". Dalam kasus itu, nonaktifkan opsi Hapus ID. Opsi ini dinonaktifkan secara default justru untuk mencegah masalah tersebut.

Apakah kode SVG saya dikirim ke server?

Tidak. Semua pemrosesan terjadi di browser kamu menggunakan API bawaan DOMParser dan XMLSerializer. Kode tidak pernah meninggalkan perangkatmu.

# Pembersih SVG: Rapikan Kode dari Figma dan Illustrator

Tempelkan SVG dari Figma, Adobe Illustrator, atau inspector browser dan dapatkan file vektor yang bersih, teroptimasi, dan siap digunakan di produksi.

# Mengapa SVG yang diekspor begitu berantakan?

Saat kamu mengekspor SVG dari Figma, kamu mendapatkan file yang penuh dengan atribut yang hanya bermakna di dalam aplikasinya: data-name, xml:space, referensi ke layer internal, dan metadata desain. Hasilnya adalah SVG yang bisa 40–70% lebih besar dari yang seharusnya.

# Apa yang dihapus oleh Pembersih

  • Metadata editor: tag metadata, title, dan desc yang ditambahkan Figma dan Illustrator secara otomatis.
  • Namespace Inkscape: semua elemen dengan awalan inkscape: dan sodipodi:.
  • Atribut tidak perlu: xml:space, version, xmlns:* yang berlebihan, dan atribut data-* dari Figma.
  • Grup kosong: elemen <g> tanpa konten yang tersisa sebagai artefak dari layer yang sudah dihapus.
  • Deklarasi XML: deklarasi <?xml version="1.0"?> dan DOCTYPE yang tidak diperlukan saat SVG ditanam dalam HTML.

Referencias Bibliográficas