SVG Logo Web Sitesine Nasıl Eklenir?

Web sitesinin sol üst köşesindeki logo ilk bakışta basit bir görsel. Ama arkasında bir karar var: bu logo sayfaya nasıl eklenecek? Basit bir görsel etiketiyle mi, doğrudan kodun içine mi, yoksa arka plan olarak mı? Üç yol da çalışıyor ama her birinin farklı sonuçları var.

Sitenizi yaptıran ya da yöneten kişiyle konuşurken bu seçeneklerin farkını bilmek, “neden logo koyu temada görünmüyor?” ya da “neden logo geç yükleniyor?” gibi sorunlarda doğru soruyu sormanızı sağlıyor. Aşağıda üç yöntemi teknik olmayan bir dille anlatıyoruz.

Yöntem 1: Görsel etiketi (img)

En yaygın yöntem. Logo bir dosya olarak sunucuda duruyor ve sayfa onu bir görsel gibi çağırıyor. Sade, anlaşılır ve tarayıcı önbelleğe alabiliyor: ziyaretçi ilk sayfada logoyu indirdikten sonra diğer sayfalarda tekrar indirmiyor.

Sınırı şu: bu yöntemle SVG’nin içindeki renkleri sayfadaki koddan değiştiremezsiniz. Logo, dosyada nasıl renkliyse öyle görünür. Koyu tema için beyaz logo gerekiyorsa ayrı bir dosya yüklemeniz gerekiyor. Çoğu kurumsal site için bu yeterli ve en az sorun çıkaran yöntem.

Yöntem 2: Doğrudan sayfa koduna gömmek (inline)

SVG’nin kodu, sayfanın HTML’inin içine yazılıyor. Böylece logo bir dosya değil, sayfanın bir parçası oluyor. En büyük avantajı, renkleri CSS ile kontrol edebilmek: hover’da renk değişimi, koyu temada otomatik beyaz olma, marka renginin tek yerden yönetilmesi gibi.

Dezavantajı, aynı kodun her sayfada tekrar yüklenmesi ve önbelleğe ayrı alınamaması; küçük bir logoda bu ihmal edilebilir, ama karmaşık bir SVG’de sayfa boyutunu şişirebilir. Ayrıca sayfa kodunun okunabilirliği azalıyor. Modern web çatıları, bu SVG’leri bileşen olarak yönetip sorunu çözüyor.

Yöntem 3: CSS arka planı

Logo, bir elemanın arka plan görseli olarak ekleniyor. Bu, genellikle dekoratif öğelerde ya da bir düğmenin içindeki ikonda kullanılıyor. Logo için önerilmez: arka plan görselleri ekran okuyuculara görünmez, yani görme engelli ziyaretçi logoyu “duymaz”, ayrıca yazdırırken tarayıcılar arka planları göstermeyebiliyor.

Yine de küçük dekoratif ikonlar ya da desenler için mantıklı. Karar kriteri: bu görsel bilgi taşıyor mu, süs mü? Logo bilgi taşıyor, yani markanın adı; arka plan olmamalı.

Hız açısından: ne zaman fark eder?

Tek bir küçük SVG logo, hangi yöntemle eklenirse eklensin hızı fark edilir biçimde etkilemez. Ama sitede onlarca ikon, illüstrasyon ve logo varsa, birikim hissedilebilir. Genel kural: tekrar kullanılan öğeleri (logo, menü ikonları) dosya olarak önbelleğe aldırın, tek seferlik ve renk kontrolü gereken öğeleri inline yapın.

Bir de dosya boyutunu küçültme meselesi: tasarım programlarından çıkan SVG dosyaları çoğu zaman gereksiz bilgi içeriyor (yorumlar, gizli katmanlar, ayrıntılı meta veri). Bunları temizleyen araçlar var ve dosyayı belirgin biçimde küçültebiliyor. Sitenizin genel hızı için SEO hizmetlerimizde bu tür teknik ayrıntılara da bakıyoruz.

Erişilebilirlik: alternatif metin

Logo bir görsel etiketiyle ekleniyorsa alternatif metin (alt) yazın: “Marka Adı” ya da “Marka Adı ana sayfa”. Logo aynı zamanda ana sayfaya giden bir bağlantıysa, alternatif metin bağlantının amacını da anlatmalı. Inline SVG’de ise kodun içine bir başlık (title) ve gerekirse açıklama ekleniyor.

