SVGO ile SVG'yi gerekli yapıyı koruyarak küçültün

Bir SVG'yi sayfadaki kullanımını bozmadan SVGO ile optimize etmek için özgün dosyayı saklayın, sayfanızın hangi yapıya bağımlı olduğunu belirleyin ve ayrı olarak optimize edilmiş bir kopyayı o sayfada test edin. Dosyanın küçülmesi ve tek başına açılan önizlemenin değişmemesi, CSS seçicilerinin, betiklerin veya başvuruların hâlâ çalıştığını kanıtlamaz.

Özgün rozetimiz bu farkı görünür kılıyor. SVGO'nun varsayılan ön ayarı, kaynak boyutunu 437 bayttan 263 bayta indirdi; ancak çevresindeki HTML'nin güneşi yeniden renklendirmek için kullandığı ID'yi kaldırdı. cleanupIds devre dışı bırakıldığında bu bağlantı noktasını koruyan 281 baytlık bir kopya oluştu. Bu ölçümler, SVGO 4.1.0 ile bu tek örnek dosyayı tanımlar; diğer çizimler için bir sıkıştırma garantisi değildir.

SVGO mevcut SVG işaretlemesini düzenler. Elinizde yalnızca PNG veya JPG varsa önce vektör geometrisi oluşturun ya da onu yeniden elde edin. Optimizasyon, bir bitmap içindeki nesneleri düzenlenebilir yollara dönüştüremez.

Hangi SVG yapısını korumanız gerektiğine karar verin

Optimizasyon aracını çalıştırmadan önce görünür öğeler ile başka bir belgenin veya uygulamanın başvurduğu öğeleri ayırt edin. SVGO'nun varsayılan ön ayarı, ID'leri, grupları, stilleri ve yol verilerini değiştiren işlemler içerir. Bir entegrasyon farklı bir eklenti kümesi de seçebilir; bu nedenle dosyanızı gerçekten işleyen aracın yapılandırmasını kontrol edin.

Bunlar ayrı kontrollerdir. Bir ID'yi korumak her grubu, düğümü veya düzenlenebilir nesneyi korumaz. Benzer biçimde, doğru görüntülenme de bir düzenleyicinin tercih ettiğiniz katman yapısını geri getireceğini göstermez. Düzenlenebilir bir ana dosya saklayın ve hedef kullanım için bir teslim kopyası üretin.

Yeniden kullanılabilir sembollerde SVG sprite rehberi, başvurunun onu kullanan tarafını ele alır. Bu makale, dosya o tarafa ulaşmadan önce bir optimizasyon adımının neleri değiştirebileceğine odaklanır.

Harici CSS bağlantı noktasının bozulmasını yeniden oluşturun

Node.js ve npm'nin kullanılabilir olduğu boş bir deneme klasörü kullanın. Elle yazılmış bu illüstrasyonu, sondaki satır sonu dahil olmak üzere input.svg olarak kaydedin. Bu, bir yapılandırma örnek dosyasıdır; PerfectVector dönüşüm sonucu değildir.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <!-- Original illustration for an SVGO configuration test. -->
  <metadata>Editable master: preserve the badge-accent CSS hook.</metadata>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle id="badge-accent" cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
</svg>

Bu örnekte kullanılan sürümü aynen yükleyin, ardından yeni bir çıktı dosyası üretin:

npm install --save-exact svgo@4.1.0
npx svgo input.svg -o default.svg

Mevcut bir svgo.config.mjs beklenmedik ayarlar sağlamasın diye bunu temiz klasörde çalıştırın. Resmî SVGO deposu, ayrı çıktı dosyası adlarını ve yapılandırmanın yüklenmesini belgeler. Bir proje derlemesinde sürümü ve yapılandırmayı sürüm kontrolünde tutun; böylece yükseltme bilinçli bir değişiklik olur.

default.svg dosyasını metin olarak açın. Daire hâlâ mercan rengi dolguya sahiptir; ancak badge-accent ID'si artık yoktur. Bu ID'ye SVG belgesi içinde başvurulmuyordu. cleanupIds belgeleri, eklentinin kullanılmayan ID'leri kaldırdığını ve başvurulanları kısalttığını açıklar. Harici bir sayfanın seçicisi, bu örnek dosyanın girdisinin dışındadır.

Sonucu görmek için SVG işaretlemesini doğrudan bir HTML sayfasına yerleştirin ve şu stili SVG'nin dışında kullanın:

<style>
  #badge-accent { fill: #f5bf42; }
</style>

Bu testte sayfa başına bir kopya kullanın. Özgün SVG'deki güneş, seçici eşleştiği için altın rengine döner. Varsayılan ayarla optimize edilen güneş, ID'si eksik olduğu için mercan renginde kalır. Dosyalardan herhangi birini img öğesiyle yüklemek farklı bir test olurdu: barındıran sayfa, aynı belgenin içindeki bir şekli seçiyor olmazdı.

