- Katılım
- 21 May 2023
- Mesajlar
- 713
- Tepki
- 17
- Puan
- 18
Bir logoyu büyüttüğünüzde kenarları bozuluyorsa o dosya piksellerden oluşuyor demektir. Bozulmuyorsa, çizim piksellerle değil tarifle saklanıyordur. Web'de bu tarifi taşıyan biçimin adı SVG.
Bu yazı SVG'nin ne olduğunu, hangi dile dayandığını, çözünürlükle ilişkisini, nerelere gömülebildiğini ve etkileşim tarafında ne sunduğunu W3C'nin belirtimine bakarak topluyor.
Belirtimdeki tanım
W3C'nin SVG 2 belirtimi biçimi şöyle tanımlıyor: iki boyutlu vektör ve karışık vektör/raster grafikleri tarif etmek için XML'e dayanan bir dil.
Tanımdaki "dil" kelimesi belirleyici. SVG bir görüntü dosyası olmaktan çok, çizimin nasıl oluşturulacağını anlatan bir metin; tarayıcı bu tarifi okuyup ekranda çiziyor.
"Karışık" ifadesi de önemli: belirtim yalnız vektör değil, vektörle rasterin bir arada kullanıldığı içerikleri de kapsıyor.
- Temel: XML'e dayanan bir tarif dili.
- İçerik: İki boyutlu vektör ve karışık vektör/raster grafikler.
- Sonuç: Çizim, dosyada piksel olarak değil tarif olarak durur.
Çözünürlükle ilişkisi
Belirtim üç özelliği arka arkaya sayıyor: SVG içeriği biçimlendirilebilir, farklı ekran çözünürlüklerine ölçeklenebilir ve farklı biçimlerde görüntülenebilir.
Ölçeklenebilirlik, biçimin en çok bilinen özelliği. Aynı dosya küçük bir simge boyutunda da geniş bir başlık görselinde de aynı keskinlikte çıkıyor; çünkü tarayıcı her boyutta çizimi yeniden çiziyor.
Bu, ekran yoğunluğu farklarının sorun olmaktan çıkması demek. Aynı varlığın farklı çözünürlükler için ayrı ayrı hazırlanmasına gerek kalmıyor.
Püf nokta' Alıntı:
Nerede görüntülenebiliyor?
Belirtim üç kullanım biçimi tanımlıyor: içerik tek başına görüntülenebiliyor, HTML içeriğiyle karıştırılabiliyor ya da XML ad alanları kullanılarak başka XML dillerinin içine gömülebiliyor.
Bu esneklik, aynı dosyanın hem ayrı bir varlık olarak sunulmasını hem de sayfanın içine doğrudan yazılmasını mümkün kılıyor. İkinci yol, çizimin sayfa stilleriyle birlikte biçimlendirilmesine imkân veriyor.
Biçimlendirilebilir olmak ne kazandırıyor?
Belirtimdeki "stylable" niteliği pratikte şu anlama geliyor: çizimin renkleri ve çizgi özellikleri dışarıdan değiştirilebiliyor. Aynı simge, farklı bağlamlarda farklı renkte görünebiliyor.
Bu, ikon setleri için belirleyici bir özellik. Her renk için ayrı dosya tutmak yerine tek dosya kullanılıp renk stil tarafında veriliyor.
Görsellerin arayüzde hangi işi üstlendiğini ve nasıl etiketlendiğini ayrı bir yazıda ele almıştık; SVG bu ögelerin taşıyıcısı olduğu için ikisi birlikte düşünülüyor.
XML tabanlı olmak ne getiriyor?
Belirtimin dili XML'e dayandırması, dosyanın metin olarak okunabilir ve düzenlenebilir olması demek. Bir SVG'yi metin düzenleyicide açıp içindeki şekilleri görmek mümkün.
Bunun pratik sonuçları var. Çizim sürüm kontrolünde satır satır karşılaştırılabiliyor; ikili bir görsel dosyasında mümkün olmayan bir şey. Aynı sebeple, çizim üretmek için elle kod yazmak ya da program çıktısı üretmek de mümkün oluyor.
XML ad alanı desteği ise gömülmeyi düzenli hâle getiriyor: başka bir XML belgesinin içine konduğunda hangi etiketin hangi dile ait olduğu belirsizleşmiyor.
Ne zaman uygun değil?
Biçim, tarifle anlatılabilen çizimler için tasarlanmış. Fotoğraf gibi her pikseli birbirinden farklı olan içeriklerde tarif yaklaşımı avantaj sağlamıyor; belirtimin "karışık vektör/raster" ifadesi de bu ihtiyacı kabul ediyor.
Kural kabaca şu: şekil, çizgi ve tipografiden oluşan işler bu biçimde; doğal görüntüler ise piksel tabanlı biçimlerde daha verimli duruyor.
Etkileşim ve hareket
Belirtim biçimi durağan bir görselle sınırlamıyor. SVG dinamik değişiklikleri de destekliyor: betik kullanılarak etkileşimli belgeler oluşturulabiliyor.
Hareket tarafında iki yol var. Belirtime göre canlandırmalar, bildirimsel canlandırma özellikleriyle ya da betik kullanılarak gerçekleştirilebiliyor.
Bu yetenekler, biçimi bir resim dosyasından çok bir belge türüne yaklaştırıyor. Aynı dosya hem çizim hem de davranış taşıyabiliyor.
Üretim tarafında nelere dikkat etmeli?
Tasarım aracından çıkan dosyanın tarayıcıda beklendiği gibi görünüp görünmediğini sınamak ayrı bir adım; yöntemini SVG çıktısı testi yazımızda anlatmıştık.
Vektör mantığının çizim tarafındaki karşılığını vektör çizim yazımızda ele almıştık. Fotoğraf gibi piksel tabanlı içeriklerde ise başka biçimler devreye giriyor; bunların boyut karşılaştırmasını WebP yazımızda vermiştik.
Sık Sorulan Sorular
SVG nedir?
W3C'nin tanımıyla, iki boyutlu vektör ve karışık vektör/raster grafikleri tarif etmek için XML'e dayanan bir dil.
Neden ölçeklenince bozulmuyor?
Çizim piksel olarak değil tarif olarak saklandığı için her boyutta yeniden çiziliyor.
Sayfaya nasıl konur?
Belirtime göre tek başına görüntülenebiliyor, HTML ile karıştırılabiliyor ya da XML ad alanlarıyla gömülebiliyor.
Rengini sonradan değiştirebilir miyim?
İçerik biçimlendirilebilir olduğu için renk ve çizgi özellikleri dışarıdan verilebiliyor.
Hareketli SVG olur mu?
Belirtim canlandırmaların bildirimsel özelliklerle veya betikle gerçekleştirilebildiğini söylüyor.
Özetle
SVG, çizimi piksellerle değil XML tabanlı bir tarifle saklayan bir grafik dili. Bu yüzden farklı çözünürlüklere ölçekleniyor, stil tarafından biçimlendirilebiliyor ve tek başına, HTML içinde ya da başka XML dillerine gömülü olarak kullanılabiliyor. Betik ve bildirimsel canlandırma desteğiyle etkileşimli belgeler de üretilebiliyor.
Sitenizdeki simgeleri hâlâ her boyut için ayrı ayrı mı hazırlıyorsunuz?
Güncelleme: 2 Eylül 2026. W3C'nin Ölçeklenebilir Vektör Grafikleri (SVG) 2 belirtimi kontrol edildi.
Dijital Dünyanıza Yön Veren Pusula
