SVGZ vs SVG: Pilih File untuk Pengeditan atau Penyerahan

SVGZ adalah file SVG yang dikompresi dengan gzip. Dekompresikan file tersebut dan Anda memulihkan dokumen SVG, termasuk path, warna, teks, dan gambar tertanam. Registrasi tipe media SVG W3C mendefinisikan .svgz sebagai alias .svg.gz.

Pilih antara SVGZ dan SVG sesuai alur kerja penerima. Pertahankan .svg biasa ketika seseorang membutuhkan markup yang dapat dibaca atau aplikasi mengharapkan format itu. Gunakan .svgz ketika penerima mendukungnya dan Anda memiliki alasan menyerahkan file terkompresi. Untuk situs web, periksa kompresi HTTP sebelum mengubah nama file: URL berakhiran .svg sudah dapat mengirim konten terkompresi.

Contoh di bawah mengompresi lencana orisinal 332 byte menjadi 243 byte, lalu memulihkan byte asli yang sama persis. Itu adalah hasil untuk satu file, bukan janji tentang artwork atau kecepatan halaman Anda.

Apa yang berubah ketika SVG menjadi SVGZ?

Panduan jenis file SVG MDN membedakan SVG teks biasa dari SVG terkompresi gzip dan menjelaskan konfigurasi server yang dibutuhkan SVGZ. Jika dokumen dasarnya tidak dikenal, mulai dengan isi file SVG.

Salinan terkompresi merupakan kemasan yang berguna. Simpan master yang dapat diedit secara terpisah agar Anda dapat memeriksa objek, membuat koreksi, dan mengekspor bentuk yang dibutuhkan alat berikutnya.

Coba proses SVGZ bolak-balik dengan satu lencana kecil

Ilustrasi orisinal ini berisi heksagon hijau kebiruan, matahari koral, dan gunung pucat. Simpan yang berikut sebagai badge.svg dalam folder scratch:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
  <path d="m60 78 10-16 11 16-11-5Z" fill="#a8d9d3"/>
</svg>

Pada sistem dengan gzip, cmp, dan wc, jalankan perintah berikut dalam folder tersebut. Gunakan nama file output baru jika file tersebut sudah berisi pekerjaan yang perlu Anda simpan.

gzip -n -c badge.svg > badge.svgz
gzip -dc badge.svgz > roundtrip.svg
cmp badge.svg roundtrip.svg
wc -c badge.svg badge.svgz roundtrip.svg

Perintah pertama menulis salinan terkompresi sambil mempertahankan sumber. Opsi -n menghilangkan nama file asli dan timestamp dari header gzip. Perintah kedua mendekode salinan terkompresi menjadi file lain. cmp memeriksa byte, dan wc -c melaporkan jumlahnya.

Kami menjalankan urutan ini dengan Apple gzip 457.140.3. Semua perintah selesai dengan sukses, dan cmp tidak menemukan perbedaan antara SVG asli dan yang didekode.

File terkompresi menghemat 89 byte, sekitar 26.8% ukuran sumber ini. Spasi, akhir baris, metadata, artwork, atau pengaturan kompresi berbeda dapat mengubah hasil. Perbandingan byte membuktikan bahwa proses bolak-balik ini mempertahankan sumber. Perbandingan tidak mengukur waktu transfer browser, performa rendering, atau kompatibilitas dengan aplikasi pengeditan.

Jika Anda hanya perlu membuka SVGZ dalam editor yang mengharapkan SVG, langkah dekompresi adalah operasi yang relevan. Mengganti nama badge.svgz menjadi badge.svg membiarkan byte terkompresi tetap di tempatnya. Demikian pula, mengganti nama SVG menjadi SVGZ tidak menjalankan gzip.

Pisahkan kompresi dari pembersihan artwork

Misalkan logo hasil penelusuran memiliki outline kasar dan ratusan titik yang tidak perlu. Gzip mungkin mengurangi ukuran tersimpannya, tetapi dekode mengembalikan titik yang sama. Gunakan panduan pembersihan node SVG ketika masalah pengeditannya adalah kompleksitas geometris. Bandingkan siluet selama penyederhanaan karena menghapus titik dapat mengubah artwork.

Optimasi markup adalah operasi lain. Menghapus metadata, menulis ulang angka, atau menggabungkan bentuk kompatibel mengubah dokumen sumber sebelum dikompresi. Proses gzip bolak-balik yang identik byte demi byte tidak melakukan hal tersebut. Jika alat optimasi juga mengedit SVG, tinjau output-nya secara mandiri alih-alih mengaitkan setiap perubahan dengan kompresi. Panduan konfigurasi SVGO dan pelestarian ID memperagakan peninjauan itu dengan lencana orisinal yang hook CSS eksternalnya menghilang dengan preset default.

SVG juga dapat berisi gambar raster. Mengompresi dokumen itu mempertahankan gambar tertanam; proses ini tidak membuat outline yang dapat diedit di sekitar objek gambar. Diagnosis raster tertanam membantu membedakan kontainer gambar dari artwork yang dibangun dengan path vektor.

Perbedaan tersebut memudahkan pemilihan langkah berikutnya: dekompresi untuk memulihkan markup, edit untuk mengubah geometri, dan telusuri hanya ketika artwork raster yang sesuai membutuhkan bentuk vektor baru.

Situs web dapat mengompresi respons SVG biasa

