SVG - Genel Bakış

SVG nedir?

SVG, Ölçeklenebilir Vektör Grafikleri, vektör tabanlı grafikleri tanımlamak için XML tabanlı bir dildir.
SVG'nin web üzerindeki resimleri görüntülemesi amaçlanmıştır.
Vektör görüntüleri olan SVG görüntüsü, nasıl uzaklaştırıldıklarına veya yeniden boyutlandırıldıklarına bakılmaksızın kaliteyi asla kaybetmez.
SVG görüntüleri, etkileşimi ve animasyonu destekler.
SVG, bir W3C standardıdır.
Tarama görüntüleri gibi diğer görüntü formatları da SVG görüntüleriyle birlikte kullanılabilir.
SVG, XSLT ve HTML DOM ile iyi entegre olur.

Avantajlar

SVG resimleri oluşturmak ve düzenlemek için herhangi bir metin düzenleyiciyi kullanın.
XML tabanlı olan SVG görüntüleri aranabilir, dizine eklenebilir ve komut dosyası oluşturulup sıkıştırılabilir.
SVG görüntüleri, nasıl uzaklaştırıldıklarına veya yeniden boyutlandırıldıklarına bakılmaksızın kaliteyi asla kaybetmedikleri için son derece ölçeklenebilirdir
Her çözünürlükte iyi baskı kalitesi
SVG bir Açık Standarttır

Dezavantajları

Metin formatı boyutu, ikili formatlı raster görüntülere kıyasla daha büyüktür.
Küçük resim için bile boyut büyük olabilir.

Misal

Aşağıdaki XML parçacığı, web tarayıcısında bir daire çizmek için kullanılabilir.

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>

SVG XML'yi doğrudan bir HTML sayfasına gömün.

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer'da, SVG görüntülerini görüntülemek için activeX kontrolleri gerekir.

SVG, HTML ile nasıl entegre olur?

<svg> öğesi, SVG görüntüsünün başlangıcını belirtir.
<svg> öğesinin width ve height özellikleri, SVG görüntüsünün yüksekliğini ve genişliğini tanımlar.
Yukarıdaki örnekte, bir daire çizmek için bir <circle> elemanı kullandık.
cx ve cy özelliği, dairenin merkezini temsil eder. Varsayılan değer (0,0). r özelliği, dairenin yarıçapını temsil eder.
Diğer özellikler kontur ve kontur genişliği, dairenin ana hatlarını kontrol eder.
dolgu niteliği, dairenin dolgu rengini tanımlar.
Kapanış </svg> etiketi, SVG görüntüsünün sonunu belirtir.