SVGZ ve SVG: Düzenleme ve aktarım için dosya seçimi

SVGZ, gzip ile sıkıştırılmış bir SVG dosyasıdır. Sıkıştırmayı açtığınızda yolları, renkleri, metni ve varsa gömülü görselleriyle birlikte SVG belgesini geri elde edersiniz. W3C’nin SVG media-type registration belgesi, .svgz uzantısını .svg.gz için alternatif bir ad olarak tanımlar.

SVGZ ile SVG arasındaki seçiminizi dosyanın kullanılacağı iş akışına göre yapın. Birinin okunabilir işaretleme koduna ihtiyacı varsa veya uygulama bu biçimi bekliyorsa normal bir .svg dosyasını koruyun. Alıcı destekliyorsa ve sıkıştırılmış dosya göndermek için bir nedeniniz varsa .svgz kullanın. Web sitesi için dosya adlarını değiştirmeden önce HTTP sıkıştırmasını kontrol edin: .svg ile biten bir URL zaten sıkıştırılmış içerik gönderiyor olabilir.

Aşağıdaki örnek, özgün bir 332 baytlık rozeti 243 bayta sıkıştırır ve ardından özgün baytları aynen geri getirir. Bu, tek bir dosyaya ait bir sonuçtur; görseliniz veya sayfa hızınız için bir vaat değildir.

SVG, SVGZ’ye dönüştüğünde ne değişir?

MDN’nin Getting started with SVG kılavuzu, düz metin SVG ile gzip ile sıkıştırılmış SVG’yi ayırır ve SVGZ’nin gerektirdiği sunucu yapılandırmasını açıklar. Temeldeki belgeye aşina değilseniz SVG dosyasının neler içerdiğiyle başlayın.

Sıkıştırılmış bir kopya, kullanışlı bir paketleme biçimidir. Nesneleri incelemek, düzeltmeler yapmak ve sonraki aracın ihtiyaç duyduğu biçimi dışa aktarmak için düzenlenebilir ana dosyanızı ayrı tutun.

Küçük bir rozetle SVGZ sıkıştırma ve açma işlemini deneyin

Bu özgün illüstrasyonda turkuaz bir altıgen, mercan rengi bir güneş ve açık renkli bir dağ bulunur. Aşağıdaki içeriği bir deneme klasörüne badge.svg olarak kaydedin:

<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>

gzip, cmp ve wc bulunan bir sistemde bu komutları aynı klasörde çalıştırın. Bu dosyalar zaten korumanız gereken çalışmalar içeriyorsa çıktı için yeni dosya adları kullanın.

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

İlk komut, kaynağı koruyarak sıkıştırılmış bir kopya yazar. -n seçeneği, özgün dosya adını ve zaman damgasını gzip başlığına eklemez. İkinci komut, sıkıştırılmış kopyayı çözümleyerek başka bir dosyaya yazar. cmp baytları karşılaştırır, wc -c ise bayt sayılarını bildirir.

Bu işlemleri Apple gzip 457.140.3 ile çalıştırdık. Tüm komutlar başarıyla tamamlandı ve cmp, özgün SVG ile sıkıştırması açılan SVG arasında hiçbir fark bulmadı.

Sıkıştırılmış dosya, bu kaynağın boyutunun yaklaşık %26,8’ine karşılık gelen 89 bayt tasarruf sağladı. Boşlukların, satır sonlarının, meta verilerin, görselin veya sıkıştırma ayarlarının farklı olması sonucu değiştirebilir. Bayt karşılaştırması, bu sıkıştırma ve açma işleminin kaynağı koruduğunu gösterir. Tarayıcı aktarım süresini, görüntüleme performansını veya bir düzenleme uygulamasıyla uyumluluğu ölçmez.

Yalnızca SVG bekleyen bir düzenleyicide SVGZ açmanız gerekiyorsa ihtiyacınız olan işlem sıkıştırmayı açmaktır. badge.svgz dosyasını badge.svg olarak yeniden adlandırmak, sıkıştırılmış baytları olduğu gibi bırakır. Benzer şekilde, SVG’nin adını SVGZ olarak değiştirmek gzip’i çalıştırmaz.

Sıkıştırmayı görsel temizliğinden ayrı tutun

