Loading…

Tentang Pemerindah & Peminifikasi SVG Online

Bekerja dengan file SVG yang berantakan atau terlalu besar? Tempel kode Anda atau unggah file `.svg`, pilih **Format** untuk merapikan atau **Minify** untuk mengecilkan ukurannya, dan dapatkan markup SVG yang bersih dan teroptimasi secara instan. Sempurna untuk desainer, pengembang front-end, dan siapa pun yang membutuhkan optimasi vektor yang cepat dan aman. 🚀

Fitur Utama Pemformat SVG Kami

  • **Mode perindahan** dengan indentasi cerdas, pembungkusan baris, dan penyelarasan atribut
  • **Mode minifikasi** yang menghilangkan spasi, komentar, dan metadata berlebihan
  • Pemformatan gaya Prettier dan optimasi gaya SVGO di balik layar
  • Gaya indentasi yang dapat dikonfigurasi (spasi atau tab) dan ukuran indentasi
  • Kolom bungkus opsional untuk menjaga jalur dan atribut panjang tetap rapi
  • Gaya akhir baris yang konsisten (LF / CRLF) untuk diff yang bersih di berbagai OS
  • Seret-dan-lepas file `.svg` hingga 5 MB atau tempel markup SVG sebaris
  • Pemrosesan 100% di sisi klien — karya seni Anda tidak pernah meninggalkan peramban
  • Salin atau unduh dengan satu klik untuk keluaran yang diformat (`.formatted.svg`) atau diminifikasi (`.min.svg`)
  • UI responsif yang berfungsi baik di laptop, desktop, dan tablet

🔧 Cara Memformat atau Meminifikasi SVG: Panduan Cepat for svg-formatter

1

1. Tempel atau Unggah SVG

📥 Seret-dan-lepas file `.svg` Anda atau tempel markup SVG mentah ke editor. Alat ini mendeteksi konten `image/svg+xml` standar secara otomatis.

2

2. Pilih Format atau Minifikasi

✨ Pilih **Format** untuk markup yang mudah dibaca (cocok untuk tinjauan dan kontrol versi) atau **Minifikasi** untuk ukuran file terkecil.

3

3. Sesuaikan Opsi Pemformatan

⚙️ Atur **Gaya Indentasi** (spasi atau tab), **Ukuran Indentasi** dan opsional **Bungkus / Panjang Baris**. Ini langsung dipetakan ke pengaturan pemformat dasar.

4

4. Pratinjau & Ekspor

👀 Periksa kode SVG yang dioptimalkan, uji cepat di proyek Anda, lalu salin ke papan klip atau unduh hasilnya sebagai file `.svg` baru.

Detail Teknis

Mesin Perindahan (Mode Format)

Mode format menggunakan mesin bergaya Prettier yang disesuaikan untuk markup XML SVG. Fokus pada keterbacaan dan diff yang stabil dan dapat diprediksi.

AspekPerilakuCatatan
Gaya IndentasiSpasi atau TabDapat dikonfigurasi melalui **Gaya Indentasi** (dipetakan ke `indentStyle`).
Ukuran Indentasi1–8 spasiMengontrol lebar sarang saat menggunakan spasi (dipetakan ke `indentSize`).
Bungkus / Panjang Baris0–120 kolom`0` menonaktifkan pembungkusan; selain itu, baris panjang dibungkus di sekitar kolom yang dipilih (dipetakan ke `wrapLineLength`).
Akhir-BarisLF (`\n`) atau CRLF (`\r\n`)Menjaga akhir baris konsisten di berbagai OS (dipetakan ke `endOfLine`).
Bahasa KeluaranSVG Gaya XMLMempertahankan struktur XML yang kompatibel dengan SVG untuk penyematan yang aman.

Pipa Pengecilan (Mode Minify)

Mode minify menggunakan pipa yang terinspirasi SVGO yang berfokus pada pengurangan ukuran sambil mempertahankan keluaran visual.

LangkahDeskripsiDampak
Hapus komentarMenghilangkan node komentar `<!-- ... -->` yang tidak mempengaruhi rendering.File lebih kecil, diff lebih bersih.
Hilangkan spasi berlebihanMengurangi spasi, tab, dan jeda baris yang tidak diperlukan.Keuntungan besar untuk SVG yang diekspor dari editor verbose.
Pangkas metadataOpsional menghapus node metadata non-rendering ketika aman.Baik untuk aset produksi publik.
Normalisasi atributMenyederhanakan dan mengurutkan ulang atribut dengan cara yang stabil.Keluaran lebih ringkas, cacheabilitas lebih baik.

Pengkodean & Kompatibilitas

Keluaran adalah SVG UTF-8 yang kompatibel dengan browser dan alat modern, selaras dengan spesifikasi SVG 2.

Kinerja & Batas (Browser Desktop Biasa)

Jenis FileUkuran MasukanWaktu BeautifyWaktu MinifyPengurangan Ukuran Khas
Ikon5 KB⚡ < 15 ms⚡ < 20 ms≈ 25–40%
Ilustrasi100 KB⚡ < 60 ms⚡ < 90 ms≈ 40–55%
Grafik Utama500 KB⏱️ < 300 ms⏱️ < 450 ms≈ 50–60%
Kinerja aktual bergantung pada CPU, browser, dan kompleksitas SVG Anda.

