Bu makalemde, SVG'lerin nasıl oluşturulduğundan ve SVG çizgi animasyonlarının nasıl yapıldığından bahsetmek istiyorum. Daha önce de belirttiğim gibi SVG, vektör türündeki bir grafik formatıdır. Yani matematiksel formüllerle oluşturulurlar. Matematiksel formülleri oluşturmak için bir program kullanmak, en kolay yoldur. SVG oluşturabileceğimiz programlardan bir tanesi Adobe Illustrator programıdır. Konu sonundaki videomuzda bu programı kullanarak bir SVG grafiği oluşturacağız ve CSS komutları ile animasyonumuzu elde edeceğiz.

 

Eğer SVG ve diğer grafik fotmatları hakkında temel bilgilere ulaşmak isterseniz, Resim Formatları ve Kullanım Yerleri (JPG, PNG, GIF, SVG) adlı makalemi okuyabilirsiniz.

 

İlk olarak, çok basit bir SVG grafiğinin komutlarına göz atalım.

 

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="1000px" height="400px" viewBox="0 0 1000 400" enable-background="new 0 0 1000 400" xml:space="preserve">
<g>
	<path fill="none" stroke="#000000" d="M457.935,119.021h-1.978H457.935c8.593,13.477,18.604,14.209,30.029,2.197
		c-4.834,15.479-19.092,26.294-42.773,32.446c19.336,18.311,29.15,43.751,29.443,76.318c-6.592,25.243-24.805,30.639-54.639,16.187
		c-6.396-17.432-7.079-36.425-2.051-56.982c3.466,38.331,10.814,57.325,22.046,56.982c24.218,1.465,32.201-10.937,23.95-37.207
		l-9.448-14.355l-8.936-13.77l-15.161-18.018c0.586-12.255,9.106-26.854,25.562-43.799H457.935z"/>
	<path fill="none" stroke="#000000" d="M583.766,111.989c1.512,0.049,2.074,0.928,1.684,2.637
		c-3.467,4.786-6.811,11.329-10.033,19.629l-1.686,1.758l-0.879,2.637l-1.611,2.637l-1.684,3.589
		c-11.379,5.566-23.365,5.273-35.963-0.879l-4.248,0.879v27.539v2.637c1.709-1.123,3.394-2.88,5.055-5.273l16.699-0.952h2.563h4.176
		c2.93-0.586,5.98-2.344,9.154-5.273l-8.35,19.556c-0.537,0.146-1.098,0.732-1.684,1.758h-25.928l-1.686,2.637
		c-3.613,44.63,1.416,69.701,15.088,75.22v2.637c-7.666,2.93-17.139,7.812-28.418,14.648c-3.564,1.366-7.08,3.101-10.547,5.2
		h-15.234c-11.913-8.888-12.817-18.311-2.71-28.271c7.324,0.83,11.23,5.566,11.719,14.209c-3.125-0.586-6.738-0.293-10.84,0.879
		c0.146,3.027,1.538,5.98,4.175,8.862h6.665c10.008-5.812,14.746-21.509,14.209-47.095c-2.883,0.099-4.834,1.856-5.859,5.273
		c-2.59-1.416-3.126-3.76-1.611-7.031c2.147-1.709,4.638-2.904,7.471-3.589v-73.755l-3.297-2.71l4.176-0.879
		c9.521-5.517,10.912-9.668,4.174-12.451c-13.086-5.566-24.243-2.611-33.471,8.862c-1.271,11.475,3.466,16.822,14.209,16.04v-4.395
		c-9.814-2.88-10.646-5.273-2.49-7.178c2.88-2.344,3.71-5.297,2.49-8.862c4.052,1.318,7.397,4.273,10.034,8.862
		c-1.074,10.303-6.934,15.65-17.578,16.04c-12.158-6.738-13.817-17.406-4.98-32.007c5.224-4.834,12.182-8.983,20.875-12.451h15.088
		C550.807,133.768,571.168,129.91,583.766,111.989z"/>
</g>
</svg>

 

Yukarıdaki komutlar ile aşağıdaki SVG grafiği elde edilir.

   

Gördüğünüz gibi çok basit bir grafik için bile çokça matematiksel formüllerin üretilmesi gerekiyor. Bu yüzden SVG'leri oluşturmak için SVG desteği olan programlardan yardım almak en mantıklı yol olacaktır. Bu tür programlarda yapmamız gereken tek şey, çizim araçlarını kullanarak istediğimiz grafiği elde etmek ve bu grafiği SVG olarak kaydetmek olacaktır. Yani bu programlar ile SVG'leri oluşturmak oldukça kolaydır.

 

SVG çizgi animasyonlarında kullanılan ve öğrenmemiz gereken iki SVG komutu vardır.

 

stroke-dasharray
stroke-dashoffset

 

stroke-dasharray

 

SVG ile oluşturulan çizgiler, "stroke-dasharray" komutu ile kesikli hale getirilir. Örneğin,

 

