Bir logoyu web sitesine yüklerken karşınıza birkaç dosya formatı seçeneği çıkar: PNG, JPG, WebP ve SVG. Görünüşte hepsi “bir resim dosyası” gibi dursa da, logo söz konusu olduğunda SVG diğerlerinden temelde farklı bir kategoriye ait ve bu fark hem görsel kalite hem de site performansı açısından gerçek bir etki yaratıyor.
SVG nedir, diğerlerinden farkı ne
PNG ve JPG gibi formatlar, görseli sabit sayıda piksel karesi olarak saklar (raster). SVG ise (Scalable Vector Graphics) görseli matematiksel çizgi ve eğri tanımları olarak saklar. Bu fark küçük bir teknik detay gibi görünse de sonucu büyük: bir SVG dosyası, ister 20 piksel ister 2000 piksel genişliğinde gösterilsin, her zaman keskin ve net kalır; çünkü tarayıcı görseli her seferinde yeniden, o boyuta uygun şekilde çizer. PNG ya da JPG ise sabit bir çözünürlükte kaydedildiği için, orijinal boyutundan büyütüldüğünde bulanıklaşır.
Neden özellikle logo için kritik
Bir logo, bir web sitesinde onlarca farklı boyutta karşımıza çıkar: üst menüde küçük, açılış sayfasında büyük, favicon olarak minicik, belki bir sunumda dev boyutta. Aynı dosyanın tüm bu boyutlarda keskin kalması gerekir. PNG kullanıldığında genelde en büyük ihtiyaç duyulan boyutta bir dosya hazırlanır ve diğer boyutlar ondan küçültülür; bu bir dereceye kadar işe yarasa da, büyütme yönünde ciddi kalite kaybı yaşanır. SVG ile bu sorun kökünden ortadan kalkar, çünkü tek bir dosya her boyutta orijinal netliğini korur.
Web performansına etkisi
SVG dosyaları, karmaşıklığına bağlı olsa da, genelde eşdeğer görsel kalitedeki bir PNG’den çok daha küçük dosya boyutuna sahiptir; çünkü matematiksel tanım, piksel piksel bilgi saklamaktan daha az yer kaplar. Bu, sayfa yükleme hızını doğrudan etkiler ve Google’ın hız odaklı sıralama kriterleri açısından küçük ama gerçek bir avantaj sağlar. Ayrıca SVG dosyaları metin editörüyle bile açılıp düzenlenebilecek kadar esnektir; bu da renk değişikliği gibi küçük güncellemeleri, yeni bir görsel dışa aktarmaya gerek kalmadan yapmayı mümkün kılar.
SVG’nin sınırları
SVG her görsel için ideal değildir. Fotoğraf gibi karmaşık, milyonlarca renk tonu içeren görseller için raster formatlar hâlâ daha uygundur; SVG asıl gücünü logo, ikon ve düz renklerden oluşan illüstrasyonlarda gösterir. Ayrıca çok karmaşık, aşırı detaylı bir logo SVG’ye çevrildiğinde dosya boyutu beklenenden büyük çıkabilir; bu yüzden logo tasarlanırken gereksiz detaydan kaçınmak hem estetik hem de teknik açıdan fayda sağlar.
Pratik öneri
Bir web sitesi için logo hazırlarken, mümkünse SVG formatını ana format olarak kullanmak, hem görsel kalite hem de performans açısından en sağlam seçenektir. Tasarımcıdan logo teslim alınırken SVG dosyasının da istenmesi, ileride farklı ortamlarda (web, uygulama, sunum) tekrar tekrar dosya dönüştürme zahmetinden kurtarır.