HTML5 Inline (Sıralı) SVG

HTML5 sıralı SVG’yi destekler.

SVG


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 Firefox Opera Google Chrome Safari

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