SVG Kullanımı ve Animasyonlarla Etkileşimli Grafikler

HTML5 & CSS3

SVG Kullanımı ve Animasyonlarla Etkileşimli Grafikler

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:

<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:

<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.

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

SVG Renk Değiştirme:

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

<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

<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!

Benzer Yazılar