Kompresi HTTP terpisah dari nama file yang Anda tampilkan dalam URL. Server dapat menerima permintaan badge.svg dan mengirim representasi terkompresi dari SVG tersebut. Panduan kompresi HTTP MDN menjelaskan negosiasinya: permintaan menyebutkan encoding yang didukung, dan respons mengidentifikasi encoding yang digunakan. Ketika representasi bervariasi menurut Accept-Encoding, respons menggunakan Vary: Accept-Encoding agar cache dapat membedakan versi tersebut.

Untuk respons SVG dengan encoding gzip, header yang relevan adalah:

Content-Type: image/svg+xml
Content-Encoding: gzip

Content-Type mengidentifikasi media yang didekode. Content-Encoding memberi tahu penerima cara mendekode body respons. Referensi Content-Encoding MDN menjelaskan perbedaan tersebut. Header ini harus mendeskripsikan byte yang benar-benar dikirim; menambahkan Content-Encoding: gzip pada SVG yang tidak terkompresi tidak mengompresinya.

Untuk .svgz tersimpan yang disajikan sebagai gambar SVG, panduan server SVGZ MDN meminta tipe media SVG dan content encoding gzip. Periksa respons akhir dalam panel Network browser, termasuk perilaku CDN. File lokal yang berhasil dibuka tidak memverifikasi respons itu.

Sebelum mengganti SVG yang sudah ada dengan SVGZ, periksa apakah respons SVG biasa sudah terkompresi. Bandingkan respons sebenarnya dalam kondisi yang sama, termasuk keadaan cache, alih-alih membandingkan ukuran file SVG lokal dengan ukuran transfer jaringan. Pengujian lencana kami di atas tidak melakukan perbandingan web itu.

Kirim file yang dapat digunakan aplikasi berikutnya

Untuk penyerahan yang dapat diedit, tanyakan format yang diimpor penerima. Jika aplikasi menerima SVG tetapi menolak SVGZ, berikan SVG yang didekompresi dan uji salinan itu. Dekompresi tidak dapat menambahkan dukungan untuk fitur SVG yang tidak dipahami aplikasi sendiri.

Buka file yang diterima dalam aplikasi yang dimaksudkan dan periksa objeknya. Periksa tulisan, clipping, gambar tertanam, warna, dan detail terkecil yang penting. Pisahkan peninjauan ini dari dekode file: byte sumber identik masih dapat diinterpretasikan berbeda oleh aplikasi dengan dukungan fitur berbeda.

Jika file tampak kosong, pastikan dahulu apakah file didekode menjadi SVG yang dapat dibaca. Kemudian selidiki dokumen dan konteks tampilannya dengan panduan pemecahan masalah SVG kosong. Kompresi berulang tidak memperbaiki pewarnaan tak terlihat, konten hilang, atau canvas yang tidak sesuai.

Simpan master, salinan penyerahan, dan catatan singkat yang menyebutkan alat penerima. Itu lebih berguna daripada memilih file lokal terkecil sebelum mengetahui tujuannya.

Ketika sumber masih membutuhkan path vektor

Jika master vektor hilang dan hanya logo PNG atau JPG datar tersisa, alur kerja gambar-ke-vektor PerfectVector dapat membantu menyiapkan kandidat SVG yang dapat diedit. Bandingkan pratinjau dengan sumber asli, periksa lubang dan wilayah terpisah, dan buka file yang diunduh dalam editor tujuan Anda. Pilih kompresi hanya setelah menerima artwork.

PerfectVector tidak diperlukan untuk membongkar SVGZ yang sudah ada. Gunakan dekompresi untuk tugas itu. Pertahankan foto atau efek lukisan sebagai raster ketika itu menjaga tampilan yang dimaksudkan, dan gunakan master vektor yang sudah ada jika tersedia. Panduan format dan pengeditan di blog membahas pilihan sumber tersebut sebelum pengemasan.

FAQ

Apakah SVGZ memiliki kualitas lebih tinggi daripada SVG? Tidak. Kompresi gzip mengubah representasi tersimpan. Dekompresi yang benar memulihkan sumber SVG; proses ini tidak memperbaiki path, warna, atau gambar tertanamnya.

Bagaimana cara mengubah SVGZ menjadi SVG? Dekompresikan dengan alat yang menangani gzip, lalu simpan SVG yang didekode. Sebagai contoh, gzip -dc badge.svgz > roundtrip.svg menulis salinan yang didekode. Mengganti ekstensi saja tidak melakukan operasi tersebut.

Apakah SVGZ selalu membuat situs web lebih cepat? Tidak ada manfaat kecepatan tetap yang berasal dari ekstensi. Respons SVG biasa mungkin sudah menggunakan kompresi HTTP. Periksa header respons sebenarnya, byte yang ditransfer, kondisi cache, dan perilaku halaman.

Apakah mengompresi SVG mengurangi jumlah node-nya? Tidak. Gzip mempertahankan sumber melalui dekode. Penyederhanaan path atau optimasi SVG lain adalah operasi terpisah yang membutuhkan peninjauan artwork sendiri.

Sources

1. W3C — Registrasi tipe media SVG — Mendefinisikan SVGZ sebagai SVG terkompresi gzip dan hubungannya dengan SVG.GZ.
2. MDN — Memulai SVG — Membedakan bentuk file dan mendokumentasikan header respons SVGZ.
3. MDN — Content-Encoding — Menjelaskan dekode dan hubungan antara encoding dan tipe media.
4. MDN — Kompresi dalam HTTP — Membahas negosiasi kompresi respons dan variasi cache.

Sesuaikan file penyerahan dengan alat penerima, lalu verifikasi artwork yang didekode. Jika titik awal Anda adalah logo raster yang membutuhkan bentuk yang dapat diedit, siapkan kandidat SVG dan tinjau path-nya sebelum menentukan cara mengompresinya.