Diyelim ki vektörleştirilmiş bir logonun dış hatları pürüzlü ve yüzlerce gereksiz noktası var. Gzip, dosyanın saklanan boyutunu küçültebilir; ancak sıkıştırmayı açınca aynı noktalar geri gelir. Düzenleme sorunu geometrik karmaşıklıksa SVG düğüm temizleme kılavuzunu kullanın. Noktaları kaldırmak görseli değiştirebileceği için sadeleştirme sırasında silueti karşılaştırın.

İşaretleme kodunu optimize etmek başka bir işlemdir. Meta verileri kaldırmak, sayıları yeniden yazmak veya uyumlu şekilleri birleştirmek, kaynak belgeyi sıkıştırılmadan önce değiştirir. Baytları aynen koruyan bir gzip sıkıştırma ve açma işlemi bunların hiçbirini yapmaz. Optimizasyon aracı SVG’yi de düzenliyorsa her değişikliği sıkıştırmaya bağlamak yerine çıktısını bağımsız olarak inceleyin. SVGO yapılandırması ve kimlikleri koruma kılavuzu, varsayılan ön ayarda harici CSS bağlantı noktası kaybolan özgün bir rozet üzerinden bu incelemeyi gösterir.

SVG, raster bir görsel de içerebilir. Bu belgeyi sıkıştırmak gömülü görseli korur; resimdeki nesnelerin etrafında düzenlenebilir dış hatlar oluşturmaz. Gömülü raster görsel tanılama kılavuzu, bir görsel kapsayıcısını vektör yollarıyla oluşturulmuş bir çalışmadan ayırmanıza yardımcı olur.

Bu ayrımlar, sonraki adımı seçmenizi kolaylaştırır: işaretleme kodunu geri almak için sıkıştırmayı açın, geometriyi değiştirmek için düzenleyin ve yalnızca uygun raster görseller için yeni vektör şekilleri gerektiğinde vektörleştirme yapın.

Web sitesi normal SVG yanıtlarını sıkıştırabilir

HTTP sıkıştırması, URL’de gösterdiğiniz dosya adından bağımsızdır. Sunucu, badge.svg için bir istek alıp bu SVG’nin sıkıştırılmış gösterimini gönderebilir. MDN’nin Compression in HTTP kılavuzu bu uzlaşmayı açıklar: istek, desteklenen kodlamaları bildirir; yanıt ise kullandığı kodlamayı belirtir. Gösterim Accept-Encoding değerine göre değişiyorsa önbelleklerin bu sürümleri ayırt edebilmesi için yanıtta Vary: Accept-Encoding kullanılır.

Gzip ile kodlanmış bir SVG yanıtında ilgili başlıklar şunlardır:

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

Content-Type, çözümleme sonrasındaki medya türünü tanımlar. Content-Encoding, alıcıya yanıt gövdesini nasıl çözümleyeceğini söyler. MDN’nin Content-Encoding referansı bu ayrımı açıklar. Bu başlıklar gerçekten gönderilen baytları tanımlamalıdır; sıkıştırılmamış SVG’ye Content-Encoding: gzip eklemek onu sıkıştırmaz.

SVG görseli olarak sunulan kayıtlı bir .svgz için MDN’nin Getting started with SVG kılavuzu, SVG medya türünü ve gzip içerik kodlamasını gerekli görür. CDN davranışı da dâhil olmak üzere son yanıtı tarayıcının Network panelinde inceleyin. Yerel dosyanın başarıyla açılması, bu yanıtı doğrulamaz.

Mevcut SVG’yi SVGZ ile değiştirmeden önce normal SVG yanıtının zaten sıkıştırılıp sıkıştırılmadığını kontrol edin. Yerel bir SVG dosyasının boyutunu ağ aktarım boyutuyla karşılaştırmak yerine gerçek yanıtları önbellek durumu da dâhil aynı koşullarda karşılaştırın. Yukarıdaki rozet testimiz bu web karşılaştırmasını yapmaz.

Sonraki uygulamanın kullanabileceği bir dosya gönderin

Düzenlenebilir dosya tesliminde alıcının hangi biçimi içe aktarabildiğini sorun. SVG’yi kabul edip SVGZ’yi reddediyorsa sıkıştırması açılmış SVG’yi sağlayın ve bu kopyayı test edin. Sıkıştırmayı açmak, uygulamanın kendisinin anlamadığı SVG özelliklerine destek ekleyemez.

