HTML SVG
Önceki mini proje küçük kişisel site istedi. Bu ders isteğe bağlı grafik izini başlatır. SVG, HTML’in keskin ikon ve şekilleri pikselle değil matematikle çizmesini sağlar. Kapsam pratik: SVG’yi sayfaya nasıl koyacağınız — tam tasarım kursu değil.
HTML kursunda neden SVG
Raster görüntüler büyütülünce bulanıklaşır. SVG yolları ve şekilleri tanımlar — logo keskin kalır. Yeni başlayanlar SVG’yi başlık ikonu veya rozet olarak görür. Satır içi ile dosya bilmek sayfaları hafif ve erişilebilir tutar.
Doğrudan yanıt
1) Satır içi: HTML’de svg ağacı. 2) Dosya: .svg kaydedip img+alt ile yükleyin. 3) CSS/JS kancası veya kesin ad için satır içi. 4) Statik logolar için img. 5) Anlamlı grafikleri adlandırın. 6) Bu kurs yalnızca gömmeyi kapsar.
📊 SVG embedding beginners use
| Choice | What it does | Beginner tip |
|---|---|---|
| Inline svg | Shapes live in the HTML tree | Easy to style and label in-page |
| img to .svg | Treats SVG like an image file | Simple for static logos |
| viewBox | Maps SVG coords to the viewport | Keep width/height + viewBox aligned |
| Accessible name | alt or aria-label on meaningful art | Empty name only if truly decorative |
| Scales cleanly | Vectors stay sharp when resized | Great for icons and UI marks |
| Not a photo format | Photos stay JPEG/PNG/WebP | Use SVG for shapes/icons, not camera shots |
Küçücük satır içi SVG
Satır içi SVG yalnızca işaretlemedir. viewBox ve erişilebilir adlı bir daire HTML işini gösterir: tarayıcı çizer; boyut ve anlamı siz kontrol edersiniz.
<svg width="80" height="80" viewBox="0 0 80 80" role="img" aria-label="Green circle">
<circle cx="40" cy="40" r="32" fill="#2a7"></circle>
</svg>
Satır içi demoyu okumak
- svg köktür
- width/height düzen kutusu; viewBox koordinatlar
- circle çocuk şekil
- role=img artı aria-label grafiği adlandırır
- boyut değişince keskin kalır
- mini proje foto için img kullandı; burada «görsel» işaretleme olabilir
Görsel dosya olarak SVG
logo.svg varsa medya gibi davranın: src ve yararlı alt. Yollar klasörle eşleşmeli.
<img src="images/logo.svg" alt="Site logo" width="120">
Dosya kalıbını okumak
- src .svg’ye işaret eder
- alt erişilebilir adı taşır
- width boyutu kontrol eder; vektörler temiz ölçeklenir
- CSS img kutusunu satır içi her yoldan daha kolay stiller
- Bir dosyayı birçok sayfada yeniden kullanın
- Sonraki canvas JS pikselleriyle çizer — başka araç
Satır içi vs dosya seçmek
- CSS ile renklenecek ikon: çoğu zaman satır içi
- Statik marka logosu: img
- Fotoğraflar: raster
- Devasa satır içi illüstrasyon: dosya tercih edin
- Anlamlı grafik: her zaman adlandırın
- Derin SVG yazımı: sonra
Alıştırma — sayfada SVG
- Daireyi yapıştırın; render’ı doğrulayın.
- width/height değiştirin — keskin kalsın.
- .svg’yi img+alt ile yükleyin.
- aria-label/alt’ı geçici kaldırın.
- Mini proje ana kopyasında başlığın yanında satır içi ikon.
- Cümle: SVG ölçeklenebilir işaretleme veya vektör dosyasıdır — foto yerine geçmez.
- İleri: canvas betikle çizer.
Kolay hatalar
- Anlamlı SVG’de erişilebilir ad unutmak
- Devasa satır içi SVG ağaçları yapıştırmak
- Fotoğraflar için SVG
- viewBox’ı atlamak
- SVG’yi canvas ile karıştırmak
- Girişi tam illüstrasyon kursu saymak
- Mini proje a11y alışkanlıklarını bırakmak
Özet
- SVG çözünürlükten bağımsız şekil ve ikon çizer
- Satır içi svg veya img ile .svg dosyası
- Anlamlı grafikleri adlandırın
- Vektörler ölçeklenir; fotoğraflar raster kalır
- Mini proje site inşasıydı; burada isteğe bağlı grafik başlar
- Sonraki: HTML canvas
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek