CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

SVG nedir?

CSS kursu · Orta seviye · Ders 88/98

SVG'in CSS ile nasıl biçimlendirildiğini öğrenirsin.

SVG nedir?

SVG (Scalable Vector Graphics), web için bir vektörel grafik biçimidir. Pikseller yerine yollar, çizgiler ve geometrik şekiller kullanır. Büyütüldüğünde pikselleşmez; küçük bir ikonu dev bir afişe çevirsen de her ekranda keskin görünür.

Logo, ikon ve basit illüstrasyonlar için idealdir. Üstelik HTML'in bir parçasıdır: öğelerine CSS ile erişebilir, tıpkı bir paragraf veya düğme gibi biçimlendirebilirsin.

Satır içi SVG

Bir SVG'yi iki yolla sayfaya katarsın: <img src="logo.svg"> ile dış dosya çağırarak ya da HTML içine doğrudan gömerek. İkincisine satır içi SVG (inline SVG) denir.

İkisinin farkı büyüktür. Dış dosyada SVG bir görüntü gibi davranır; iç öğelerine CSS erişemez. Satır içi SVG'de ise her öğeye — circle, path, rect — ayrı ayrı erişir, rengini, kalınlığını, görünürlüğünü değiştirirsin.

SVG öğeleri

Bir SVG çizimi küçük öğelerden kurulur. circle bir daire, rect bir dikdörtgen, line bir doğru çizer. Serbest şekiller için path kullanılır.

Her öğenin geometrik öznitelikleri vardır: cx ve cy merkezi, r yarıçapı, x ve y köşeyi belirtir. Bu öznitelikler şekli çizer; CSS ise rengini, çizgi kalınlığını ve görünürlüğünü belirler.

Uygulama İlk SVG daireni yaz

Bir <svg> etiketi aç, viewBox özniteliğine 0 0 100 100 ver. İçine bir <circle> öğesi ekle; cx, cy ve r özniteliklerine sırayla 50, 50 ve 40 ver.

Örnek çözümü göster 
svg etiketini viewBox="0 0 100 100" ile aç, içine <circle cx="50" cy="50" r="40"/> ekle.
Örnek çözüm:
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"/>
</svg>

Kendini test et

  1. SVG'in özelliği nedir?

    • Pikselleri tek tek boyar
    • Büyütülünce keskin kalır
    • Yalnızca fotoğraflar içindir
    • Tarayıcıda açılmaz
    Cevabı göster

    Büyütülünce keskin kalır — Doğru! SVG vektörel olduğu için büyütülse de pikselleşmez.

  2. SVG etiketini tamamla

    <____ class="logo" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
    Cevabı göster 
    <svg class="logo" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

  3. SVG kavramlarını eşleştir

    SVG
    vektör grafik biçimi
    satır içi SVG
    HTML'e gömülü SVG
    circle
    daire öğesi
    viewBox
    koordinat sistemi

Orta seviye bölümündeki tüm dersler

1 Flexbox temelleri

  1. Flex container nedir?
  2. Flex-direction
  3. Justify-content
  4. Align-items
  5. Flex-wrap
  6. Özet - Yatay menü

2 İleri flexbox

  1. Flex-grow
  2. Flex kısayolu
  3. Order
  4. Align-self
  5. Gap
  6. Özet - Kart ızgarası

3 Sözde sınıflar

  1. :hover ve :focus
  2. :nth-child
  3. :not ve :is
  4. :first-child ve :last-child
  5. :checked ve :disabled
  6. Özet - Etkileşimli liste

4 Sözde elementler

  1. ::before ve ::after
  2. Content özelliği
  3. ::first-letter ve ::first-line
  4. ::selection
  5. ::placeholder
  6. Özet - Dekoratif başlık

5 İleri seçiciler

  1. Kardeş seçiciler (+ ve ~)
  2. Öznitelik seçici desenleri
  3. :where ve :has
  4. Özet - Breadcrumb menü

6 Proje: Landing sayfası

  1. Proje: Landing sayfası
  2. Hero bölümü
  3. Özellik listesi
  4. Fiyat kartları
  5. Proje sonu - Landing sayfası

7 Grid temelleri

  1. Grid container nedir?
  2. Grid-template-columns
  3. Grid-template-rows
  4. Grid gap
  5. Repeat fonksiyonu
  6. Özet - Foto galeri

8 İleri grid

  1. Grid-column
  2. Grid-row
  3. Grid-template-areas
  4. Grid-area
  5. Minmax fonksiyonu
  6. Özet - Magazin düzeni

9 Duyarlı tasarım temelleri

  1. Görünüm alanı meta
  2. Media query temelleri
  3. Breakpoints
  4. Duyarlı tipografi
  5. Duyarlı görseller
  6. Özet - Duyarlı kart

10 Duyarlı düzen

  1. Mobil öncelikli yaklaşım
  2. Grid ile duyarlı düzen
  3. Flex ile duyarlı düzen
  4. Gizleme ve gösterme
  5. Yazdırma stilleri
  6. Özet - Çok sütunlu sayfa

11 Geçişler

  1. Transition nedir?
  2. Transition-property
  3. Transition-duration
  4. Timing function
  5. Transition-delay
  6. Özet - Hover efektleri

12 Dönüşümler

  1. Transform nedir?
  2. Translate
  3. Rotate
  4. Scale
  5. Skew
  6. Özet - Etkileşimli kart

13 CSS değişkenleri

  1. CSS değişkenleri nedir?
  2. Değişken tanımlama
  3. Var() fonksiyonu
  4. Değişken fallback
  5. Tema değiştirme
  6. Özet - Tasarım sistemi

14 Form stilleri

  1. Input stilleri
  2. Label ve placeholder
  3. Focus durumları
  4. Button stilleri
  5. Checkbox ve radio
  6. Özet - Kayıt formu

15 Tablo stilleri

  1. Tablo iskeleti
  2. Border-collapse
  3. Başlık hücreleri
  4. Zebra çizgiler
  5. Hover satırı
  6. Özet - Veri tablosu

16 SVG stilleri

  1. SVG nedir?
  2. Fill ve stroke
  3. SVG hover efektleri
  4. CurrentColor
  5. SVG ikonları
  6. Özet - İkon kümesi

17 Orta seviye finali

  1. Meydan okuma - Flexbox galeri
  2. Meydan okuma - Grid magazin
  3. Meydan okuma - Duyarlı navbar
  4. Meydan okuma - Form ve tablo
  5. Meydan okuma - Orta seviye projesi