jQuery ve DrawSVG ile Hareketli SVG İkon Kullanımı

Web sitenizde hareketli SVG (animated SVG) kullanımı nasıl yapılır? Web sitelerinde göze hitap eden ikonlara, jQuery ve DrawSVG eklentileri ile hareket vermek nasıl olur?

SVG ikonları ölçeklenebilir, vektör grafikleri olması nedeniyle web sayfalarınızda herhangi bir bozulma olmadan kullanabileceğiniz ikonlar ve bu ikonları standart olarak statik kullanmak yerine hareketli bir şekilde de kullanabiliyoruz ve bunu da DrawSVG eklentisiyle yapacağız.

Bir index.html sayfası oluşturalım ve sayfa içerisine standart HTML5 kodlarını yerleştirelim. Buraya eklememiz gereken iki tane script olacak. Eklediğimiz satırlardan biri, yani jQuery satırı, jQuery dosyasını sayfamıza çağırıyor. Diğerini de DrawSVG dosyasını sayfamıza çağırmak için kullanacağız.

1. http://code.jquery.com/jquery-latest.min.js
2. https://cdn.jsdelivr.net/jquery.drawsvg/1/jquery.drawsvg.min.js

SVG Uzantılı İkonlar Nasıl Yapılır?

Şimdi sayfa içerisinde SVG kodlarını ekleyeceğiz. Bunun birkaç yolu var. Ben bu eğitimde Illustrator programını kullanacağım. Vektörlerden bir tanesini seçiyorum ve yeni bir dosya oluşturuyorum, dosyanın boyutunun önemi yok. Dikkat etmemiz gereken şey şu. Sayfada içi boş, sadece dış çizgi görüyoruz. Dolayısıyla benim de bu grafiği içi boş bir hale getirmem ve dış çizgilerini bırakmam gerekiyor. Görseli seçiyorum, Appearance kısmındaki Fill değerini None yapıyorum. Dolayısıyla bu şekilde herhangi bir renk atamamış oluyorum ve Stroke değeri de dış çizgiyi ifade ediyor. Beyaz rengi seçiyorum. Kalınlık olarak da, ben 1 olarak bırakıyorum. Vektörümüzü hazırladıktan sonra File menüsünün altındaki Export seçeneğine tıklıyorum ve Export As butonuna tıklıyorum. Dosyayı bilgisayarımıza kaydetmeyeceğiz. Font kısmındaki seçeneği Convert to Outlines olarak değiştiriyoruz ve Images kısmını da Embed olarak değiştiriyoruz. Bu seçenekleri seçtiğimizde ve Show Code butonuna tıkladığımızda bize bir kod verecek.

Gördüğünüz gibi bu SVG etiketiyle yapılmış bir kod. Ve bu kodu Ctrl + A ve Ctrl + C ile kopyalıyorum. SVG kodunu sayfaya yapıştırdıktan sonra ekranda görüyor olmamız gerekiyor. Ancak yazı tipi beyaz olduğu için bir style dosyası ekleyeceğiz. Harici bir style dosyasına da ekleyebilirsiniz. Ben az kod yazacağımız için tek bir sayfada çözümlemeyi düşünüyorum. Body etiketine bir background atayalım ve SVG etiketine de bir konumlandırma yapalım. Gördüğünüz gibi sayfanın ortasına bu SVG dosyasını yerleştirmeyi başardık.


        body {
            background: #1e075f;
        }
        
        svg {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 400px;
        }

DrawSVG JavaScript Kodu

Bu SVG dosyasını herhangi bir görselden değil, tamamen sol tarafta gördüğünüz kodlardan alıyor. SVG kodumuz var. Dosyalarımızı Import ettik ve şimdi de yapmamız gereken bir JavaScript kodu eklemek. Div etiketinin altına geliyorum. Bu kodları ekliyorum. Gördüğünüz gibi animasyonlu bir şekilde harfimiz oluşuyor. Width değerini biraz daha düşürüyorum, böylece daha güzel görünecektir gözümüze.


        var $svg = $('svg').drawsvg();
        $svg.drawsvg('animate');

Bu videoda DrawSVG eklentisini kullanarak, SVG ikonlarını nasıl hareketlendirebileceğimiz gösterdim. Web sitelerini canlandırmak için bu yöntemi uygulayabilirsiniz.

Popular Eğitimler

Etkili SEO Başlığı Nasıl Oluşturulur?

İçeriklerinizin kalitesi ne kadar yüksek olursa olsun aramalarda ziyaretçilerin ilk olarak başlıklar…

Google Web Fontları Nasıl Kullanılır?

Google web fontları nasıl kullanılır? Google web yazı karakterlerini sitemize nasıl ekleriz? Google Web fontlarının Türkçe desteği var mı?

CSS Web Sitelerinde Kaydırma Çubuğu Renk Değiştirme

Bu HTML ve CSS eğitiminde herhangi bir JavaScript dosyası kullanmadan yandaki ScrollBar’ı…

SSH ile Dosya Sıkıştırma ve Açma

Linux altında SSH ile dosyaları sıkıştırma ve açma işlemleri komutlarla yapılabilir. tar komutu yardımıyla istenen dosyaları…

Portfolyo Sayfaları için JavaScript TypeWriter Efekti

Daha çok portfolyo veya ajans sitelerinde gördüğümüz tarzda bir daktilo yazım efekti…

Geri Sayım Sayacı Kodu (HTML ve JS)

Geri sayım kodlarını genellikle yapım aşaması sayfalarında sitenin açılacağı zamanı, bir kampanyanın…