banner
htmldersleri
Ana SayfaANA SAYFA Dersler | Örnekler | Forum | Sıkça Sorulan Sorular |Hakkında
HTML Temel
HTML Giriş
HTML Elementler
HTML Etiketler
HTML Parametreler
HTML Biçimlendirme
HTML Özeller
HTML Bağlantılar
HTML Çerçeveler
HTML Tablolar
HTML Listeleme
HTML Formlar
HTML Resimler
HTML Arka Plan
HTML Renkler
HTML Renk Değerleri
HTML Renk İsimleri
HTML Hızlı Liste

HTML5 Ana Menü
HTML5 Giriş
HTML5 Anlamlandırma
HTML5 Giriş Tipleri
HTML5 Form Elementleri
HTML5 Form Özellikleri
HTML5 Canvas
HTML5 SVG
HTML5 Video
HTML5 Audio
HTML5 Konum
HTML5 Sürükle/Bırak
HTML5 Web Depolama
HTML5 Uygulama Bellekleme
HTML5 Web Çalışanı
HTML5 SSE

HTML Gelişmiş
HTML Tasarım
HTML Fontlar
HTML Stiller
HTML Başlık
HTML Meta
HTML URL
HTML Scriptler
HTML Std. Nitelikler
HTML Olaylar
HTML ASCII
HTML Web Sunucu

HTML Örnekler/Test
HTML Örnekler
HTML Örnek Site
HTML Test

HTML5 Inline (Sıralı) SVG

Önceki Sonraki

HTML5 sıralı SVG'yi destekler.

SVG Tarayıcınız bu özelliği desteklemiyor.

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ç:

Tarayıcınız bu özelliği desteklemiyor.

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

Önceki Sonraki

Dersler | Örnekler | Forum | Sıkça Sorulan Sorular |Hakkında
Copyright © 2008 | Tüm Hakları Saklıdır. | Webmaster: destek@htmldersleri.org

74 kişi şuan sayfamızda geziniyor.

English Deutsch Français Español Dutch Italiano Português Български
html dersleri
Dersler Örnekler Online Test