Vektör grafikleri, bir dizi şekil, koordinat ve yolu, oluşturma bağlamına iletme yöntemidir. Bunlar, bir resmin nasıl çizilmesi gerektiğine dair talimatlar dizisidir. Söz konusu resmin ölçeği artırıldığında veya düşürüldüğünde, resmin temsil ettiği nokta ve çizgi kümesi ölçeklenerek yeniden çizilir. İki nokta arasında yumuşak bir eğri, herhangi bir boyutta olduğu gibi yumuşak bir şekilde yeniden çizilir. Bu, bir HTML öğesindeki CSS tanımlı bir kenarlığın görüntü alanında ölçeklendirilirken yeniden çizilmesine benzer.
Ölçeklenebilir Vektör Grafikleri (SVG), W3C tarafından geliştirilen XML tabanlı bir biçimlendirme dilidir. Bu, modern web için tasarlanmış bir vektör resim biçimidir.
Vektör çizimini düzenlemeye özel tüm tasarım yazılımları, bir görüntüyü SVG olarak dışa aktarmanıza olanak tanır. Ancak standartlaştırılmış, insanlar tarafından okunabilen bir biçimlendirme dili olan SVG, kullanılan yazılımdan bağımsız olarak herhangi bir metin düzenleme yazılımıyla da oluşturulabilir ve düzenlenebilir. Ancak, gerçek karmaşıklık düzeyi yüksek olan resimler için kısa sürede gerçekçi davranmaz. SVG, CSS ile stilize edilebilir veya davranışlar ve etkileşimleri resimlere ekleyen JavaScript içerebilir.
Tasarımcılar ve geliştiriciler için bariz bir çekiciliğin ötesinde, SVG aynı zamanda son kullanıcı deneyimi açısından son derece güçlü bir biçimdir. Bir SVG kaynağında bulunan açıklayıcı bilgiler, kafes resim biçimlerinin daha açıklayıcı piksel ızgarasına dayalı bilgilerine kıyasla genellikle son derece kompakttır. Basit şekiller söz konusu olduğunda, bu ikisini fazla basitleştirmek için tarayıcıya "1x1 ile 1x5 arasında 1 piksellik kırmızı bir çizgi çizin" ile"1x1 kırmızı bir pikseldir " deme arasındaki farktır. 1x2 kırmızı bir pikseldir. 1x3 kırmızı bir pikseldir. 1x4 kırmızı bir pikseldir. 1x5 kırmızı bir pikseldir." Bunun tersi ise SVG'nin açıklayıcı doğasının, tarayıcıdan daha fazla yorum (daha fazla "düşünme") gerektirmesidir. Bu nedenle, karmaşık SVG'lerin oluşturulması daha zor olabilir. Aynı şekilde, son derece karmaşık bir görsel de ayrıntılı bir talimat grubu ve büyük bir aktarım boyutu anlamına gelebilir.
Bir resim kaynağı adayının, geleneksel kafes biçimi yerine SVG tarafından daha iyi sunulduğunu hemen anlayabilmek için biraz deneme yanılma yapmanız gerekebilir. Ancak birkaç yönerge vardır: Simgeler gibi arayüz öğeleri, SVG tarafından neredeyse her zaman iyi bir şekilde sunulur. Keskin çizgiler, düz renkler ve açıkça tanımlanmış şekiller içeren posterler muhtemelen SVG için güçlü bir aday olacaktır.
SVG çok önemli bir konudur: Benzersiz stil seçenekleri ve yetenekleriyle, HTML ile bir arada var olacak şekilde tasarlanmış bir biçimlendirme dili. SVG'ye daha ayrıntılı bir giriş için MDN SVG eğiticisine bakın.