SVG ve CSS ile Hareketli Logo Nasıl Oluşturulur

İyi tasarlanmış animasyonların seçici kullanımının kullanıcı deneyimini iyileştirdiği gösterilmiştir ve web, web animasyonları için yavaş yavaş HTML5'e geçiş yapıyor olsa da, kullanımı da bazı komplikasyonlara yol açmaktadır.

Ölçeklenebilir vektör grafikleri (veya SVG'ler), diğer birçok avantajın yanı sıra harika bir API ile erişilebilir bir alternatif sunar ve Basamaklı Stil Sayfalarının biraz yaratıcı kullanımıyla canlandırılabilirler.

Bu makale boyunca, SVG kullanmanın diğer tüm avantajlarını inceleyeceğiz ve animasyonlu logolar oluşturmak için bunları CSS ile birlikte nasıl kullanacağınızı tam olarak öğreteceğiz.

Ölçeklenebilir Vektör Grafikleri Neden Harikadır?

Adından da anlaşılacağı gibi, Ölçeklenebilir Vektör Grafikleri bir tür görüntü dosyası formatı değildir; bu bir XML biçimlendirme dilidir (XHTML veya XOXO'ya çok benzer). Bu özel biçimlendirme dili, çözünürlükte herhangi bir kayıp olmadan yukarı veya aşağı ölçeklenebilen vektör tabanlı iki boyutlu görüntüler oluşturmak için kullanılır.

Bunu bir perspektife oturtmak için, bu biçimin daha fazla özelliği hakkında konuşmaya geçmeden önce basit bir SVG dosyasının arkasındaki koda bir göz atalım.

Aşağıdaki örnek, bir vektör yolunu izleyerek ve onu renklendirmek için fill niteliğini kullanarak Adobe logosunun bir kopyasını üretir. Tercih ettiğiniz metin düzenleyiciyi kullanarak (.svg dosyası olarak kaydederek) kopyalamaktan çekinmeyin ve ardından nihai sonucu görmek için web tarayıcınızda açın (daha önce tartıştığımız gibi logonun nasıl sorunsuz bir şekilde ölçeklendiğine dikkat edin).

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'></pre>
<path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>

</svg>

Tahmin edebileceğiniz gibi, duyarlı bir web sitesi oluştururken bu oldukça kullanışlı olabilir. Bununla birlikte, grafikler vektörler kullanılarak oluşturulduğundan, karmaşık görüntüler söz konusu olduğunda gereğinden fazla veri alma eğilimindedirler. Bu nedenle, SVG'ler logolar, infografikler veya normal grafikler gibi grafiklerin dışında (olmasına rağmen) sıklıkla kullanılmaz.

Duyarlı olmanın yanı sıra ölçeklenebilir vektör grafikleri bazı yerleşik grafik efektlerine (filtreler veya karışım modları gibi) sahiptir ve çok erişilebilir bir DOM API'sine sahiptir. Aslında, CSS ve JavaScript'e zaten aşinaysanız (ki tabii ki öylesiniz, rock yıldızısınız), SVG dosyalarını çok fazla güçlük çekmeden işleyebilmelisiniz. Bu esneklik, örneğin, sunucu tarafında SVG dosyaları oluşturmanıza ve özel araçlar kullanmaya başvurmanıza gerek kalmadan bunları kolayca değiştirmenize olanak tanır (buna daha sonra değineceğiz).

Son olarak, SVG'ler, bu makalenin başlığından (veya bu gerçeğe yaptığımız tekrarlanan referanslardan) tahmin edebileceğiniz gibi, CSS kullanılarak kolayca canlandırılabilir ve buna birazdan geleceğiz. Ama önce, özel araçlar kullanarak SVG'leri manipüle etmenin gerçek sürecini gözden geçirelim.

SVG'lerle Nasıl Çalışılır

Daha önce de belirttiğimiz gibi, beğeninize göre SVG'lere iki elinizle dalabilirsiniz. Tamamen geçerli bir yöntem olmasına rağmen, SVG'leri doğrudan oluşturmak ve işlemek için mevcut harika araçlar vardır, bu da basit CSS stilleri veya animasyonlar dışındaki herhangi bir şey için kodla boğuşmayı verimsiz kılar.

Adobe Illustrator, Inkscape ve Sketch for Mac en popüler seçeneklerdir. Illustrator'ın durumunda, oluşturma işlemi, görüntünüzü hazır hale getirmek ve ardından ' Farklı kaydet ' SVG seçeneğini kullanarak dışa aktarmak kadar basittir. Bunu yaparken, SVG Tiny (akıllı telefonlar için daha uygun) ve SVG Basic (PDA'lar için kullanılması amaçlanan eski bir profil) gibi bir açılır menüde listelenen çeşitli seçeneklerin bulunduğu SVG Profilleri adlı bir seçenek fark edebilirsiniz, ancak biz gidiyoruz. SVG 1.1'e bağlı kalmak.

SVG dosyaları oluşturmak için bu gibi araçları kullanmanın talihsiz bir yan ürünü, temel koda çok fazla meta veri ekleyebilmeleridir, bu da olması gerekenden daha büyük dosyalara neden olur. Doğal olarak, bu web tasarımında bir sorundur, çünkü zayıf optimizasyon nedeniyle yükleme sürelerinin artmasını istemezsiniz. Ölçeklenebilir Vektör Grafikleri daha sonra (çoğu durumda) web sitenize dahil etmeden önce optimize edilmelidir.

Bu noktayı göstermek için optimizasyondan önce ve sonra Android logosunu gösteren bir SVG dosyası örneğine bakalım:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105"></pre>
<g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">

<path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>

<path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>

</g>

<path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>

<g fill="#FFF">

<circle cx="36" cy="22" r="2"/>

<circle cx="59" cy="22" r="2"/>

</g>

</svg>

Şimdi boşlukları, varsayılan öznitelikleri, stilleri ve diğer gerekli olmayan verileri kaldırarak bazı optimizasyon sihri üzerinde çalışacağız ve şunu elde edeceğiz:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105"><g style="fill:#97C024;stroke-linejoin:round;stroke:#97C024"><path d="M14 40v24M81 40v24M38 68v24M57 68v24M28 42v31h39v-31z" stroke-width="10"/><path d="M32 5l5 10M64 5l-6 10" stroke-width="2"/></g><path d="M22 35h51v10h-51zM22 33c0-31 51-31 51 0" fill="#97C024"/><g fill="#FFF"><circle cx="36" cy="22" r="2"/><circle cx="59" cy="22" r="2"/></g></svg>

Orijinal SVG dosyası (0,5 kB) ile başlamak için oldukça kompakt olmasına rağmen, optimizasyon işlemi dosya boyutunu %12,5 oranında (0,4 kB'ye) düşürmeyi başardı. Daha karmaşık görüntülerde, SVG'ler web sitenize uygulandığında dosya boyutunda daha da aşırı azalmalar ve yükleme sürelerinde iyileşmeler fark edeceksiniz.

Basitlik adına, Peter Collingridge tarafından oluşturulan çevrimiçi SVG Optimizer veya Node.js tabanlı açık kaynaklı bir uygulama olan SVGO gibi araçları kullanmanızı öneririz.

Artık SVG'leri neyin bu kadar kullanışlı hale getirdiğini ve onlarla nasıl çalışılacağını öğrendiğimize göre, bu biçimlendirme dili kullanılarak oluşturulan grafikleri canlandırmak için CSS'yi nasıl kullanabileceğinizi görelim.

SVG ve CSS ile Hareketli Logo Oluşturma

SVG'leri bu kadar havalı yapan şeylerden bahsederken bahsettiğimiz gibi, animasyon yetenekleri de dahil olmak üzere bazı yerleşik grafik efektleriyle birlikte gelirler. Aslında, SVG'nin yalnızca animasyonlar için yerel bir sözdizimi vardır ve SMIL (Senkronize Multimedya Entegrasyon Dili) olarak anılır ve bu, grafiklerinizin özelliklerini doğrudan XML işaretlemesi içinde canlandırmanıza olanak tanır.

Ancak, Internet Explorer hiçbir zaman SMIL için destek sunmadı ve Chrome geliştiricileri, CSS ve web animasyonları lehine bu sözdizimi desteğini kaldırmaktan bahsetti. SVG'leri canlandırmak için CSS kullanmak, SMIL veya JavaScript ile karşılaştırıldığında oldukça basit olma avantajına da sahiptir (bu süreci basitleştirmeyi amaçlayan Snap veya Velocity gibi bazı kitaplıklar olmasına rağmen).

Artık ölçeklenebilir vektör grafikleri web sitelerine gömülü görüntüler, CSS arka planları veya satır içi grafikler olarak entegre edilebilirken, son seçenek için yalnızca CSS animasyonlarını kullanabilirsiniz. Bu, yalnızca doğrudan HTML kodumuzun içindeki SVG işaretlemesini canlandırabileceğimiz anlamına gelir.

Bazı örneklere bir göz atalım. Daha önce bahsettiğimiz SVG Adobe logosunu hatırlıyor musunuz? Rengini değiştirmek için basit bir vurgulu animasyon ve geçiş efekti kullanacağız. Vektör yolu için bir sınıf belirleyerek başlıyoruz (ki bunu yararlı bir şekilde adobe-logo olarak adlandıracağız ), ardından stil dosyamızda bu sınıfa efektler ekleyerek. HTML şöyle görünür:

<!DOCTYPE html></pre>
<html>

<head>

<title>SVG Transitions</title>

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<!-- The Adobe Logo recreated using SVG -->

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'>

<path class="adobe-logo" d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>

</svg>

</body>

</html>

Şimdi style.css dosyamıza geçiyoruz :

/* --------------------------

Here we add a little padding and specify a width.

--------------------------- */

body {

padding-top: 5em;

}

svg {

width: 33.32%;

float: left;

}

/* --------------------------

Now we add the actual animation.

--------------------------- */

.adobe-logo {

transition: .3s ease-out;

}

.adobe-logo:hover {

fill: #3881cc;

}

Hangisi şöyle görünür:

Fareyle üzerine gelme animasyonu yerine aynı SVG grafiğine bir dolgu ve kontur efekti eklemek istiyorsanız, kod şuna benzer:

/* --------------------------

Fill and strokes.

--------------------------- */

.adobe-logo {

stroke: #fee16e;

}

.adobe-logo:hover {

fill: #feae6e;

stroke-width: 8;

}

.adobe-logo {

transition: .3s ease-out;

}

Her şey hazır olduğunda, şöyle görünecek:

Bunlar, SVG grafiklerini canlandırmak söz konusu olduğunda CSS kullanarak neler başarabileceğinize dair sadece birkaç basit örnek, ancak gerçek bir ilham almak istiyorsanız, gruplama gibi diğer teknikler kullanılarak neler yapılabileceğine bir örnek verelim, dönüşümler, döndürme, ölçekleme ve hatta CSS ana kareleri:

Oldukça temiz, değil mi? Gördüğünüz gibi, CSS, SVG'lerle birlikte oldukça karmaşık şeyler elde etmek için kullanılabilir. Daha havalı örnekler bulmak için CodePen ve CSSDeck'i taramak istemiyorsanız, İlhamınız İçin 30 Müthiş SVG Animasyonuna bir göz atın.

Son olarak, CSS animasyonunun birkaç sınırlaması olduğu belirtilmelidir. Örneğin, bir öğenin gerçek şeklini değiştirmenize izin vermez; bunun için JavaScript animasyonlarına başvurmanız gerekecek. Bu konu hakkında daha fazla bilgi için, Animate SVG için 8 JavaScript Kitaplığına göz atın.

Çözüm

Doğru kullanılırsa, animasyonlar bir sitenin kullanıcı deneyimini ve genel tasarımını yükseltebilir. SVG'ler CSS ile birlikte bunları uygulamak için zarif bir yol sağlasa da, ihtiyaçlarınızı en iyi karşılayanı bulana kadar deneyebileceğiniz birçok başka yöntem de vardır.

SVG'ler için CSS animasyonlarını kullanmayı seçerseniz, yukarıdaki tavsiyelere uymayı unutmayın:

1. Uyumlu bir grafik düzenleyici aracı seçin.
2. SVG kodunuzu her zaman optimize etmeyi unutmayın.
3. Bu tekniği kullanarak yalnızca 'basit' animasyonları uygulayabileceğinizi unutmayın.

Tasarımcıların ölçeklenebilir vektör grafikleri ile birlikte CSS kullanarak elde ettikleri harika efektlerden bazılarına göz atmak isterseniz, yukarıda listelediğimiz ek kaynaklara göz atın. Kim bilir? Orada biraz ilham bulabilirsin.

Tasarımlarınız için tercih ettiğiniz animasyon yöntemi nedir? Aşağıdaki yorumlar bölümünde bize bildirin!

Giingerann / Shutterstock.com'dan makale küçük resmi