HTML5 SVG

Vektörel grafik çizimi yapmak için kullanılan SVG dilinin ne olduğu ve SVG kullanımını çeşitli SVG örnekleri ile anlattım. SVG dili ve HTML5 canvas arasındaki farklarıda makale sonunda bulabilirsiniz.

SVG nedir

  • SVG açılımı Scalable Vector Graphics ( Ölçeklenebilir Vektörel Grafikler )
  • Web sayfalarında grafik oluşturmak için kullanılır.
  • SVG, HTML geliştiricileri tarafından önerilmektedir.
  • JavaScript kullanımına ihtiyaç yoktur.

HTML5 <svg> etiketi SVG grafikleri için taşıyıcı görevi görür.

SVG etiketi ile çizgi, dikdörtgen, çember, daire vb. çizim yöntemleri vardır.

Tarayıcı desteği

Tablodaki değerler <svg> etiketini destekleyen ilk tarayıcı sürümlerini belirtir.

Etiket Chrome IE/ Edge Firefox Safari Opera
<svg> 4.0 9.0 3.0 3.2 10.1

SVG çember ve daire çizmek

<!DOCTYPE HTML>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <title>SVG Örnekleri</title>
</head>

<body>

<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="white" />
  <circle cx="150" cy="50" r="40" stroke="black" stroke-width="4" fill="blue" />
</svg>

</body>

</html>

SVG dikdörtgen

<svg width="400" height="100">
  <rect width="400" height="100" stroke="black" fill="blue" stroke-width="10" />
</svg>

SVG yuvarlak dikdörtgen

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

SVG polygon yıldız

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

SVG örnek

<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="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>

SVG ve Canvas arasındaki farklar

SVG, XML tabanlı grafik çizimi için kullanılan bir dildir.

Canvas, JavaScript ile grafik çizimi yapmak için kullanılan bir etikettir.

SVG, XML tabanlı olduğundan SVG etiketlerine JavaScript DOM ile olay (tıklama, üzerine gelme vb.) ekleyebiliriz.

SVG ve Canvas karşılaştırması

Canvas SVG
  • Sayfayı yakınlaştırınca çözünürlük bozulur.
  • Çizim nesnelerine JavaScript olayı eklenemez.
  • Çizim .png veya .jpg olarak kaydedilebilir.
  • Yoğun grafik işlemi olan oyunlar için uygundur.
  • Sayfayı yakınlaştırınca çözünürlük bozulmaz.
  • Çizim nesnelerine JavaScript olayı eklenebilir.
  • Çizim .png veya .jpg olarak kaydedilemez.
  • Yoğun grafik işlemi olan oyunlar için uygun değildir.

HTML5 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir