Web grafiklerim için ne zaman SVG veya SVGZ kullanmalıyım?

Anladığım kadarıyla,

SVGZ, bir SVG'nin sıkıştırılmış bir dosya türüdür. SVG resimlerini kullanmayı çok seviyorum ve onlarla çok fazla deneyimim oldu.

Onları kullandığım her zaman birkaç yüz kilobayttan fazla bir grafiğe sahip olmadım.

Yanıt veren web siteleri yaparken duyarlı grafikler için SVG kullanıyorum. En sevdiğim tasarım stilim vektör tabanlı grafikler olduğu için onları da kullanıyorum. En güçlü tasarım gücüm, özellikle grafik tasarım söz konusu olduğunda illüstratördür.

SVG grafiğini kullanmamın bir diğer nedeni de, kollar, bacaklar vb. Gibi grafiğin belirli öğelerini canlandırmanın kolaylığı.

Özellikle arka plandaki unsurlar, tüm sayfa boyunca yayılacak bir şehir gibi ışıkların titremesini canlandırırken vesaire.

Dosya sıkıştırılmışsa, SVG kodunu kaybeder mi, böylece onu canlandırmazdım?

Sadece bir SVG üzerinden SVGZ kullanmam için herhangi bir neden var mı?

Güncelleştirme

Eskiden CS3'ün SVGZ'yi kurtaracağını öğrendiğim için web ile nasıl etki ettiklerini görmek için sadece bir SVG ve SVGZ yapmaya karar verdim.

Testten sonra SVGZ dosya tipi ile çok beklenmedik bir problemle karşılaştım. (Chrome, Firefox ve IE’de test edilmiştir) Resmin doğrudan URL’sine giderseniz bir hata alırsınız. Bu dosya türlerinde SVG koduna erişemeyeceğinizi farz ediyorum ama bir keman yaptıktan sonra görüntüyü göstermiyor bile.

Bunlar web için işe yaramaz mı?

.svg

.SVGZ

JSFIDDLE

— Josh Powell
kaynak

.svgzDoğru MIME türünü kullanarak sunulması kısmen web sunucusu yapılandırma sorunu ayarlanmış gibi görünüyor , bkz. Stackoverflow.com/questions/16725380/svgz-doesnt-display . Şahsen her zaman web'de SVG / vektör grafikleri için Raphael.js kullanıyorum , çünkü IE8 desteğine ihtiyacım var

— user56reinstatemonica8

Hmm, Çok faydalı linkler için teşekkürler. Kullanmak için herhangi bir sebep var mı SVGZ? Bir görüntü dosyasının boyutunu küçültmenin iyi olacağını düşündüm. Sadece bir SVGZweb için yararlı ya da herhangi bir şekilde gerçekten yararlı olup olmadığını merak ediyorum .

— Josh Powell,

Çalışırsa, dosya boyutunu oldukça kısaltır. Bu, etkileşimi karmaşık bir şeyde kullanıyorsanız faydalı olabilir - örneğin, yakınlaştırılabilen çok ayrıntılı bir SVG dünya haritası. zVasıta dosya boyutunu ve başka hemen hemen hiçbir şey kesmek için kullanılan sıkıştırma gziplemek.

— user56reinstatemonica8 20:13

@JoshPowell: Çoğu http sunucusunun gzip sıkıştırmalı içerik gönderdiği göz önüne alındığında bu sorunun amacını göremiyorum. Ve bazı sunucularda, .svg.gz dosyanızı isimlendirirseniz, tarayıcı orijinal dosyanın sıkıştırılmadığı bilgisini alır.

— user2284570 19

Yanıtlar:

Sıkıştırılmış svg desteği tarayıcıya göre değişecektir, ancak sunucuyu, svgz dosyasını kodlama bilgisi ile doğru şekilde işaretleyecek şekilde yapılandırmanız gerekir.

Svgz için sunucu yanıtı "Content-encoding: gzip" içerecek şekilde yapılandırılmalıdır

svg     Content-Type: image/svg+xml

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

Bir Apache web sunucusu için, bu bir .htaccess dosyası aracılığıyla sağlanabilir:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Sunucuya yerleştirmeden önce anında sıkıştırın veya pişirin mi, İçerik kodlamasının iptali gerektiğini unutmayın. Bunun gibi varlıklar için, önceden sıkıştırmanın daha iyi olacağını düşünüyorum. Aksi takdirde, dosyanın her isteği için sunucu CPU'su yiyorsunuzdur. Bu pek fazla gibi görünmeyebilir, ancak bu ABD sağlık web sitesini ortaya çıkaran bir tür küçümseme problemidir.

— Horatio
kaynak

Sunucunuz veya platformunuz tamamen akıllıysa, sıkıştırma işlemi gerçekleştirilebildiği için önbelleklenebildiğinden yüksek düzeyde optimize edilmiştir. Bu kesinlikle sitenizi çökertecek bir şey değildir.

— Josh Koenig

Beklediğiniz cevap bu olmayabilir, ancak web için, herhangi bir SVGZ dosyasını kullanmanız gerçekten gerekli değildir. Bunun nedeni bir SVGZ dosyasının basitçe önceden Gziped edilmiş bir SVG olmasıdır.

Modern web sunucuları, varlığa hizmet etmeden önce kendilerini Gzipping yapabilir ( daha fazla bilgi için StackOverflow'taki cevaba bakınız ), bu nedenle, sıkıştırıldığında 50KB olan bir 300KB SVG'niz varsa, web sunucusu tarafından otomatik olarak Gzip'lendiğinde aynı olacaktır. Böylece, satırda 300KB olmayacak, 50KB olacak ve sonra tarayıcı tarafından sıkıştırılmayacak.

— Taylor Jasko
kaynak

Sıkıştırılmış dosyanın bir yerde önbelleğe alındığından emin misin? Bu svg varlıklarını 5000 ziyaretçi için tekrar tekrar açmak çok fazla iş.

— bokan

@bokan: Bazı sunucu bir .gz dosya uzantısı ekleyerek içerikleri ön sıkıştırma seçeneği sunar. Bu nedenle, bir istemci index.html dosyasını ararsa, sunucu index.html.gz adlı önceden sıkıştırılmış dosya ile cevap verecektir.

— user2284570 19

@ user2284570: Yani .gz'yi elle yaratmanız gerekiyor. Aksi takdirde, dosyaları her gönderdiğinde sıkıştırır ve bu sunucu için çok fazla iş gerektirir.

— bokan

@bokan: Evet ve çoğu zaman basit İçerik Kodlama sıkıştırmasından çok fazla ek sunucu yapılandırması gerektirir. IE5 bile desteklemektedir. Bir dizindeki her statik dosyayı sıkıştırmak için bir komut dosyası oluşturmak basittir. İkinci durumda, bu hem disk alanından hem de bant genişliğinden tasarruf sağlar.

— user2284570