Bir logo veya ikon her ekran boyutunda net görünüyorsa, arkasında büyük ihtimalle bir SVG dosyası vardır. Bu yazıda SVG görsellerin ne olduğunu ve web sitenize hem görsel hem de SEO açısından ne kazandırdığını ele alıyoruz; bu sitedeki tüm diyagram ve grafikler de SVG formatında hazırlanmıştır.
SVG Nedir?
SVG (Scalable Vector Graphics - Ölçeklenebilir Vektör Grafikleri), görselleri piksel ızgarası yerine matematiksel yol (path) ve şekil tanımlarıyla ifade eden, XML tabanlı bir görsel formatıdır. PNG veya JPEG gibi raster (piksel tabanlı) formatların aksine, SVG bir görseli “noktalar” yerine “talimatlar” olarak saklar; bu da formatın en temel avantajının kaynağıdır.
Ölçeklenebilirlik
SVG’nin en bilinen özelliği, herhangi bir boyuta büyütüldüğünde kalite kaybetmemesidir; çünkü görsel her seferinde yeniden çizilir, pikselleşme yaşanmaz. Bir logo, ister 20 piksel ister 2000 piksel genişliğinde gösterilsin, SVG formatında her zaman keskin görünür.
SVG ile Raster Görseller Arasındaki Fark
| Özellik | SVG | Raster (PNG/JPEG) |
|---|---|---|
| Ölçeklenebilirlik | Kalite kaybı yok | Büyütüldükçe pikselleşir |
| Dosya Boyutu (basit grafik) | Genellikle çok küçük | Görece daha büyük |
| Fotoğraf için Uygunluk | Uygun değil | Uygun |
| Düzenlenebilirlik | Kod/metin olarak düzenlenebilir | Piksel bazlı düzenleme gerekir |
Düzenlenebilirlik ve Optimizasyon
SVG dosyaları, temelde düz metin (XML kodu) olduğu için herhangi bir kod editöründe açılıp doğrudan düzenlenebilir; bir rengi değiştirmek için tasarım programına ihtiyaç duymadan kodda tek bir değeri güncellemek yeterli olabilir. Ayrıca gereksiz meta verilerden arındırılarak (minify/optimize edilerek) dosya boyutu daha da küçültülebilir.
SVG Optimizasyonunun Avantajları
- Küçük dosya boyutu: Basit grafikler ve ikonlar için raster formatlardan genellikle çok daha hafiftir.
- CSS ve JavaScript ile kontrol edilebilir: Renk, boyut ve animasyonlar kod üzerinden değiştirilebilir.
- Metin içeriği aranabilir: SVG içindeki metinler, görselin içine “gömülü” kalmaz, HTML metni gibi taranabilir.
- Retina/yüksek çözünürlük sorunlarını ortadan kaldırır: Her ekran yoğunluğunda ayrı bir dosya hazırlamaya gerek kalmaz.
SVG Görsellerin SEO için Faydaları
SVG’nin SEO’ya katkısı dolaylıdır ama gerçektir: küçük dosya boyutu sayfa hızını olumlu etkiler, hız ise bilinen bir sıralama sinyalidir. Ayrıca SVG içine eklenen <title> ve <desc> etiketleri, tıpkı alt metni gibi görselin içeriğini arama motorlarına ve ekran okuyuculara tanımlayarak erişilebilirliğe ve görsel aramaya katkı sağlar.
SVG’nin SEO Açısından Katkıları
- Sayfa yükleme hızını artırarak Core Web Vitals metriklerini destekler.
- Retina ekranlarda ayrı görsel dosyalarına gerek bırakmayarak istek sayısını azaltır.
- İçindeki metin ve
<title>/<desc>etiketleri arama motorları tarafından okunabilir. - Diyagram ve infografiklerde GEO uyumlu içeriği destekleyen görsel netlik sağlar.
SVG Görsel Nasıl Yapılır?
SVG görsel oluşturmanın birkaç farklı yolu vardır; seçim, ihtiyacınıza ve teknik bilginize göre değişir.
SVG Oluşturma Yöntemleri
| Yöntem | Kimin İçin Uygun |
|---|---|
| Tasarım aracı (Figma, Illustrator) ile çizip SVG olarak dışa aktarma | Görsel tasarımcılar |
| Kod ile doğrudan SVG yazma | Geliştiriciler, basit ikon/diyagramlar |
| Mevcut PNG/JPEG’i vektöre dönüştüren araçlar | Hızlı, ama genellikle daha az temiz sonuç |
SVG Oluşturma Adımları
Görsel bir tasarım aracında çizilir veya kod olarak yazılır; ardından SVG formatında dışa aktarılır; gereksiz meta veriler bir optimizasyon aracıyla temizlenir; son olarak görsele açıklayıcı bir alt metni (ve mümkünse <title>) eklenerek sayfaya yerleştirilir.
SVG Kullanırken Dikkat Edilmesi Gereken Noktalar
SVG her görsel türü için ideal değildir; fotoğraflar için hâlâ WebP veya JPEG gibi raster formatlar daha uygundur, çünkü karmaşık renk geçişleri SVG’de dosya boyutunu ciddi şekilde büyütebilir. SVG; logo, ikon, diyagram ve infografik gibi düz renk ve net şekillerden oluşan görseller için en güçlü sonucu verir.
Sıkça Sorulan Sorular
SVG her görsel için mi kullanılmalı?
Hayır; SVG, logo, ikon ve diyagram gibi vektörel içerikler için idealdir, fotoğraflar için raster formatlar daha uygundur.
SVG dosyaları her zaman PNG’den küçük müdür?
Hayır; basit grafiklerde genellikle daha küçüktür, ancak çok karmaşık veya fotoğraf benzeri görsellerde SVG dosya boyutu PNG’den büyük olabilir.
SVG dosyalarına alt metin nasıl eklenir?
Hem HTML’deki <img> etiketinin alt özelliğiyle hem de SVG kodunun içindeki <title> ve <desc> etiketleriyle eklenebilir.
Google SVG içindeki görselleri indeksler mi?
Evet, Google SVG dosyalarını tarayıp değerlendirebilir, ancak görsel arama sonuçlarındaki davranışı raster formatlardan farklılık gösterebilir.
SVG dosyaları güvenli midir?
SVG’ler XML tabanlı olduğu için içine kod (script) gömülebilir; güvenilmeyen kaynaklardan gelen SVG dosyaları dikkatli şekilde temizlenmeden kullanılmamalıdır.
SVG animasyonlu olabilir mi?
Evet; SVG, CSS ve JavaScript ile kolayca animasyonlu hale getirilebilir.
SVG dosyaları WordPress’te doğrudan yüklenebilir mi?
Varsayılan olarak bazı güvenlik kısıtlamaları nedeniyle engellenebilir; bir eklenti veya ek yapılandırmayla SVG yükleme etkinleştirilebilir.
SVG kullanmak sayfa hızını her zaman artırır mı?
Genellikle evet, özellikle ikon ve basit grafiklerde; ancak kötü optimize edilmiş karmaşık bir SVG, beklenenin aksine sayfayı yavaşlatabilir.
SVG dosyaları responsive tasarıma nasıl uyum sağlar?
SVG doğası gereği ölçeklenebilir olduğu için, ek medya sorgusu (media query) gerekmeden farklı ekran boyutlarına doğal olarak uyum sağlar.
SVG ile ikon fontları arasındaki fark nedir?
İkon fontları bir yazı tipi dosyasına bağımlıyken, SVG bağımsız bir görsel formattır ve her ikon üzerinde daha ayrıntılı stil kontrolü sağlar.
SVG dosyaları CSS ile renklendirilebilir mi?
Evet; SVG içindeki fill ve stroke özellikleri CSS üzerinden dinamik olarak değiştirilebilir.
SVG kullanmak erişilebilirliği nasıl etkiler?
Doğru <title> ve <desc> etiketleriyle kullanıldığında, ekran okuyucular için raster görsellerden daha açıklayıcı bir deneyim sunabilir.
Karmaşık infografikler için SVG uygun mu?
Evet; net şekillerden oluşan infografikler SVG için idealdir, ancak fotoğraf ağırlıklı infografiklerde raster formatlar tercih edilmelidir.
SVG dosyalarını optimize eden araçlar var mı?
Evet; birçok ücretsiz çevrimiçi araç ve kütüphane, SVG dosyalarındaki gereksiz kodu otomatik olarak temizleyip dosya boyutunu küçültür.
Bu site SVG görselleri nasıl kullanıyor?
Bu sitedeki tüm blog diyagramları, karşılaştırma tabloları ve kart grafikleri, hız ve netlik avantajından yararlanmak için SVG formatında hazırlanmaktadır.
İlgili Araç
Bu konuyla ilgili çalışırken SEO Analiz aracımızı ücretsiz kullanabilirsiniz.
