SVG dosyaları, metin tabanlı bir dosya biçimdir ve özellikle internet sayfalarında kullanılır Scalable Vector Graphics özelliği sayesinde büyük veya küçük boyutlarda kullanılabilir ve yüksek çözünürlüğe sahiptir CSS ve JavaScript gibi diğer web teknolojileriyle birlikte kullanılabilir Bu dosya biçimi ile birçok farklı grafik oluşturulabilir JavaScript ile SVG nesneleri HTML sayfalarda kullanılabilir ve animasyonlandırılabilir Yol çizgileri, dikdörtgenler ve çemberler en yaygın şekillerdendir Animasyonlar oluşturmak için setInterval yöntemi kullanılabilir ancak daha akıcı ve doğal animasyonlar için requestAnimationFrame yöntemi önerilir SVG dosyaları, interaktif ve etkileyici web siteleri oluşturmak için kullanılır
Scalable Vector Graphics (Türkçe: Ölçeklenebilir Vektör Grafikleri), animasyonlar ve görsel efektler oluşturmak için metin tabanlı bir dosya biçimidir. Özellikle internet sayfalarında sıklıkla kullanılır. SVG, png ve jpg gibi diğer resim formatlarından farklıdır. Ölçeklenebilir olması, yani büyük veya küçük boyutlarda kullanılabilmesi ve yüksek çözünürlüğü ile diğer formatlardan ayrılır. SVG dosyaları ayrıca, HTML'de gösterilebilir ve düzenlenebilir.
SVG dosyaları, CSS ve JavaScript gibi diğer web teknolojileriyle birlikte kullanılabilir. Basit şekilli tasarımlardan daha karmaşık animasyonlara kadar her türlü grafik oluşturulabilir.
SVG, birçok farklı şekil ve özellikleriyle kullanıcılar tarafından ihtiyaca göre adapte edilebilir. Yaratıcı düşünce ve teknik becerilerle bir araya geldiğinde, farklı alanlarda harika SVG projeleri ortaya çıkabilir.
SVG Nedir?
SVG, birçok farklı öğeyi ve şekilleri içeren bir dosya biçimidir. Bu özellikleri sayesinde, web tasarımcıları ve geliştiriciler, interaktif ve etkileyici web siteleri oluşturabilirler. SVG dosyaları, web sayfalarında kullanılan diğer dosya biçimlerine göre daha yüksek kaliteli görüntüler sunar. Bu nedenle, bugün birçok web sitesinde SVG dosyaları kullanılmaktadır.
SVG dosyaları, birden fazla öğenin bir arada kullanılmasına olanak tanır. Bu öğeler arasında, grafikler, çizimler, animasyonlar, sesler ve videolar yer alır. SVG dosyaları, site ziyaretçilerine harika bir kullanıcı deneyimi sunabilir. Ayrıca, SVG dosyalarının boyutu diğer dosya biçimlerine göre daha küçük olduğu için, site yüklenme süreleri de kısalmaktadır.
JavaScript ile SVG Kullanımı
SVG dosyaları, JavaScript ile oldukça kolay bir şekilde yönetilebilir. SVG elemanlarını değiştirmek, eklemek veya silmek için JavaScript kullanılabilir. Örneğin, bir SVG daire oluşturmak için şu kodu kullanabilirsiniz:
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");circle.setAttribute("cx", "50");circle.setAttribute("cy", "50");circle.setAttribute("r", "30");circle.setAttribute("fill", "red");svg.appendChild(circle);document.body.appendChild(svg);Bu kodda, createElementNS methodu SVG nesneleri oluşturmak için kullanılır. cx, cy ve r gibi özellikler, daire özelliklerini belirler. Daha sonra, nesne svg nesnesine eklendiği için görüntülenebilir. Bu şekilde, JavaScript ile SVG nesnelerini HTML sayfanızda kullanabilirsiniz.
SVG Elemanları
SVG elemanları, birçok şekil ve düzenlemelerin yapılabileceği birçok araç sunar. Yol çizgileri, kareler, daireler, çokgenler ve metin kutuları, SVG elemanlarına birkaç örnektir. Bu elemanlar düz renkler veya gölgeler ile doldurulabilir veya değişen renklere sahip olabilir. SVG elemanlarını dize harflerle veya nesnelerle birleştirerek, daha karmaşık grafikler ve görüntüler oluşturulabilir. Ayrıca, çizgi kalınlığı, dolgu rengi, saydamlık, boyut ve çerçeve genişliği gibi birçok özellik değiştirilebilir. Örneğin, yol çizgilerini kullanarak, keskin hatlara sahip çiçekler veya yapraklar oluşturabilirsiniz. Dikdörtgenler ve daireler, basit şekiller oluşturma konusunda kolaylık sağlar ve SVG ile hareketli ve renkli hale getirilebilir. SVG elemanlarıyla, sanat eseri, grafik veya diğer görsel olanakları ile tasarımcı olabilirsiniz.
Yol Çizgileri
Yol çizgileri, SVG sanatında en yaygın kullanılan çizim elemanlarından biridir. Bu eleman ile daireler, çizgiler ve diğer şekiller oluşturulabilir. Yol çizgileri, bezier eğrileri kullanılarak oluşturulur, bu sayede çok çeşitli eğriler ve şekiller elde edilebilir. Yol çizgileri, SVG animasyonları için de sıklıkla kullanılır ve hareket eden nesnelerin yollarını tanımlamak için kullanılabilir.
- Yol çizgileri, SVG koordinat düzleminde tanımlanır ve x ve y koordinatları belirtilir.
- Başlangıç noktası, ilk koordinat olarak tanımlanır ve dışında bir noktaya hareket eden eğriler tanımlamak için kontrol noktaları kullanılabilir.
- Yol çizgileri ile daire, üçgen, dikdörtgen vb. şekiller oluşturmak mümkündür. Bu işlem için yalnızca başlangıç noktası ve eğrinin kontrol noktaları belirtilir.
Yol çizgileri, SVG sanatında oldukça önemli bir role sahiptir ve hem estetik, hem de uygulama açısından son derece kullanışlıdır.
Dikdörtgenler ve Çemberler
Dikdörtgenler ve çemberler, SVG ile çok çeşitli şekiller oluşturmak için kullanabilceğiniz basit elemanlardır. Dikdörtgenlerin boyutları ve köşelerinin yuvarlatılması özelleştirilebilir. Ayrıca dikdörtgenlerin rengi, kenarlığı ve dolgusu gibi özellikleri de kolayca değiştirilebilir.
Çemberler ise, daireler ve kısımlarını oluşturmak için kullanılır. Yarıçapı ve merkezi belirlenebilir ve renkleri kolayca değiştirilebilir.
Hem dikdörtgenler hem de çemberler, animasyonlandırmak ve hareketlendirmek için SVG ve JavaScript kullanılarak kullanılabilir. Bu şekillerin koordinatlarını değiştirerek, dönüştürerek ve renklendirerek çok sayıda animasyon efekti oluşturabilirsiniz.
| Özellik | Açıklama |
|---|---|
| width | Dikdörtgenlerin genişliği |
| height | Dikdörtgenlerin yüksekliği |
| rx, ry | Dikdörtgenlerin köşelerinin yuvarlatılması için kullanılır |
| cx, cy | Çemberlerin merkez koordinatları |
| r | Çemberlerin yarıçapı |
| fill | Şekillerin dolgusu (renk, resim vs.) |
| stroke | Şekillerin kenarlığı (renk, genişlik vs.) |
JavaScript Animasyonları
JavaScript ile SVG animasyonları oluşturmak oldukça kolaydır. setInterval yöntemi, belirli bir zaman aralığıyla tekrarlanacak görevleri belirlemek için kullanılır. Örneğin, her bir saniye içinde bir dairesel nesneyi hareket ettirebilirsiniz. requestAnimationFrame yöntemi ise animasyonlu SVG nesnelerinin istenilen hızda çalışmasını sağlar. Bu yöntem, daha akıcı ve doğal görünen animasyonlara olanak tanır. JavaScript, SVG nesnelerini animasyonlandırmak için birden fazla özellik ve yöntem sunar. Bu özellikler arasında dönüşüm özellikleri, renk özellikleri, stil özellikleri ve daha fazlası yer alır.
setInterval
JavaScript'de setInterval, tüm parametrelerini ve bir işlevi alarak çalışır. Belirtilen süre aralıklarında işlevi yürütecek ve henüz tamamlanmamış olan görevleri bir sonraki çağrıya kadar tekrarlayacaktır. setInterval kullanarak, örneğin bir dairesel nesneyi belirli bir aralıkla hareket ettirebilirsiniz.
Bir örnek olarak, bir kanvas oluşturun ve içine bir dairesel nesne yerleştirin. setInterval kullanarak, nesneyi her bir saniyede bir $100$ kadar hareket ettirebilirsiniz. Farklı sürelerde farklı nesneleri hareket ettirebilirsiniz ve birden fazla setInterval işlevini kullanabilirsiniz.
setInterval'ın kullanımı oldukça basittir. İlk olarak, çalıştırılacak olan işlevi belirtin. İkinci olarak, işlevin kaç milisaniyede bir çalıştırılacağı belirtilir. Son olarak, işlev, aşağı yukarı işlevler arasında çalışıyormuş gibi çağrılır. setInterval, bir döngü içinde çalıştığından, JavaScript tarafından basit bir hata kontrolü yapılabilir.
setInterval, kullanımı basit ve oldukça esnek olan bir yöntemdir. İşlevlerin kullanımı genişletilebilir ve değiştirilebilir. Bu yöntem, birçok farklı bağlamda kullanılabilir ve farklı uygulamalara adaptasyonu kolaydır.
requestAnimationFrame
requestAnimationFrame, daha akıcı ve doğal görünen animasyonlar için kullanılır. setInterval metodu, animasyonların istenilen hızda çalışmasını sağlamakta zorlanır. Bu nedenle requestAnimationFrame metodu daha etkilidir. setInterval metodu, belirli bir zaman aralığında tekrarlanacak görevleri belirlemek için kullanılsa da, requestAnimationFrame metodu daha akıcı bir animasyon sağlayarak nesnenin algılanan hızını hesaplar. Bu sayede hem hızlı hem de akıcı bir animasyon elde edilir. Bununla birlikte, requestAnimationFrame metodu, tarayıcının kendisiyle senkronize bir şekilde çalışır ve batarya tüketimini en aza indirir. Bu nedenle, animasyonlu SVG nesnelerinin kontrolü için requestAnimationFrame genellikle tercih edilen yöntemdir.