Alternatif CLI untuk Pengguna Lanjutan

Lebih suka alur kerja terminal atau integrasi CI? Gabungkan Prettier dan SVGO untuk perilaku serupa dengan alat ini:

Linux / 🍎 macOS

Perindah SVG dengan Prettier

npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svg

Menerapkan indentasi dan pembungkusan baris yang konsisten pada markup SVG Anda.

Minifikasi SVG dengan SVGO

npx svgo input.svg -o input.min.svg

Menghapus komentar, metadata, dan spasi berlebihan untuk file yang lebih kecil.

Windows (PowerShell atau CMD)

Cetak cantik SVG menggunakan xmlstarlet (via WSL atau native)

xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg

Memformat SVG/XML dengan indentasi 2 spasi.

Minifikasi SVG dengan SVGO (tanpa instalasi global)

npx svgo input.svg -o min.svg

Menjalankan SVGO langsung melalui `npx` untuk optimisasi sekali pakai.

Tambahkan Prettier + SVGO ke build atau pre-commit hooks Anda sehingga desainer dapat mengekspor SVG mentah dan pipeline Anda menjaganya tetap optimal.

Aplikasi Praktis

Performa Web & Bundle Frontend

  • Kurangi muatan SVG dalam sistem desain, set ikon, dan lembar sprite.
  • Sisipkan SVG yang diminifikasi dalam HTML/CSS untuk menghemat permintaan HTTP tambahan.
  • Tingkatkan Core Web Vitals dengan mengecilkan ilustrasi utama di halaman arahan.
<img src="/assets/hero.min.svg" alt="Grafik utama yang dioptimalkan" />
.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }

Serah Terima Desain & Kontrol Versi

  • Perindah SVG yang diekspor sebelum tinjauan kode agar perbedaan mudah dibaca.
  • Simpan `.formatted.svg` untuk kolaborasi dan `.min.svg` untuk produksi.
  • Terapkan indentasi dan urutan atribut yang konsisten di seluruh sistem desain.

Seluler, Email & Aplikasi Hibrida

  • Minifikasi SVG inline dalam email HTML untuk kampanye yang lebih ringan.
  • Kurangi ukuran bundle aplikasi di React Native / Capacitor / Ionic saat mengirim banyak ikon.
  • Hemat bandwidth untuk pengguna dengan koneksi lambat atau terbatas.

❓ Frequently Asked Questions

❓Apa itu pemformatan SVG?

Pemformatan (atau mempercantik) menyusun ulang markup SVG Anda dengan indentasi yang konsisten, jeda baris, dan pengurutan atribut. Ini tidak mengubah cara gambar dirender, hanya bagaimana kode terlihat dan berperilaku dalam perbedaan.

📏Apakah minifikasi akan mengubah tampilan SVG saya?

Dalam kasus normal, tidak. Minifikasi menghapus komentar, spasi berlebihan, dan metadata yang tidak dirender. Ini dirancang untuk mempertahankan hasil visual sambil mengurangi ukuran. Jika Anda mengandalkan metadata khusus untuk alat edit, simpan salinan asli file tersebut.

🔒Apakah SVG saya diunggah ke server?

Tidak pernah. Semua pemformatan dan minifikasi berjalan sepenuhnya di browser Anda menggunakan JavaScript/WebAssembly. File SVG Anda tidak dikirim ke server mana pun atau disimpan secara jarak jauh.

🚀Berapa banyak ukuran yang bisa dihemat oleh minifikasi?

Penghematan di dunia nyata biasanya antara **30% dan 70%**, tergantung pada bagaimana SVG diekspor dan berapa banyak metadata atau spasi yang dikandungnya.

⚠️Apakah menghapus `<metadata>` atau komentar dapat mengganggu alur kerja saya?

Untuk grafik web publik, menghapus metadata dan komentar biasanya aman. Namun, jika alat desain Anda menyimpan data edit atau informasi lisensi di bagian tersebut, simpan salinan asli yang belum diminifikasi dalam kontrol versi untuk edit di masa depan.

Pro Tips

Best Practice

Simpan `icon.formatted.svg` yang belum diminifikasi di repo Anda untuk perbedaan yang bersih, lalu hasilkan `icon.min.svg` sebagai bagian dari langkah build Anda.

Best Practice

Selalu sertakan elemen `<title>` dan `<desc>` yang bermakna sebelum diminifikasi untuk menjaga SVG Anda dapat diakses oleh pembaca layar.

Best Practice

Gabungkan minifikasi SVG dengan kompresi HTTP (Gzip/Brotli) untuk menghemat lebih banyak byte dari ilustrasi dan bagan yang berat.

Best Practice

Untuk set ikon, pertimbangkan strategi sprite: minifikasi sekali, lalu referensikan ikon melalui `<use>` alih-alih menduplikasi kode SVG di mana-mana.

Additional Resources

Spesifikasi W3C SVG 2
Documentation
MDN Web Docs: SVG
Documentation
SVGO (GitHub)
Documentation
Pemformatan XML / SVG Prettier
Documentation

Other Tools