SVG Kullanımı ve Animasyonlarla Etkileşimli Grafikler

Yorumlar

Scalable Vector Graphics (SVG), ölçeklenebilir vektör grafiklerini tanımlamak için kullanılan bir XML tabanlı formattır. SVG'nin en büyük avantajı, herhangi bir kalite kaybı olmadan ölçeklenebilmesidir. Web geliştirmede ikonlar, grafikler, haritalar ve animasyonlar için sıkça tercih edilir. Bu yazıda, SVG ile nasıl şekiller oluşturulur, CSS ve JavaScript ile nasıl animasyonlar eklenir detaylıca anlatmaya çalışacağım.

1. Temel SVG Kullanımı

SVG'nin HTML içinde nasıl kullanıldığını anlamak için basit bir örnekle başlayalım:

HTML

<svg width='200' height='200'>
  <circle cx='100' cy='100' r='50' fill='blue' />
</svg>

Bu kod, merkezi (100,100) olan ve yarıçapı 50 piksel olan mavi bir daire çizer.

SVG’nin Temel Şekilleri

SVG ile aşağıdaki temel şekilleri oluşturabilirsiniz:

HTML

<rect x='10' y='10' width='100' height='50' fill='red' />
<circle cx='50' cy='50' r='40' fill='blue' />
<ellipse cx='100' cy='50' rx='50' ry='25' fill='green' />
<line x1='10' y1='10' x2='100' y2='100' stroke='black' stroke-width='2' />

<rect>: Dikdörtgen çizer.
<circle>: Çember çizer.
<ellipse>: Elips çizer.
<line>: Çizgi çizer.

2. CSS ile SVG Stilleri ve Efektleri

SVG nesneleri CSS kullanılarak kolayca stillendirilebilir.

CSS

svg {
  width: 100px;
  height: 100px;
  fill: none;
  stroke: black;
  stroke-width: 2px;
}

SVG Renk Değiştirme:

CSS

circle {
  fill: blue;
  transition: fill 0.3s;
}

circle:hover {
  fill: orange;
}

Bu kod, fareyle üzerine gelindiğinde çemberin rengini değiştirir.

3. SVG ile Animasyon Yapma

SVG içinde animasyon yapmak için stroke-dasharray, stroke-dashoffset ve @keyframes gibi teknikler kullanabiliriz.

Basit SVG Animasyonu

HTML

<svg width='200' height='200' viewBox='0 0 200 200'>
  <circle cx='100' cy='100' r='50' stroke='black' stroke-width='4' fill='none' stroke-dasharray='314' stroke-dashoffset='314'>
    <animate attributeName='stroke-dashoffset' from='314' to='0' dur='2s' repeatCount='indefinite' />
  </circle>
</svg>

Bu kod, bir çemberin çizilerek görünmesini sağlayan bir animasyon ekler.

4. JavaScript ile Etkileşimli SVG

Bazı durumlarda, SVG nesnelerinin JavaScript ile kontrol edilmesi gerekebilir. Örneğin, bir SVG öğesine tıkladığınızda rengini değiştirebilirsiniz.

SVG’ye Tıklamayla Renk Değiştirme

HTML

<svg width='200' height='200'>
  <circle id='myCircle' cx='100' cy='100' r='50' fill='blue' />
</svg>

<script>
  document.getElementById('myCircle').addEventListener('click', function() {
    this.setAttribute('fill', this.getAttribute('fill') === 'blue' ? 'red' : 'blue');
  });
</script>

Bu kod, SVG çemberine tıklandığında renginin değişmesini sağlar.

5. Sonuç ve En İyi Uygulamalar

SVG, hafif, ölçeklenebilir ve esnek bir grafik formatıdır. CSS ve JavaScript ile entegre edilerek animasyonlar ve etkileşimli grafikler oluşturulabilir. Şimdi, öğrendiğiniz teknikleri kullanarak kendi interaktif SVG grafiklerinizi oluşturabilirsiniz!

Paylaş: Facebook X LinkedIn WhatsApp

Önceki Yazı

HTML5 Canvas ile Basit Çizimler Yapmak

Sonraki Yazı

Flexbox ve CSS Grid ile Modern Layout Tasarımı