Kabul edilen dosyayı hedef uygulamada açıp nesnelerini inceleyin. Yazıları, kırpmayı, gömülü görselleri, renkleri ve önemli olan en küçük ayrıntıları kontrol edin. Bu incelemeyi dosyanın sıkıştırmasını açma işleminden ayrı tutun: kaynak baytları aynı olsa bile farklı özellik desteklerine sahip uygulamalar bunları farklı yorumlayabilir.

Dosya boş görünüyorsa önce sıkıştırmanın okunabilir SVG’ye açılıp açılmadığını belirleyin. Ardından boş SVG sorun giderme kılavuzuyla belgeyi ve görüntülendiği bağlamı inceleyin. Tekrar tekrar sıkıştırmak görünmeyen dolguları veya çizgileri, eksik içeriği ya da uygun olmayan bir tuvali düzeltmez.

Ana dosyayı, teslim kopyasını ve alıcı aracın adını belirten kısa bir notu saklayın. Bu, dosyanın nereye gideceğini bilmeden en küçük yerel dosyayı seçmekten daha faydalıdır.

Kaynak hâlâ vektör yollarına ihtiyaç duyuyorsa

Vektör ana dosyası kayıpsa ve elinizde yalnızca düz renkli bir PNG veya JPG logo kaldıysa PerfectVector’ın görselden vektöre dönüştürme iş akışı, düzenlenebilir bir SVG adayı hazırlamanıza yardımcı olabilir. Önizlemeyi özgün görselle karşılaştırın, boşlukları ve ayrı bölgeleri inceleyin, indirdiğiniz dosyayı kullanmayı planladığınız düzenleyicide açın. Sıkıştırma biçimini ancak görseli onayladıktan sonra seçin.

Mevcut bir SVGZ’nin sıkıştırmasını açmak için PerfectVector’a ihtiyacınız yoktur. Bu iş için sıkıştırmayı açma işlemini kullanın. Amaçlanan görünümü koruyorsa fotoğrafları veya boyama efektlerini raster olarak tutun ve mevcut bir vektör ana dosyası varsa onu kullanın. Blogun biçim ve düzenleme kılavuzları, paketlemeden önce bu kaynak seçimlerini ele alır.

Sık sorulan sorular

SVGZ, SVG’den daha mı kalitelidir? Hayır. Gzip sıkıştırması, içeriğin saklanan gösterimini değiştirir. Doğru bir sıkıştırma açma işlemi SVG kaynağını geri getirir; yollarını, renklerini veya gömülü görsellerini iyileştirmez.

SVGZ’yi SVG’ye nasıl dönüştürürüm? Gzip işleyebilen bir araçla sıkıştırmayı açın, ardından elde edilen SVG’yi kaydedin. Örneğin gzip -dc badge.svgz > roundtrip.svg, sıkıştırması açılmış bir kopya yazar. Yalnızca uzantıyı yeniden adlandırmak bu işlemi yapmaz.

SVGZ web sitesini her zaman hızlandırır mı? Uzantı, belirli bir hız avantajı sağlamaz. Normal bir SVG yanıtı zaten HTTP sıkıştırması kullanıyor olabilir. Gerçek yanıt başlıklarını, aktarılan baytları, önbellek koşullarını ve sayfanın davranışını kontrol edin.

SVG’yi sıkıştırmak düğüm sayısını azaltır mı? Hayır. Gzip, sıkıştırma açıldığında kaynağı korur. Yol sadeleştirme veya başka bir SVG optimizasyonu, görselin ayrıca incelenmesini gerektiren ayrı bir işlemdir.

Kaynaklar

1. W3C — SVG media-type registration — SVGZ’yi gzip ile sıkıştırılmış SVG olarak tanımlar ve SVG.GZ ile ilişkisini açıklar.
2. MDN — Getting started with SVG — dosya biçimlerini ayırır ve SVGZ yanıt başlıklarını belgeler.
3. MDN — Content-Encoding — çözümlemeyi ve kodlama ile medya türü arasındaki ilişkiyi açıklar.
4. MDN — Compression in HTTP — yanıt sıkıştırması için uzlaşmayı ve önbellek varyasyonlarını ele alır.

Teslim dosyasını alıcı araca uygun seçin, ardından sıkıştırması açılmış görseli doğrulayın. Başlangıç noktanız düzenlenebilir şekillere ihtiyaç duyan raster bir logoysa bir SVG adayı hazırlayın ve nasıl sıkıştıracağınıza karar vermeden önce yollarını inceleyin.