SVG nedir?

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

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.

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>

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

Sıradaki ders: Fill ve stroke

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler