SVG Nedir? Web Tasarımında Kullanım, Avantaj ve Güvenlik Rehberi

SVG (Scalable Vector Graphics), iki boyutlu vektör grafikleri XML tabanlı bir yapı ile tanımlayan web standardıdır. Logo, ikon, basit illüstrasyon, diyagram ve veri görselleştirmesi gibi şekil ağırlıklı grafikler farklı ekran boyutlarında keskin kalabilir; renkleri ve bazı özellikleri CSS ile yönetilebilir.

Fakat “SVG her zaman daha hızlıdır” veya “her görsel SVG olmalıdır” demek doğru değildir. Karmaşık bir çizim, gereksiz noktalar ve filtrelerle ağırlaşabilir. Fotoğraf gibi çok ayrıntılı pikselli içeriklerde WebP, AVIF veya JPEG daha uygun olabilir. Doğru karar; görselin yapısına, kullanım biçimine, erişilebilirlik ihtiyacına, güvenlik modeline ve gerçek dosya boyutuna göre verilmelidir.

SVG tam olarak nedir?

W3C SVG 2 standardı SVG’yi, iki boyutlu vektör ve karma vektör/raster grafikleri tanımlayan XML tabanlı bir dil olarak açıklar. Bir SVG dosyasında dikdörtgen, daire, çizgi, yol, metin, renk, dönüşüm ve filtre gibi öğeler kodla temsil edilebilir. Bu nedenle SVG yalnız bir “resim uzantısı” değil, tarayıcının yorumladığı yapılandırılmış bir belgedir.

Bu yapı üç önemli sonuç doğurur:

• Geometrik şekiller, sabit bir piksel ızgarasına bağlı kalmadan ölçeklenebilir.
• Dosya metin tabanlı olduğu için sürüm kontrolünde karşılaştırılabilir ve uygun durumlarda CSS veya JavaScript ile davranış kazanabilir.
• Belge; metin, bağlantı, harici kaynak veya betik içerebildiğinden güvenlik açısından sıradan bir PNG gibi değerlendirilmemelidir.

SVG’nin temel kullanım alanları logo ve ikonlarla sınırlı değildir. Basit ürün şemaları, süreç çizimleri, haritalar, grafikler, rozetler, arayüz simgeleri ve hareketli açıklamalar da SVG ile hazırlanabilir.

SVG ile PNG, JPEG ve WebP arasındaki fark nedir?

Vektör ve raster formatlar aynı problemi çözmez. Raster görseller piksellerden, SVG ise çoğunlukla şekil ve koordinatlardan oluşur.

SVG’nin dosya boyutu otomatik olarak küçük değildir. Birkaç geometrik şekilden oluşan ikon çok verimli olabilir; binlerce noktalı bir illüstrasyon veya gömülü raster görüntü ise eşdeğer WebP’den daha büyük olabilir. Kararı dosya uzantısına değil, optimize edilmiş gerçek çıktının byte boyutuna ve görsel kalitesine göre verin.

SVG web sitesine hangi yöntemle eklenir?

Gömme yöntemi, stil, erişilebilirlik, önbellek ve güvenlik davranışını etkiler.

img etiketiyle harici dosya

Logo, dekoratif şekil veya etkileşimsiz ikon için çoğu zaman en sade yöntemdir:

Tarayıcı bu dosyayı görsel alt kaynağı olarak işler. SVG 2’nin işlem modu kuralları, img ile kullanılan SVG’de betik ve etkileşim gibi özellikleri sınırlar. Dosya ayrıca önbelleğe alınabilir. Buna karşılık sayfa CSS’i SVG’nin içindeki her parçayı doğrudan seçemez.

HTML içinde satır içi SVG

Parçaların rengi, durumu veya etkileşimi sayfa bileşeniyle birlikte değişecekse SVG kodu HTML içine alınabilir:

Bu yaklaşım CSS kontrolünü kolaylaştırır; ancak aynı büyük kodun sayfada tekrar edilmesi HTML’i şişirebilir. Etkileşim varsa klavye kullanımı, odak görünümü ve erişilebilir ad ayrıca test edilmelidir.

CSS arka planı