Bağlantı noktasını koruyun ve testi tekrarlayın

Bunu aynı klasörde svgo.config.mjs olarak kaydedin:

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupIds: false,
        },
      },
    },
  ],
};

Şimdi başka bir kopya yazın:

npx svgo input.svg --config svgo.config.mjs -o preserved.svg
wc -c input.svg default.svg preserved.svg

Bu geçersiz kılma ayarı, varsayılan ön ayarın geri kalanını korurken yalnızca bu eklentiyi devre dışı bırakır. Gösterilen ID bağımlılığı için bir başlangıç noktasıdır. Her türlü çizim, animasyon, erişilebilirlik ilişkisi veya uygulamaya özgü yapı için evrensel olarak güvenli bir yapılandırma değildir.

Yukarıdaki komutları temiz bir klasörde çalıştırdık ve eşdeğer yapılandırmaları ayrıca SVGO 4.1.0'ın JavaScript API'si üzerinden yürüttük. CLI ve API çıktıları bayt düzeyinde aynıydı; optimize edilmiş dosyalara sonda satır sonu eklenmedi. Ardından her sonucu aynı harici CSS kuralıyla kendi HTML belgesinde görüntüledik. Tarayıcı şu sonuçları bildirdi:

ID'yi koruyan çıktı, bu kaynağın yaklaşık %35,7'sine karşılık gelen 156 bayt tasarruf sağladı. Varsayılan çıktıdan 18 bayt daha büyüktü ve ihtiyaç duyduğumuz davranışı korudu. Boşluklar, satır sonları, sürümler ve çıktı biçimlendirmesi bayt sayılarınızı değiştirebilir.

Bu testte üç kopya da viewBox="0 0 160 160" değerini korudu. Görünür sonucu ve tarayıcının hesapladığı dolguyu kontrol ettik. Ağ üzerinden aktarım süresini ölçmedik; her tarayıcıyı, düzenleyiciyi, SVG özelliğini veya derleme entegrasyonunu da test etmedik.

Ayarları belirli bir bağımlılığa göre düzenleyin

Yalnızca birkaç ID dışarıdan kullanılan bağlantı noktasıysa cleanupIds, preserve ve preservePrefixes seçeneklerini de sunar. Bağımlılığı açıkça adlandırabildiğinizde bunları kullanın, ardından dosyayı kullanan tarafta aynı testi tekrarlayın. Birkaç SVG aynı HTML belgesine doğrudan gömülecekse yinelenen ID'leri de kontrol edin. Zaten yinelenmiş bir ID'yi korumak onu benzersiz yapmaz; birinin adını değiştirmek, ona başvuranları güncellemeyi gerektirir.

SVG içindeki bir stil veya betik, optimizasyon aracının davranışını değiştirebilir. cleanupIds belgeleri, bu öğeler bulunduğunda geri çekilen bir koruma mekanizmasını açıklar. Bu mekanizmanın başka bir belgedeki CSS için de geçerli olduğunu varsaymayın ve hangi başvuruların ID'lere bağlı olduğunu anlamadan temizlemeyi zorlamayın.

Sayısal hassasiyeti ayrı ele alın. Daha az ondalık basamak işaretlemeyi küçültebilir; ancak kabul edilebilir değişiklik, çizimin koordinat ölçeğine ve son görüntüleme boyutuna bağlıdır. Küçük boşlukları, köşeleri ve eğrileri grafiğin kullanılacağı boyutlarda inceleyin. Başarılı bir ID kontrolü bu ayrıntılar hakkında hiçbir şey söylemez.

Yerleşiminiz ölçekleme davranışına bağlıysa viewBox değerini koruyun. removeViewBox eklentisinin belgeleri, ölçekleme ve kırpma sonuçları konusunda uyarır. Burada kullanılan, belgelenmiş varsayılan ön ayarda yer almaz; açıkça eklemek ayrı bir karardır. Hangi sürüm ve ön ayar için yazıldığını kontrol etmeden eski bir yapılandırmayı kopyalamayın.

Yoğun ayrıntılı bir vektörleştirilmiş konturda, işaretleme optimizasyonu ile bilinçli düğüm temizliği de farklı sorulara yanıt verir. Geometrinin sadeleştirilmesi gerekip gerekmediğini değerlendirmek için SVG düğüm rehberini kullanın ve düzenlemeden sonra silüeti karşılaştırın. Kaynağın küçülmesi otomatik olarak daha temiz bir kesim yolu anlamına gelmez.

Teslim kopyasını kullanılacağı yerde doğrulayın

Bir yapılandırma seçtikten sonra optimize edilmiş dosyayı gerçek hedef iş akışına yerleştirin. Varsayılan durumu ve ona bağlı fareyle üzerine gelme, seçilme, tema veya animasyon durumlarını kontrol edin. Statik bir önizleme, yalnızca etkileşimden sonra çalışan bir seçiciyi gözden kaçırabilir.

