HTML SVG

Hazırlayan:Fatma Nur Akın

HTML SVG Grafikleri

SVG, vektör tabanlı grafikleri XML biçiminde tanımlar.

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>

</body>

</html>

ÖRNEK

</svg>

ÖRNEK

<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

<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

<defs>

</linearGradient>

</defs>

</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

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.

Page updated

Report abuse