Anlam taşımayan dekoratif grafikler CSS arka planı olabilir. İçerik veya işlev taşıyan görselleri yalnız arka plan olarak vermek, alternatif metin ve anlam aktarımını zorlaştırır.

object veya iframe

Etkileşimli, kendi belgesi gibi çalışan SVG’lerde kullanılabilir; fakat izinler, odak sırası, yükleme davranışı ve harici kaynaklar daha karmaşık hâle gelir. Basit logo veya ikon için gereksizdir.

viewBox, width ve height neden önemlidir?

viewBox, SVG’nin iç koordinat sistemini ve görünür alanını tanımlar. MDN viewBox referansına göre dört sayıdan oluşur: min-x, min-y, width, height. Tarayıcı bu koordinat alanını SVG’nin ekranda kapladığı alana eşler.

Responsive bir SVG’de genellikle doğru viewBox ile birlikte CSS üzerinden max-width: 100% ve height: auto kullanılır. HTML’de veya SVG kökünde gerçek en-boy oranını ifade eden width/height değerleri bulunması da görsel yüklenmeden önce yer ayrılmasına yardımcı olur. Yanlış oran kırpılma veya esneme oluşturabilir.

Kontrol listesi:

1. viewBox çizimin tamamını kapsıyor mu?
2. En-boy oranı tasarım alanıyla uyumlu mu?
3. HTML çıktısında width ve height tanımlı mı?
4. Küçük mobil genişlikte ince çizgiler ve yazılar hâlâ okunuyor mu?
5. preserveAspectRatio varsayılan davranışı kullanım için yeterli mi?

Kumsal Ajans SVG Kullanım Karar Kartı

Bir SVG’yi yalnız “vektör olduğu için” onaylamak yerine yedi kararı aynı kartta toplayın:

Bu kart, tasarımcı ile geliştiricinin farklı varsayımlarla ilerlemesini önler. Ayrıca dosyanın neden SVG seçildiğini daha sonra açıklanabilir hâle getirir.

SVG optimizasyonu nasıl yapılır?

Optimizasyonun amacı yalnız dosyayı küçültmek değil, görünümü ve işlevi koruyarak gereksiz veriyi kaldırmaktır.

• Tasarım aracının eklediği kullanılmayan katman, metadata ve tanımları temizleyin.
• Gereksiz hassasiyetteki yol noktalarını azaltın; ince detayın bozulmadığını kontrol edin.
• Tekrarlanan stilleri sadeleştirin.
• Gömülü büyük raster görseller varsa bunları ayrı bir uygun formatta sunmayı değerlendirin.
• Kullanılmayan filtre, maske, sembol ve font tanımlarını kaldırın.
• Metnin görünümünün kritik olduğu durumlarda font bağımlılığını ve metni yola çevirmenin erişilebilirlik/arama sonuçlarını birlikte değerlendirin.
• Optimizasyon aracının kimlikleri, viewBox değerini veya erişilebilirlik öğelerini yanlışlıkla kaldırmadığını test edin.

Otomatik bir SVG optimizer yararlı olabilir; fakat sonuç görsel karşılaştırma, mobil kontrol ve tarayıcı testi olmadan doğrudan yayına alınmamalıdır.

SVG erişilebilirliği nasıl sağlanır?

Uygulama, görselin rolüne göre değişir:

• img ile sunulan bilgilendirici SVG’ye, aynı anlamı taşıyan kısa bir alt metni verin.
• Yalnız dekoratif SVG’de alt="" kullanın veya dekoratif öğeyi erişilebilirlik ağacından çıkarın.
• İşlevsel ikonun adı, görünüşünü değil gerçekleştirdiği eylemi açıklamalıdır: “Menü” veya “Ara” gibi.
• Karmaşık diyagramlarda kısa alternatif metne ek olarak aynı sayfada ayrıntılı metin açıklaması sağlayın.
• Satır içi SVG’de uygun role, erişilebilir ad ve gerekirse aria-labelledby/aria-describedby ilişkisini test edin.
• Anlamı yalnız renkle vermeyin; kontrastı, odak durumunu ve klavye kullanımını kontrol edin.

W3C WAI karmaşık görseller rehberi, kısa tanımın yanında temel ilişkileri ve verileri aktaran uzun bir açıklama önerir. SVG içinde metin bulunması tek başına bu ihtiyacı çözmez; yardımcı teknolojinin gerçek çıktısı test edilmelidir.

