Kapan saya harus menggunakan SVG atau SVGZ untuk grafik web saya?

Dari pengertian saya,

SVGZ adalah jenis file terkompresi dari SVG. Saya suka menggunakan gambar SVG dan telah memiliki banyak pengalaman dengannya.

Setiap kali saya menggunakannya, saya tidak pernah memiliki grafik yang melebihi beberapa ratus kilobyte.

Saya menggunakan SVG untuk grafis responsif sambil membuat situs web responsif. Saya juga menggunakannya karena gaya desain favorit saya adalah grafis berbasis vektor. Kekuatan desain terkuat saya adalah ilustrator, terutama dalam hal desain grafis.

Alasan lain saya akan menggunakan grafik SVG adalah karena kemudahan menjiwai elemen-elemen tertentu dari grafik, seperti lengan, kaki, dll.

Terutama elemen latar belakang, seperti kota yang membentang di seluruh halaman sementara saya menghidupkan beberapa lampu berkedip dan sebagainya.

Jika file dikompresi, apakah akan kehilangan kode SVG jadi saya tidak bisa menghidupkannya?

Apakah ada alasan saya harus menggunakan SVGZ hanya dari SVG?

Memperbarui

Yah saya memutuskan untuk hanya membuat SVG dan SVGZ untuk melihat bagaimana mereka bertindak dengan web sejak saya menemukan karya saya CS3 kuno dapat menyelamatkan SVGZ!

Setelah pengujian saya mengalami masalah yang sangat tidak terduga dengan tipe file SVGZ. (Diuji pada Chrome, Firefox, dan IE) Jika Anda pergi ke URL langsung dari gambar Anda mendapatkan kesalahan. Saya berasumsi Anda tidak dapat mengakses kode SVG pada jenis file ini tetapi setelah membuat biola bahkan tampaknya tidak menampilkan gambar.

Apakah ini tidak berguna untuk web?

.svg

.svgz

JSFIDDLE

— Josh Powell
sumber

Sepertinya itu mungkin sebagian pengaturan masalah konfigurasi server web .svgzuntuk dilayani menggunakan tipe MIME yang tepat, lihat stackoverflow.com/questions/16725380/svgz-doesnt-display . Secara pribadi saya selalu menggunakan Raphael.js untuk SVG / grafik vektor di web karena saya memerlukan dukungan IE8

— user56reinstatemonica8

Hmm, Terima kasih atas tautannya yang sangat berguna. Apakah ada alasan untuk menggunakan SVGZ? Saya pikir mungkin akan lebih baik untuk mengurangi ukuran file gambar. Saya hanya ingin tahu apakah suatu SVGZcara berguna untuk web atau benar-benar berguna dalam cara apa pun.

— Josh Powell

Jika berhasil, itu akan mengurangi ukuran file cukup banyak. Ini mungkin berguna jika Anda menggunakan interaktivitas pada sesuatu yang kompleks - misalnya peta dunia SVG yang sangat rinci yang dapat diperbesar. Cara zkompresi gzip yang digunakan untuk mengurangi ukuran file dan hampir tidak ada yang lain.

— user56reinstatemonica8

@JoshPowell: mengingat bahwa sebagian besar server http mengirim konten dengan kompresi gzip, saya tidak melihat tujuan dari pertanyaan ini. Dan dengan beberapa server, jika Anda memberi nama file Anda .svg.gz, maka browser akan menerima informasi bahwa file asli tidak dikompresi.

— user2284570

Jawaban:

Dukungan untuk svg terkompresi akan bervariasi berdasarkan browser, tetapi Anda perlu mengkonfigurasi server untuk menandai file svgz dengan informasi tentang pengodeannya untuk secara eksplisit memberi tahu browser cara mendekodekannya setelah diterima.

Respons server untuk svgz perlu dikonfigurasi untuk menyertakan "Content-encoding: gzip"

svg     Content-Type: image/svg+xml

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

Untuk server web Apache, ini dapat dicapai melalui file .htaccess:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Perhatikan bahwa apakah Anda zip zip dengan cepat atau memanggangnya sebelum Anda meletakkannya di server, penyandian konten harus diisyaratkan. Untuk aset seperti ini, saya pikir lebih baik melakukan pra-kompres. Jika tidak, Anda memakan CPU server untuk setiap permintaan file. Ini mungkin tidak tampak banyak, tetapi ini adalah jenis masalah unoptimization yang menurunkan misalnya situs web kesehatan AS.

— horatio
sumber

Jika server atau platform Anda sama sekali cerdas, melakukan kompresi di sana sangat dioptimalkan karena dapat di-cache. Ini pasti bukan jenis hal yang akan merusak situs Anda, apalagi health.gov.

— Josh Koenig

Ini mungkin bukan jawaban yang Anda harapkan, tetapi untuk web, itu tidak benar-benar diperlukan untuk menggunakan file SVGZ. Alasannya adalah bahwa file SVGZ hanyalah sebuah SVG yang telah pre-Gziped.

Server web modern dapat melakukan Gzipping sendiri sebelum menyajikan aset (lihat jawaban ini di StackOverflow untuk info lebih lanjut), jadi jika Anda memiliki SVG 300KB yang 50KB saat dikompresi, itu akan menjadi sama ketika Gzipped oleh server web secara otomatis. Jadi tidak akan 300KB di telepon, itu akan menjadi 50KB dan kemudian akan dikompresi oleh browser.

— Taylor Jasko
sumber

Apakah Anda yakin file terkompresi di-cache di suatu tempat? Banyak pekerjaan untuk mendapatkan aset svg ini berulang-ulang untuk 5000 pengunjung.

— bokan

@bokan: beberapa server menawarkan opsi untuk pra-kompres konten dengan menambahkan ekstensi file .gz. Jadi, jika klien mencari index.html server akan menjawab dengan file pra-kompresi bernama index.html.gz.

— user2284570

@ user2284570: Jadi, Anda harus membuat .gz dengan tangan. Kalau tidak, itu akan mengkompres file setiap kali mengirimnya, dan itu banyak pekerjaan untuk server.

— bokan

@bokan: Ya dan sering membutuhkan banyak konfigurasi server tambahan daripada kompresi penyandian konten sederhana. Bahkan IE5 mendukungnya. membuat skrip untuk mengompresi setiap file statis di dalam direktori tetap sederhana. Dalam kasus kedua, ini menghemat ruang disk dan bandwidth.

— user2284570