Bir web grafiğinde, yerel olarak optimize ettiğiniz dosyanın yanı sıra son derleme çıktısını da inceleyin. Bir yazılım çatısı veya paketleyici daha sonra kendi optimizasyonunu çalıştırabilir. Teslim edilen işaretleme farklıysa testi tekrarlayın.

Düzenlenebilir bir teslim için kopyayı hedef düzenleyicide açın ve alıcının ihtiyaç duyduğu parçaları seçin. Küçük yazıları, delikleri, ayrı renkleri ve kırpmayı doğrulayın. Web kopyası kontrollerden geçse bile ana kaynak dosyayı saklayın.

Dosya optimizasyonu, aktarım sıkıştırmasından da ayrıdır. SVGZ ve SVG karşılaştırma rehberi, kaynak baytlarını aynen geri getiren bir gzip sıkıştırma ve açma işlemini gösterir. SVGO, teslim edilmeden önce bu kaynağı değiştirir; gzip daha sonra bu baytları kodlayabilir. Her işlemi kendi hedefi açısından karşılaştırın.

Vektörleştirme ne zaman optimizasyondan önce gelir?

Vektör ana dosyası eksikse ve tek kaynak düzleştirilmiş bir PNG veya JPG görüntüsüyse PerfectVector'ın görüntüden vektöre dönüştürme iş akışı, bir SVG aday dosyası hazırlamanıza yardımcı olabilir. Kabul etmeden önce sonucu kaynakla karşılaştırın; delikleri, küçük ayrıntıları ve ayrı bölgeleri inceleyin. Çizimi kontrol ettikten sonra sayfanızın ihtiyaç duyduğu ID'leri veya grupları ekleyin; ardından bir teslim kopyasını optimize edin ve bu bağlantı noktalarını test edin.

PerfectVector, mevcut bir SVG için optimizasyon aracı değildir ve web sitenizin seçicilerini yeniden oluşturmaz. Varsa mevcut vektör ana dosyasını kullanın. Sürekli ton geçişlerinin ayrıntıları düzenlenebilir dış çizgilerden daha önemliyse fotoğrafı raster görüntü olarak tutun. Blogdaki vektör hazırlama rehberleri, bu kaynak seçimlerini ele alır.

Sık sorulan sorular

cleanupIds'yi devre dışı bırakmak her SVG'nin güvenle optimize edilmesini sağlar mı? Hayır. ID'leri bu eklentinin kaldırma ve kısaltma işlemlerinden korur; ancak diğer eklentiler stilleri, grupları, şekilleri veya yol verilerini hâlâ değiştirebilir. Hedef iş akışınızın kullandığı özellikleri ve başvuruları doğrulayın.

Optimize edilmiş SVG neden tek başına doğru, sayfamda yanlış görünüyor? Tek başına açılan önizleme, harici CSS'yi veya betikleri devreye sokmayabilir. Örneğimizde SVG'nin kendi mercan rengi dolgusu normal görüntülenirken, seçilen ID kaldırıldığı için sayfanın altın renge dönüştürme işlemi başarısız oldu.

Elimdeki tek düzenlenebilir ana dosyayı optimize etmeli miyim? Ana dosyayı saklayın ve optimize edilmiş bir teslim kopyası yazın. Bir dosya optimizasyondan sonra doğru görüntülenebilir; ancak nesne yapısı sonraki düzenlemeler için daha az kullanışlı olabilir.

SVGO bir PNG'yi vektör yollarına dönüştürebilir mi? Hayır. SVGO, SVG işaretlemesini işler. Çizim düzenlenebilir geometri gerektiriyorsa ve uygun bir vektör ana dosyası yoksa raster konturlarını izleyerek vektörleştirme daha önce yapılması gereken bir işlemdir.

Kaynaklar

1. SVGO repository — Kurulumu, komut satırı çıktılarını, yapılandırmanın yüklenmesini ve optimize API'sini açıklar.
2. SVGO default preset — Eklentileri listeler; geçersiz kılma ayarlarını ve entegrasyon farklarını belgeler.
3. SVGO cleanupIds — ID kaldırma, kısaltma, koruma seçenekleri ve ilgili koruma mekanizmalarını belgeler.
4. SVGO removeViewBox — viewBox değerini açıkça kaldırmanın ölçekleme riskini açıklar.

Çizim ve davranış kontrollerinizden geçen en küçük kopyayı saklayın. Başlangıç dosyasında hâlâ düzenlenebilir vektör geometrisi yoksa raster görüntünüzden bir SVG hazırlayın, şekillerini inceleyin ve teslim kopyasını optimize etmeden önce eklediğiniz bağlantı noktalarını koruyun.