SVG güvenli midir?

Kendi ekibinizin ürettiği, içeriği bilinen ve statik görsel olarak sunulan SVG ile kullanıcıların yüklediği SVG aynı risk düzeyinde değildir. SVG; betik, olay özelliği, bağlantı, foreignObject ve harici kaynak referansları içerebilir. Bu nedenle yalnız uzantıya veya gönderilen MIME türüne güvenmek yeterli değildir.

OWASP Dosya Yükleme Rehberi; izin verilen uzantı listesi, dosya türü ve içerik doğrulaması, güvenli dosya adı, boyut sınırı, yetkilendirilmiş yükleme ve mümkünse dosyaların web kökü dışında tutulması gibi katmanlı kontroller önerir. Kullanıcı SVG yükleyebiliyorsa iş gereksinimine göre güvenilir bir temizleme/yeniden oluşturma süreci uygulanmalı; tehlikeli öğe ve referanslar sunucu tarafında reddedilmelidir.

“SVG’yi img ile gösteriyoruz, o hâlde yükleme güvenlidir” yaklaşımı da eksiktir. Dosyanın başka bir yerde doğrudan açılması, indirilmesi, farklı bir içerik türüyle servis edilmesi veya daha sonra inline kullanılması ihtimalleri değerlendirilmelidir.

SVG SEO’ya doğrudan katkı sağlar mı?

SVG kullanmak tek başına sıralama artışı sağlamaz. Doğru format seçimi; netlik, aktarım boyutu, responsive kullanım ve erişilebilirlik üzerinden kullanıcı deneyimine katkıda bulunabilir. Fakat ağır veya hatalı SVG, eksik boyutlar, anlamsız alternatif metin ve görünmeyen önemli içerik ters etki yaratabilir.

Arama ve kullanıcı açısından esas olan; görselin sayfanın amacını desteklemesi, çevresindeki metinle bağının açık olması, anlamlı dosya/alt metin kullanımı ve sayfanın bütünü içinde hızlı, kararlı yüklenmesidir. Daha geniş uygulama için web tasarım süreci ve kalite rehberimizi inceleyebilirsiniz.

Yayına almadan önce 12 maddelik SVG kontrol listesi

1. Görsel gerçekten vektör formatına uygun mu?
2. Optimize SVG, eşdeğer raster seçenekle dosya boyutu ve kalite açısından karşılaştırıldı mı?
3. Kaynak ve kullanım hakkı belli mi?
4. viewBox çizimin tamamını kapsıyor mu?
5. En-boy oranı ile width/height değerleri doğru mu?
6. Gömme yöntemi işlev ve stil ihtiyacına uygun mu?
7. Dekoratif, bilgilendirici veya işlevsel rolü belirlendi mi?
8. Alternatif metin veya uzun açıklama görevi karşılıyor mu?
9. Klavye, odak ve kontrast etkileşimli kullanımda test edildi mi?
10. Harici kaynak, betik, olay özelliği ve gereksiz metadata kontrol edildi mi?
11. Mobil genişlikte ve hedef tarayıcılarda görsel doğrulandı mı?
12. Kırık dosya, yanlış MIME türü, önbellek ve teslim süreci kontrol edildi mi?

Sonuç

SVG; logo, ikon, basit illüstrasyon ve diyagramlarda güçlü bir formattır. Değeri yalnız ölçeklenmesinden değil, doğru kullanımda stil, erişilebilirlik ve bileşen sistemleriyle birlikte çalışabilmesinden gelir. Ancak karmaşık fotoğraflar için otomatik tercih değildir; kötü optimize edilmiş veya kontrolsüz yüklenen bir SVG performans ve güvenlik problemi oluşturabilir.

En sağlıklı yaklaşım; görsel görevini tanımlamak, SVG’yi raster alternatifle karşılaştırmak, uygun gömme yöntemini seçmek ve erişilebilirlik, güvenlik, boyut ve mobil render kontrollerini birlikte yapmaktır. Kurumsal sitenizde görsel sistemini ve bileşenleri proje kapsamıyla birlikte değerlendirmek için web tasarım hizmetimizi inceleyebilirsiniz.