HTML5 Inline (Sıralı) SVG

HTML5 sıralı SVG'yi destekler.

SVG Nedir?

SVG Skala edilebilir Vektör Grafikleri (Scalable Vector Graphics) anlamına gelir.
SVG vektör temelli grafikleri ifade etmek için kullanılır.
SVG grafikleri XML formatında tanımlar
SVG grafikleri zoom'lansalar da yeniden boyutlandırılsalar da kaliteleri düşmez.
SVG dosyaları içindeki her element, her özellik (attribute) hareketlendirilebilir (anime)

SVG'nin Avantajları

Resim dosyalarında SVG kullanmanın avantajları (JPEG ve GIF gibi):

SVG resimleri herhangi bir metin editörü ile yaratılabilir ya da düzenlenebilir
SVG resimleri aranabilir, indekslenebilir, script kodu ile yazılabilir ya da sıkıştırıabilir
SVG resimleri skale edilebilir.
SVG resimleri tüm çözünürlüklerde yüksek kalite ile yazdırılabilir (yazıcı)
SVG resimleri zoom edilebilir (ve kalite düşmez)

Tarayıcı Desteği

Internet Explorer 9+, Firefox, Opera, Chrome, ve Safari inline SVG'yi destekler.

SVG'yi Doğrudan HTML Sayfalarına Gömmek

HTML5 ile SVG elementlerini doğrudan sayfanıza gömebilirsiniz:

Örnek

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Kendin Dene »

Sonuç:

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

Aşağıdaki tablo Canvas ve SVG arasındaki önemli farkları gösterir:

Canvas	SVG
Çözünürlüğe bağımlı Olay (event) işleyicilerini desteklemez Zayıf render kapasitesi (metinler için) Sonuçları .png veya .jpg olarak kaydedebilme Oyunlar için uygun	Çözünürlükten bağımsız Olay (event) işleyicilerini destekler geniş render alanları olan uygulamalar için en uygun çözüm(Google Maps) Karmaşıksa yavaş render işlemi Oyunlar için uygun değil