stroke-dasharray="10"

 

komutu, çizginin, 10 piksel kesikli çizgi ve 10 piksel boşluk şablonu ile oluşturulmasını sağlar. 10 piksellik kesikli çizgi ve boşluk, çizgi tamamlanana kadar sıra ile uygulanır.

   

stroke-dasharray="20,10,5"

 

komutu, çizginin, 20, 10, 5 piksel kesikli çizgi ve boşluk tekrarları ile oluşturulmasını sağlar.

   

stroke-offset

 

Bu komut, stroke-dasharray ile oluşturulan kesikli çizgi şablonunun başlangıç yerini, belirlenen değer kadar sola taşır. Taşıma sonrasında dasharray ile belirlenen şablon (çizgi ve boşluklar) ile çizginin kalan kısımları oluşturulur. dashoffset komutunun gözlenebilmesi için mutlaka dasharray komutunun uygulanmış olması gerekmektedir. Örneğin,

 

stroke-dasharray="500"
stroke-dashoffset="0"

   

1000 piksellik çizgimiz, 500 piksel kesikli çizgi ve 500 piksel boşluk şablonu ile oluşturulmuş.

 

stroke-dasharray="500"
stroke-dashoffset="200"

   

Çizgimizin dasharray şablonu başlangıç yerinden 200 piksel sola kaydırılmış. Bu yüzden ilk kesikli çizgi elemanımızın boyutu 500 piksel değil, 300 piksellik uzunluğa sahip. Geri kalan kısımlar dasharray ile belirlenen şablona göre oluşturulur.

 

Videomuzda kullandığımız dasharray ve dashoffset ile ilgili uygulamaya ulaşmak için buraya tıklayınız.

 

SVG Çizgi Animasyonu Aşamaları

 

Öncelikle bir program ile SVG yapımızı oluşturuyoruz. Burada dikkat etmemiz gereken sadece iki nokta var; Bunlar, SVG elemanlarımızın çizgi özelliğinin olması ve yazı şeklindeki SVG elemanlarımızın (varsa) "path" biçimine dönüştürülmesi.

 

Oluşturduğumuz yapımızdaki elemanımızın çizgi uzunluğunu bulmamız gerekiyor. Eğer uzunlukları birbirinden farklı elemanlarımız varsa, en büyük elemanımızın çizgi uzunluğunu kullanmamız gerekiyor. Bu uzunluğa göre bazı dasharray ve dashoffset değerleri belirleyeceğiz. Çizgi uzunluğunun bulunmasında deneme yanılma yöntemi veya javascript yöntemi kullanılabilir. Şahsen deneme yanılma ile uğraşmamanızı ve 2 satır javascript komutu ile tam olarak çizgi uzunluğunu bulmanızı öneririm. Javascript komutlarımız için tarayıcılarda yer alan konsol (console) kısmını kullanabiliriz. Örneğin Chrome'dayken sağ tıklayıp incele seçeneği ile açılan pencerede console kısmını seçerek, javascript komutlarımızı yazabileceğimiz alana ulaşabiliriz. Yazmamız gereken komutlar;

 

var cizgi = document.querySelector("path");
cizgi.getTotalLength();

 

Çizgi uzunluğunu bulduktan sonra SVG yapımızı bir yazı editörü ile açıyoruz. svg düğümünün bitişinden hemen önce CSS komutlarımızı yazacağımız style düğümlerini açıyoruz. CSS ile SVG yapımızı oluşturan path elemanlarımızın dasharray değerlerini, bulduğumuz çizgi uzunluğu olarak belirliyoruz. Yani dasharray şablonundaki ilk kesikli çizgi, bütün elemanımızı kaplıyor.

 

Daha sonra bir animasyon oluşturmak için CSS keyframes komutu ile dashoffset değerleri belirliyoruz. Bu değeri bulduğumuz çizgi uzunluğundan başlatarak sıfıra doğru azaltıyoruz. İlk offset değeri, elemanımızın çizgi uzunluğuna eşit olduğu için, ekranda sadece dasharray şablonundaki boş kısım gözüküyor. Animasyonumuzun çalışmasıyla offset değeri azalıyor ve dasharray ile belirlenen kesikli çizgi görünür hale geliyor. Offset değerinin azalması ile şablondaki kesikli çizgi sanki elemanımızın etrafını sararak, elemanımızın ortaya çıkmasını sağlıyor. Offset değeri sıfır olduğunda, sadece dasharray şablonundaki çizgi kısmı görünür hale geliyor ve elemanımızın etrafı tamamen çizgi ile kaplanmış oluyor.

 

Şimdi bu işlemleri yaptığımız videomuzu izleyerek hem SVG yapımızı oluşturalım hem de CSS işlemleri ile animasyonumuzu hazırlayalım,

   

Serimizin ikinci bölümü için burayı tıklayınız