Metin içermeyen dekoratif bir SVG’de alternatif metni boş bırakmak (yani ekran okuyucuya “yok say” demek) doğru. Ama logoyu boş bırakmak, görme engelli ziyaretçi için sitenin kimliğini silmek demek. Bu küçük ayrıntı, sitenizin erişilebilirlik kalitesinde fark yaratıyor.

Favicon ve paylaşım görselleri: SVG her yerde çalışmaz

Sekmedeki küçük simge (favicon) için modern tarayıcılar SVG’yi destekliyor ama eski tarayıcılar ve bazı sistemler PNG ya da ICO istiyor. Sosyal medyada paylaşılan bağlantı görselleri (Open Graph) ise SVG’yi genellikle kabul etmiyor; oralarda PNG ya da JPG gerekiyor. Yani sitede SVG kullanmanız, tüm logo dosyalarınızı SVG yapmanız anlamına gelmiyor. Bir set hazırlayın: SVG (site içi), PNG (paylaşım ve e-posta), ICO ya da küçük PNG (favicon).

Örnek: bir kliniğin sitesinde logo

Bir diş kliniği sitesini düşünün: sol üstte logo, menüde birkaç bağlantı, altında randevu düğmesi. Site açık temada çalışıyor, koyu mod yok. Bu durumda logoyu sade bir görsel etiketiyle eklemek yeterli; SVG dosyası birkaç kilobayt tutuyor, tarayıcı önbelleğe alıyor ve her sayfada hızlıca gösteriyor. Alt bilgide (footer) aynı logonun beyaz sürümü, koyu bir zeminin üstünde kullanılıyor; bu ikinci dosya ayrı bir SVG.

Klinik ileride koyu mod eklemeye karar verirse, logoyu inline SVG’ye çevirmek ve rengi temaya bağlamak küçük bir güncelleme. Yani bugünün basit kararı, yarının seçeneğini kapatmıyor. Bu yüzden ilk kurulumda karmaşık bir yapıya gitmeyin; ihtiyaç doğunca geçiş yapın.

Ölçü ve boşluk meselesi

Logoyu sayfaya koyarken yalnızca genişlik değil, yükseklik de tanımlayın. Yükseklik belirtilmezse sayfa yüklenirken logo alanı önce boş kalıyor, logo yüklenince içerik aşağı kayıyor; buna “yerleşim kayması” denir ve hem kullanıcıyı rahatsız ediyor hem de sayfa kalitesi ölçümlerinde puan kaybettiriyor. Basit bir genişlik-yükseklik tanımı bunu önlüyor. Mobilde logonun küçülmesi gerektiğini de düşünün: yatay uzun bir logo telefonda çok küçük kalıyorsa, mobil için daha kompakt bir sürüm kullanmak mantıklı.

Koyu tema ve açık tema

Sitenizin koyu ve açık modu varsa, logonun her ikisinde de okunması gerekiyor. Inline SVG ile renk, temaya göre otomatik değişebilir. Görsel etiketi kullanıyorsanız iki ayrı dosya ve tarayıcıya hangisini göstereceğini söyleyen bir kural gerekir. Bu ayrıntıyı tasarım aşamasında düşünmezseniz, koyu temada siyah logo kaybolur; bunu sonradan düzeltmek ise küçük ama can sıkıcı bir iş.

Sitenizi yeniden yaptırırken sorulacak sorular

Yeni bir site yaptırıyorsanız geliştiriciye şunları sorun: logo hangi biçimde eklenecek? Koyu tema desteği olacak mı? Logonun mobilde küçük bir sürümü kullanılacak mı? Favicon ve paylaşım görselleri hangi formatta hazırlanacak? Bu dört soru, sonradan çıkacak küçük ama can sıkıcı sorunların çoğunu baştan çözüyor.

Hangisini seçmeli?

Kısa bir karar tablosu:

Sitenizde logonun nasıl eklendiğinden emin değilseniz, sitenizi yapan kişiye sorabilirsiniz. Yeni bir site planlıyorsanız web tasarım hizmetlerimize bakabilir, ya da iletişim sayfamızdan mevcut sitenizin bağlantısını gönderip 0540 022 64 22 numarasından WhatsApp’la ulaşabilirsiniz; logonun nasıl yüklendiğine birlikte bakalım.