SVG Nedir?
SVG (Scalable Vector Graphics), XML söz dizimine dayanan iki boyutlu bir vektör görsel biçimidir; şekilleri piksel yerine geometrik tanımlarla sakladığı için her boyutta netliğini korur.
Diğer Adları: Scalable Vector Graphics
SVG Nasıl Çalışır?
MDN’ye göre SVG, XML söz dizimine dayanan iki boyutlu bir vektör görsel biçimidir. W3C biçim üzerinde 1990’ların sonunda çalışmaya başlamıştır ve bugün bütün yaygın tarayıcılar SVG’yi destekler. XML tabanlı olduğu için CSS ile biçimlendirilebilir, JavaScript ile etkileşimli hâle getirilebilir ve SVG etiketleri doğrudan HTML belgesinin içine yazılabilir.
Vektör biçim olduğu için SVG görseller sınırsız ölçeklenebilir; bu da onları her ekran boyutuna uyan arayüz öğeleri ve grafikler için uygun kılar. Biçim ayrıca kırpma, maskeleme, filtre ve animasyon gibi araçlar sunar.
SVG ile JPEG, PNG ve WebP Farkı
JPEG, PNG ve WebP gibi biçimler görüntüyü piksel ızgarası olarak saklar; büyütüldüğünde pikseller belirginleşir. SVG ise çizgi, eğri ve renk tanımlarını saklar ve tarayıcı görüntüyü her boyutta yeniden çizer. Bu yüzden logo, simge ve basit çizimlerde SVG uygundur; fotoğraf gibi renk geçişi çok olan görüntülerde piksel tabanlı biçimler kullanılır.
SVG Mağazada Nerede Kullanılır?
Mağaza logosu, kargo, ödeme ve güvenlik simgeleri, menü ve sepet simgeleri ile ürün sayfasındaki ölçü çizimleri SVG’ye uygundur. Logo SVG olduğunda yüksek yoğunluklu telefon ekranlarında da keskin görünür ve aynı dosya her boyutta kullanılır.
Örnek: Bir mağazanın logosu küçük bir PNG dosyasıdır ve yüksek çözünürlüklü telefon ekranlarında bulanık görünür. Logo SVG olarak yeniden çıkarıldığında her ekranda keskin görünür; anlam taşıyan logo ve simgelere metin karşılığı da eklenir.
SVG Hakkında Sık Sorulan Sorular
Ürün fotoğrafları SVG olarak kaydedilebilir mi?
Uygun değildir. Fotoğraf piksel tabanlı bir görüntüdür; SVG logo, simge ve çizim gibi geometrik şekillerden oluşan görseller içindir.
SVG dosyası neden güvenlik açısından denetlenir?
SVG metin tabanlıdır ve JavaScript ile etkileşimli hâle getirilebilir. Bu nedenle dışarıdan yüklenen SVG dosyalarına yalnızca güvenilir kaynaklardan izin verilir ya da dosyalar yüklenmeden önce temizlenir.
SVG sayfaya nasıl eklenir?
Bir görsel dosyası olarak eklenebilir ya da SVG etiketleri doğrudan HTML belgesinin içine yazılabilir. İçine yazılan SVG sayfanın CSS kurallarıyla biçimlendirilebilir; örneğin simgenin rengi temaya göre değişebilir.