HTML 5 Dersleri 6 - SVG

SVG Nedir?

SVG (Scalable Vector Graphics), vektörel tabanlı grafikler oluşturmak için kullanılan bir grafik formatıdır. SVG grafikler çözünürlükten bağımsızdır, yani büyütüldüğünde veya küçültüldüğünde kalite kaybı yaşanmaz.

HTML5 ile birlikte SVG desteği doğrudan tarayıcılara entegre edilmiştir ve ek bir eklentiye ihtiyaç duyulmaz.

SVG Neden Kullanılır?

SVG kullanımının başlıca avantajları:

• Kalite kaybı olmadan ölçeklenebilir

• Dosya boyutları küçüktür

• CSS ve JavaScript ile kontrol edilebilir

• SEO ve erişilebilirlik açısından avantaj sağlar

Bu nedenle ikonlar, grafikler ve basit animasyonlar için sıkça tercih edilir.

SVG Temel Yapısı

SVG, svg etiketi ile başlar ve genişlik–yükseklik değerleri tanımlanır.

SVG Temel Yapı Örneği

SVG ile Dikdörtgen Çizme

Rect (Dikdörtgen) Örneği

Bu kod, mavi renkte bir dikdörtgen oluşturur.

SVG ile Daire Çizme

Circle (Daire) Örneği

SVG ile Elips Çizme

Ellipse Örneği

SVG ile Çizgi Çizme

Line Örneği

SVG ile Çokgen (Polygon) Çizme

Polygon Örneği

SVG Metin Kullanımı

SVG içerisinde metin göstermek mümkündür.

SVG Text Örneği

SVG ve CSS Birlikte Kullanımı

SVG elemanları CSS ile stillendirilebilir.

CSS ile SVG Örneği

SVG Nerelerde Kullanılır?

• Web site ikonları

• Grafik ve diyagramlar

• Logo tasarımları

• Basit animasyonlar

• Dashboard ve arayüz bileşenleri

SVG Kullanırken Dikkat Edilmesi Gerekenler

• Karmaşık çizimler performansı etkileyebilir

• Gereksiz detaylardan kaçınılmalı

• Mobil uyumluluk test edilmeli

• Kod okunabilirliği korunmalı

SVG konusunu öğrendikten sonra, HTML5 ile multimedya içeriklerinin nasıl kullanıldığını inceleyebiliriz.

? Bir sonraki ders:
HTML5 ile Video Kullanımı
https://cilginyazilim.com/html-5-dersleri-7-video