Softonic

Kompresi SVG

Langkah 1 / 2
Berikutnya

SVG yang diekspor dari Figma, Illustrator, atau Sketch umumnya mengandung jumlah penandaan yang 2 hingga 5 kali lebih banyak daripada yang diperlukan, seperti namespace editor, komentar, grup kosong, transformasi yang berlebihan, serta koordinat dengan enam angka desimal. Alat ini memproses SVG tersebut melalui proses ala SVGO untuk menghilangkan elemen-elemen tidak penting tanpa mengubah kepresisan piksel pada hasil rendering.

Cara Mengompres SVG

  1. 1

    Tempel atau unggah file SVG Anda

    Menerima teks XML mentah atau file .svg.

  2. 2

    Pilih tingkat optimisasi

    Aman (hapus komentar dan metadata editor), agresif (kompresi kelompok, bulatkan koordinat, gabungkan jalur), atau kustom.

  3. 3

    Periksa perbedaan tersebut

    Bandingkan jumlah byte sebelum dan sesudahnya, lalu lihat hasil rendering untuk memastikan tidak ada perubahan secara visual.

  4. 4

    Salin atau unduh

    Tempelkan SVG yang telah dioptimalkan langsung ke dalam kode Anda, atau simpan sebagai file.

Apa yang membuat SVG membengkak

Buka file SVG yang diekspor dari Figma di editor teks, dan Anda umumnya akan melihat hal berikut:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generator: Figma ... -->
  <title>icon</title>
  <desc>Created with Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

Hampir semua baris dapat dilepas. Hasil rendering hanya memerlukan komponen svg, viewBox, dan path.

Apa yang dihapus oleh optimizer

Telah dihapus Mengapa aman
Komentar XML Tidak pernah dirender
Namespace editor (sketch, figma) Tidak digunakan oleh peramban
<title> / <desc> (opsional) Teks yang dapat diakses; simpan jika bermakna
Grup <g> kosong Tidak ada efek visual
Nilai atribut default Browser tetap menggunakan nilai default secara otomatis
Transformasi identitas translate(0,0) tidak melakukan apa pun
Koordinat desimal Tiga angka desimal tampak identik di layar
ID yang tidak digunakan Hanya simpan ID yang telah dirujuk di tempat lain

Perangkap

  • Jangan hapus ID yang dirujuk oleh CSS atau url(#...) dalam elemen fill, mask, dan filter. Mode agresif dapat merusak gradien.
  • Pertahankan viewBox. Tanpa atribut ini, grafik SVG tidak akan dapat disesuaikan ukurannya secara responsif.
  • Pertahankan <title> jika Anda mengandalkannya untuk aksesibilitas (pembaca layar akan membacakannya).
  • Hindari menggabungkan instansi <use> secara langsung (inline). Optimizer dapat mengintegrasikannya dan menyebabkan hilangnya pola sumber data asli (source-of-truth pattern).

Ketika kompresi menghemat byte nyata

SVG merupakan format teks, sehingga kompresi menggunakan algoritma gzip di server sudah mampu menghilangkan sebagian besar data yang tidak perlu. Ukuran file SVG yang tidak dikompresi dapat turun dari 4 KB menjadi 1 KB; saat ditransmisikan melalui jaringan, ukurannya kemungkinan hanya berkurang dari 1,2 KB menjadi 0,7 KB. Hal ini tetap sangat menguntungkan, apalagi kode sumber yang lebih kecil juga lebih mudah dibaca.

Pertanyaan yang Sering Diajukan

Mode aman tidak akan menghapus ID tersebut. Mode agresif dapat menghapus ID yang digunakan dalam animasi CSS atau SMIL; jika SVG Anda memiliki animasi, gunakan mode aman atau daftarkan ID-ID tersebut secara manual ke daftar putih.

Ekspor dari Figma/Illustrator umumnya mengalami penurunan ukuran sebesar 50–80%. Format SVG yang ditulis secara manual sudah bersifat kompak dan biasanya hanya mengalami penurunan sebesar 10–20%.

Secara default, ya, atribut <title>, <desc>, dan aria-* akan dipertahankan. Anda dapat memilih untuk menghapusnya jika file SVG hanya bersifat dekoratif dan labelnya disediakan oleh kode HTML di sekitarnya.

Ya. Atribut xmlns dipertahankan karena diperlukan saat menempelkan file SVG langsung ke dalam HTML. Format SVG inline umumnya merupakan metode pengiriman yang paling cepat untuk ikon berukuran kecil.

Alat Terkait

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.

Generator Favicon dari Inisial dan Emoji

Buat favicon dari inisial atau satu emoji. Pilih bentuk dan latar; desain teks juga menyediakan warna karakter dan gaya font.

Pembaca Kode QR

Dekode kode QR dari gambar PNG, JPG, atau WebP di browser. Lihat URL, Wi-Fi, vCard, SMS, email, kalender, geo, atau teks sebelum digunakan.

Generator Kode QR

Buat kode QR secara lokal di browser dari URL, teks biasa, atau payload QR yang diformat benar, lalu unduh sebagai PNG.

Vektorisasi PNG ke SVG

Telusuri gambar raster PNG menjadi jalur SVG langsung di browser. Cocok untuk logo, ikon, dan gambar garis. Atur ambang, jumlah warna, dan penghalusan.

Editor Foto

Editor foto berbasis browser dengan pangkas, putar, kecerahan, kontras, saturasi, filter, hamparan teks, dan ekspor ke JPG, PNG, atau WebP.