SVG, Scalable Vector Graphics'in kısaltmasıdır. W3C'nin, resimleri pikseller yerine talimatlar olarak tanımlayan açık standartıdır: burada bir daire çiz, bu eğriyi takip et, şu şekli bu renkle doldur, bu kelimeyi şu yazı tipinde göster. Resim bir dizi yönergeden oluştuğu için, hiçbir zaman bulanıklaşmadan veya karelenmeden istenen boyutta çizilebilir; bu yüzden logolar, simgeler, haritalar ve grafikler çok sık SVG olur.
Bir SVG bir resmi nasıl depolar
Bir SVG dosyası XML'dir: herhangi bir editörde açabileceğiniz okunabilir metindir. Bir <path> öğesi, çizim komutlarının sıkıştırılmış bir dizgisini taşır, <rect>, <circle> ve <polygon> beklenen işleri yapar, <text> gerçek, seçilebilir metni tutar ve <g> öğeleri birlikte taşınabilmeleri veya bir arada stillendirilebilmeleri için gruplar. Bir viewBox niteliği, tüm çizimin temiz şekilde ölçeklenmesini sağlayan koordinat sistemini tanımlar.
Metin tabanlı olduğu için, bir SVG son derece iyi sıkıştırılır; gzipped bir SVG (bazen .svgz uzantısı verilir) genellikle orijinal boyutunun küçük bir kısmıdır. Metin olması, bir SVG'nin CSS ile stillendirilebileceği, animasyon eklenebileceği ve betiklerle kontrol edilebileceği anlamına da gelir. Tarayıcı onu sayfanın bir parçası olarak, opak bir resim değilmiş gibi işler.
Bu son yetenek, bilinmeye değer bir güvenlik boyutu taşır: bir SVG, bir <script> öğesi içerebilir. SVG'nin kullanıcı yüklemesi olarak kabul edildiği her yerde, çalıştırılamayacağı şekilde temizlenmesi veya sunulması gerekir; bu yüzden bazı siteler, tüm raster formatlarını kabul etseler bile SVG'yi reddeder.
SVG, fotoğraflar için zayıf bir kaptır. İçine bir raster resim gömebilirsiniz, ancak o zaman XML'e sarılı bir piksel resminiz olur ve ölçekleme avantajının hiçbiri kalmaz.
Bir SVG hangi metaveriyi taşır
SVG'nin özel bir <metadata> öğesi vardır ve standart içine ne yazılacağını belirtmediği için editörler oraya çok şey yazar. En yaygın kullanımda, Dublin Core terimlerini kullanan RDF içerir: dc:title, dc:creator, dc:date, dc:description, dc:rights ve bir lisans URI'si. Bir <title> ve <desc> öğesi, kök öğede veya herhangi bir şeklin üzerinde bulunabilir; burada, ekran okuyucular için erişilebilirlik metni görevi de görürler.
Bir de editörün kendi kayda geçirdiği veriler vardır ve genellikle en büyük kısım bunlardır. Inkscape, kendi ad alanının tamamını yazar: belgenin pencere geometrisi, son kaydedildiğindeki yakınlaştırma seviyesi ve imleç konumu, kılavuz çizgileri, ızgara ayarları, katman adları ve görünürlükleri ile bir inkscape:version dizgisi. Illustrator, kendi belge tanımlayıcıları ve geçmişini içeren bir XMP paketi gömer. Bunların hiçbiri ekrana herhangi bir şey çizmez.
Bundan iki pratik sonuç çıkar. Editör verileri kolayca dosyanın en büyük kısmını oluşturabilir; bu yüzden bir SVG'yi yayımlamadan önce bir iyileştiriciden geçirmek genellikle boyutu yarıya indirir. Ayrıca katman adları sizin yazdığınız metindir: <g inkscape:label="client logo v3 REJECTED"> resimde görünmez, dosyada ise tamamen görünürdür.
SVG ne zaman kullanılır
Fotoğraf yerine çizilmiş olan her şey için SVG kullanın: logolar, simgeler, diyagramlar, grafikler, illüstrasyonlar, haritalar. Tek bir dosyanın tüm ekran çözünürlüklerine hizmet ettiği web için ve istenen boyuta ölçeklenebildiği baskı için doğru seçimdir.
Fotoğraflar ve sürekli ton geçişine sahip her şey için PNG veya JPG kullanın. SVG için çok eski veya çok sınırlı yazılımlarda da açılması gereken bir resme ihtiyaç duyduğunuzda, ayrıca düz bir raster kopya dışa aktarın ve yayımlamadan önce editör metadatasını temizleyin; hem dosyayı küçültmek hem de katman adları her zaman herkesin görmesi için olmaz diye.