Hazırlayan:Fatma Nur Akın
SVG, vektör tabanlı grafikleri XML biçiminde tanımlar.
SVG, Ölçeklenebilir Vektör Grafikleri anlamına gelir.
SVG, Web için grafikleri tanımlamak için kullanılır.
HTML <svg> öğesi, SVG grafikleri için bir kapsayıcıdır.
SVG'nin yolları, kutuları, daireleri, metinleri ve grafik görüntüleri çizmek için çeşitli yöntemleri vardır.
Tablodaki sayılar, öğeyi tam olarak destekleyen ilk tarayıcı sürümünü belirtir <svg>
ÖRNEK
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
ÖRNEK
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
ÖRNEK
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
ÖRNEK
<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>
Ö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, XML'de 2B grafikleri tanımlayan bir dildir.
Canvas, anında (bir JavaScript ile) 2B grafikler çizer.
SVG, XML tabanlıdır, bu da 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 öznitelikleri değiştirilirse, tarayıcı şekli otomatik olarak yeniden işleyebilir.
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.
Aşağıdaki tablo, Canvas ve SVG arasındaki bazı önemli farklılıkları göstermektedir:
CANVAS
Çözünürlüğe bağlı.
Olay işleyicileri için destek yok.
Zayıf metin işleme özellikleri.
Ortaya çıkan görüntüyü .png veya .jpg olarak kaydedebilirsiniz.
Yoğun grafiğe sahip oyunlar için çok uygundur.
SVG
Çözünürlükten bağımsız.
Geniş işleme alanlarına sahip uygulamalar için en uygunudur.(google maps)
Olay işleyicileri için destek var.
Karmaşıksa yavaş oluşturma (DOM'u çok kullanan herhangi bir şey yavaş olacaktır.)
Oyun uygulamaları için uygun değildir.