HTML SVG Grafikleri

SVG, vektör tabanlı grafikleri XML formatında tanımlanmasıdır.

SVG Nedir?

  • SVG, Scalable Vector Graphics (Ölçeklenebilir Vektör Grafikleri) anlamına gelir
  • SVG, Web için grafikleri tanımlamak için kullanılır
  • SVG W3C kullanım önerisidir.

HTML <svg> Etiketi

HTML <svg> etiketi SVG grafikleri için kullanılır.

SVG’de yollar, kutular, daireler, metinler ve grafik görüntüler çizmek için çeşitli yöntemler bulunur.

Tarayıcı Desteği

Aşağıdaki tarayıcı versiyonları <svg> etiketini tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

SVG Daire

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="orange" />
</svg>

</body>
</html>

SVG Kare – Diktörtgen

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,233,0)" />
</svg>

</body>
</html>

SVG Yuvarlatılmış Dikdörtgen – Kare

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:green;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

</body>
</html>

SVG Yıldız

<!DOCTYPE html>
<html>
<body>

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:blue;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="20" font-family="Verdana" x="40" y="80">TurkYazilimci</text>
  Üzgünüz, tarayıcınız satır içi SVG'yi desteklemiyor.
</svg>

</body>
</html>

SVG ve Canvas Arasındaki Farklar

SVG, XML’deki 2D grafikleri tanımlamak için kullanılan bir dildir.

Canvas, anında (JavaScript ile) 2D grafikler çizer.

SVG XML tabanlıdır; bu, her öğenin SVG DOM içinde mevcut olduğu anlamına gelir. Bir öğe için JavaScript olay işleyicileri ekleyebilirsiniz.

SVG’de çizilen her şekil bir nesne olarak hatırlanır. Bir SVG nesnesinin nitelikleri değiştirilirse tarayıcı, şekli otomatik olarak yeniden oluşturabilir.

Tuval piksel piksel işlenir. Canvas’ta grafik çizildikten sonra tarayıcı tarafından unutulur. Konumunun değiştirilmesi gerekiyorsa, grafiğin kapsadığı nesneler de dahil olmak üzere tüm sahnenin yeniden çizilmesi gerekir.

Canvas ve SVG’nin Karşılaştırılması

Aşağıdaki tabloda canvas ve SVG karşılaştırmasını görebilirsiniz.

CanvasSVG
Çözünürlüğe bağlı
Olay işleyicileri için destek yok
Zayıf metin oluşturma yetenekleri
Ortaya çıkan görüntüyü .png veya .jpg olarak kaydedebilirsiniz.
Yoğun grafiğe sahip oyunlar için çok uygundur
Çözünürlükten bağımsız
Olay işleyicileri için destek
Geniş işleme alanlarına sahip uygulamalar için en uygunudur (Google Haritalar)
Karmaşıksa yavaş oluşturma (DOM’u çok kullanan her şey yavaş olacaktır)
Oyun uygulamaları için uygun değil

İlerleyen bölümlerde SVG’ye daha detaylı değinmeye çalışacağız.

5 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir