Softonic

Minify Kode SVG

Langkah 1 / 2
Berikutnya

Meminify SVG mengubah markup yang mudah dibaca dan berindentasi menjadi satu baris ringkas yang dirender peramban dengan cara yang sama. Tempel kode Anda, jalankan minifier, lalu salin versi yang siap dipakai untuk stylesheet, template atau file komponen.

Cara meminify kode SVG

  1. 1

    Tempel markup

    Letakkan seluruh elemen svg, termasuk tag pembuka dan penutup, di kotak sumber SVG.

  2. 2

    Pilih apa yang dihapus

    Biarkan komentar, metadata, spasi dan doctype tercentang untuk hasil terkecil.

  3. 3

    Pilih jumlah desimal

    Nilai bawaan 2 cocok untuk sebagian besar ikon. Naikkan menjadi 3 jika sebuah kurva terlihat janggal setelah diminify.

  4. 4

    Minify dan salin

    Klik Berikutnya, lalu Kompres, dan gunakan tombol Salin di kotak hasil.

Apa yang dilakukan minifier pada kode Anda

Alat ini bekerja pada teks SVG dalam urutan yang tetap: pertama menghapus deklarasi XML dan doctype, lalu komentar, lalu elemen metadata, title dan description, kemudian membulatkan desimal, dan terakhir menggabungkan spasi. Setiap rangkaian spasi, tab dan baris baru menjadi satu spasi, dan spasi di antara tag penutup dan tag pembuka dihapus, sehingga menjadi satu baris.

Sebelum dan sesudah

Masukan, 126 byte:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <!-- dot -->
  <circle cx="8.000" cy="8.000" r="3.500"/>
</svg>

Keluaran dengan pengaturan bawaan, 97 byte (penghematan 23%):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3.5"/></svg>

Perhatikan bahwa 8.000 menjadi 8 dan 3.500 menjadi 3.5: setelah pembulatan, angka nol di belakang dihapus.

Yang dibiarkan tidak tersentuh

Ini adalah minifier teks, bukan pengoptimal penuh. Alat ini mempertahankan nama atribut, ID, kelas, grup, transformasi dan perintah path apa adanya. Ini disengaja: ID yang dirujuk oleh CSS, skrip atau gradien tetap berfungsi, dan struktur file masih bisa dikenali jika Anda perlu mengeditnya nanti.

Hal yang perlu diwaspadai

  • Penggabungan spasi juga berlaku di dalam elemen teks, jadi label dengan beberapa spasi berurutan akan menampilkan satu spasi.
  • Pembulatan berlaku untuk setiap bilangan desimal, termasuk string versi di dalam atribut, misalnya 1.10 akan menjadi 1.1.
  • Kode yang diminify sulit dibaca. Simpan asli di version control dan gunakan salinan yang diminify hanya sebagai keluaran.

Pemeriksaan cepat setelah minify

Tempel baris yang sudah diminify ke file HTML kosong dan buka di peramban berdampingan dengan aslinya. Keduanya seharusnya tampak sama. Jika gradien, mask atau clip path berhenti berfungsi, periksa apakah ID atau referensi pernah diubah secara manual, karena alat ini tidak mengganti namanya. Jika detail yang sangat halus bergeser, naikkan presisi ke 3 atau lebih dan jalankan lagi.

Tempat menggunakan hasilnya

SVG satu baris dapat ditempel dengan rapi ke file HTML, komponen JSX, data URI atau aturan latar belakang CSS, tempat baris baru biasanya perlu di-escape.

Pertanyaan yang Sering Diajukan

Minify menghapus karakter yang tidak diperlukan dari teks. Kompresi, misalnya gzip di server, memadatkan teks untuk pengiriman. Keduanya bisa digabung, dan file yang diminify tetap bisa dikompres lagi saat dikirim.

Secara bawaan tidak, karena ID, kelas dan struktur elemen dipertahankan. Hanya komentar, elemen metadata, doctype dan spasi yang dihapus.

Alat ini tidak memformat kode. Buka teks yang diminify di editor kode yang memiliki fitur format untuk mengembalikan indentasi, tetapi komentar yang sudah dihapus tidak akan kembali.

Penghapusan spasi menghilangkan baris baru di antara tag. Hilangkan centang kotak spasi jika Anda ingin mempertahankan tata letak asli.

Alat Terkait

Pembuat Kertas Paranada

Buat kertas paranada siap cetak: paranada kosong, kunci G atau F, paranada ganda untuk piano, atau tablatur gitar. Atur jumlah, jarak garis, A4 atau Letter, dan margin, lalu unduh PDF atau SVG.

Pembuat Mosaik LEGO

Ubah foto menjadi rancangan mosaik persegi berukuran 16, 32, 48, atau 64 sel per sisi. Lihat perkiraan warna, hitung pelat 1×1, dan unduh panduan bernomor.

Pemilih Warna Material Design

Jelajahi palet warna Material Design. Salin nuansa mana pun (dari 50 hingga A700) dalam format HEX, RGB, atau HSL dengan sekali sentuh.

Pembuat Undangan

Buat undangan pernikahan, ulang tahun, akikah, atau acara kantor. Sesuaikan tulisan dan warna, lihat pratinjau langsung, lalu unduh PNG siap cetak ukuran 5R.

Pembaca kode batang

Pilih gambar kode batang untuk melihat nilai dan jenis simbolnya. Mendukung EAN-13, UPC-A, dan Code 128, serta memeriksa digit pemeriksa EAN dan UPC.

Konverter HEIC ke PNG

Pilih satu foto HEIC atau HEIF hingga 50 MB, konversi gambar pertama yang didukung dekoder ke PNG, periksa pratinjau, lalu unduh.

Alat ini tersedia dalam bahasa lain

Panduan dan contoh penggunaan