SVG Dosyalarınızı Canlandırmak için SVGator Nasıl Kullanılır

Mobil uyumlu web siteleri tasarlamak istiyorsanız Ölçeklenebilir Vektör Grafikleri (SVG'ler) harikadır (ki bunu yapmalısınız!). Tamamen ölçeklenebilirler, hafifler ve en iyi yanı, onları canlandırabilmenizdir (normal resimlerden farklı olarak). Sorun şu ki, Basamaklı Stil Sayfaları (CSS) konusunda o kadar kullanışlı değilseniz, bir SVG'yi canlandırmak karmaşık olabilir.

Neyse ki, tüm animasyon sürecini basitleştiren birçok araç var. Bu yazıda sizi favorilerimizden biri olan SVGator ile tanıştıracağız. Ardından, SVG dosyalarını canlandırmak için nasıl kullanılacağını size öğreteceğiz.

Hadi çalışalım!

Neden SVG Kullanmalısınız?

İlk bakışta, SVG'ler diğer herhangi bir görüntü türü gibi görünür. Ancak, geçmiş görünümlere bakarsanız, bu belirli dosya türü birkaç nedenden dolayı benzersizdir. En önemlilerinden bahsedelim:

• Vektör tabanlıdır. Çoğu durumda, web sitelerinde gördüğünüz resimler piksellerden oluşur. SVG'lerde her şey, sonraki birkaç noktayla bağlantılı olan vektörlerle ilgilidir.
• Son derece ölçeklenebilirler. Vektör tabanlı dosyalar, hangi çözünürlükte görüntülediğinize bakılmaksızın kalitelerini korur. Bu, SVG'leri kullanabileceğiniz en mobil uyumlu dosya türlerinden biri yapar.
• Hafifler. Piksel yerine vektörlerle uğraştığınız için, SVG dosyaları daha hafif olma eğilimindedir ve bu da daha kısa yükleme süreleri anlamına gelir.
• Vektörlerinizi canlandırabilirsiniz. SVG'ler ile vektörlerinizi canlandırmak için CSS ve JavaScript kullanabilirsiniz. Örneğin, GIF'leri kullanarak benzer efektler elde edebilirsiniz, ancak bunlar inanılmaz derecede ağır olma eğilimindedir.

Pek çok olumlu yönlerine rağmen, SVG'ler her durum için mükemmel bir seçim değildir. Örneğin, fotoğraflar gibi karmaşık grafikleri görüntülemek istiyorsanız, PNG veya JPEG gibi geleneksel dosya biçimlerini kullanmanız daha iyi olur.

Ancak, vektörlerle çoğaltabileceğiniz logolar, simgeler ve diğer basit grafikler söz konusu olduğunda, SVG'leri kullanmak çok daha mantıklıdır. Bu yaklaşım, yalnızca yanıt vermelerini sağlamakla kalmaz, aynı zamanda yükleme sürelerinizden birkaç milisaniye kısaltabilir.

Geçmişte, manuel CSS yaklaşımını kullanarak SVG dosyalarının nasıl canlandırılacağından bahsetmiştik. Şimdi, özel bir hizmet kullanarak neler yapabileceğinizi kontrol edelim.

SVGator'a Giriş

SVGator çok basit bir araçtır. SVG dosyalarını içe aktarmanıza ve önceden tanımlanmış efektler koleksiyonunu ana kareler kullanarak canlandırmanıza olanak tanır. Animasyonlarınızın nasıl göründüğü ve zamanlamaları üzerinde çok fazla kontrolünüz var. Hatta aynı SVG dosyasına birden fazla türde animasyon eklemenize olanak tanır; bu, CSS kullanarak eklerseniz karmaşık hale gelebilir.

SVGator ile vektörlerinizin konumu, dönüşü, ölçeği ve opaklığı ile oynayabilirsiniz. Bu, en kapsamlı ayar listesi değildir, ancak aracın kendisinin kullanımı oldukça kolaydır.

Ana Özellikler:

• Favori SVG dosyalarınızı içe aktarın ve canlandırın.
• Dosyalarınızın konumunu, dönüşünü, ölçeğini ve opaklığını dönüştürün.
• Animasyonlarınız üzerinde tam kontrol için ana kareleri kullanın.
• Animasyonları istediğiniz gibi karıştırın ve eşleştirin.

Fiyat: Ayda 18 dolardan başlayan planlarla yedi günlük ücretsiz deneme | Daha fazla bilgi

SVG Dosyalarınızı Canlandırmak için SVGator Nasıl Kullanılır

SVGator'ı kullanmaya başlamak basittir. Ana sayfada bulunan Giriş yap butonuna tıklamanız ve yeni bir hesap oluşturmanız yeterlidir. Platformun yedi günlük deneme sürümünü kullanmak için herhangi bir ödeme bilgisi girmenize gerek yoktur, böylece hizmeti taahhüt etmeden kapsamlı bir şekilde test edebilirsiniz.

Hesabınız hazır olduğunda, platform sizi tüm sihrin gerçekleştiği kontrol paneline yönlendirecektir. SVGator'u açar açmaz, platformun size neler yapabileceğini göstermek için kullandığı birkaç basit animasyonu içeren bir test görüntüsü göreceksiniz:

Bu test animasyonunu kontrol etmek için ekranın sol alt tarafındaki Oynat düğmesine tıklayın:

Ekranın üst kısmındaki SVG'yi İçe Aktar düğmesine tıklayarak SVG dosyalarını içe aktarabilirsiniz. Bunu yaptığınızda, SVGator öğelerini otomatik olarak algılayacak ve atanmış soldaki sekme:

Örneğin kronometre üç unsurdan oluşur. İç ve dış daireler ve üstte çıkıntılı düğme. Sol sekmedeki her bir bileşene tıklarsanız, ilgili bölümü vurgulanır.

Ekranın alt kısmında, SVG dosyanıza eklediğiniz tüm animasyonları gösteren bir zaman çizelgesi vardır. Zaman çizelgesindeki elmas simgeler ana kareleri temsil eder ve animasyonlarınızın zamanlamasını değiştirmek için bunları hareket ettirebilirsiniz:

Varsayılan olarak, SVGator zaman çizelgesinde yalnızca üç saniye gösterir, ancak ekranın sol tarafındaki zamanlayıcının yanındaki dişli simgesine tıklayarak bunu değiştirebilirsiniz:

Animasyonunuzun toplam çalışma süresini değiştirmenin yanı sıra, bir 'mouseover' seçeneğini de etkinleştirebilirsiniz; bu, imlecinizi üzerine getirene kadar animasyonunuzun tetiklenmeyeceği anlamına gelir.

Şimdi devam edin ve zaman çizelgesindeki ana karelerle oynayın, böylece elde edebileceğiniz zamanlama farklarını anlayabilirsiniz. Hazır olduğunuzda, zaman çizelgesinin solundaki seçicileri kullanarak ince ayar yapmak istediğiniz öğeye tıklayarak yeni animasyonlar ekleyebilirsiniz.

Bir öğeyi vurguladığınızda, Animatörler sekmesine bakın ve eklemek istediğiniz efekte tıklayın:

Örneğin, tüm SVG için Opaklık efektini seçersek, animasyon ilerledikçe onu karartabiliriz. Bunu yapmak için, Kronometre öğesinin altında %10'luk bir opaklık efekti ayarlayalım:

İlk ana kareyi iki saniye işaretine ayarladığımızı fark edeceksiniz. Ancak, zaman çizelgesinin başına %100 opaklıkta bir ana kare ekleyerek döngüyü kapatmazsak, SVG %10 opaklıkla başlayacaktır:

Her bir animasyona ekstra animasyon kareleri eklemek için, zaman çizelgesinin yanındaki her bir öğenin içindeki mavi elmasa tıklamanız yeterlidir. Opaklık gibi bazı animasyonlar yalnızca iki ana kare eklemenizi sağlarken, Konum gibi diğerleri daha fazlasını destekleyebilir.

Artık iki ana kareniz yerinde, bu nedenle zaman çizelgesi ilerledikçe kronometrenizin kaybolduğunu görmek için Oynat düğmesine tıklayın:

Özetlemek gerekirse, SVGator ile animasyon eklemek, her öğe için istediğiniz efektleri seçmek ve ilerlemelerini belirtmek için ana kareler eklemekten ibarettir. Benzersiz sonuçlar elde etmek için animasyonları karıştırabilir ve değerlerini ayarlayabilirsiniz, ancak süreç her zaman aynı kalır.

Animasyonlarınızdan memnun kaldığınızda, ekranın üst kısmındaki SVG'yi Dışa Aktar düğmesini kullanarak dosyalarınızı dışa aktarabilir ve kaydedebilirsiniz. Ardından, kurulumunuzdaki SVG dosya türü desteğini etkinleştirdikten sonra bunları WordPress'e yüklemeniz yeterlidir.

Çözüm

Animasyonları kullanarak web sitenize biraz yetenek katmak hoş bir dokunuş olabilir. SVG'lerle, ziyaretçilerinizin hangi hizmeti kullandığından bağımsız olarak grafiklerinizin ölçeklenmesini sağlayabilirsiniz. Bu şekilde, animasyonlarınız her zaman çarpıcı görünecek.

Ancak, bir SVG dosyasını canlandırmak, CSS kullanmanızı gerektirir. Bazı kodlarla uğraşmanın sakıncası yoksa bu sorun değil. Ancak, özellikle bir kodlama uzmanı değilseniz, istediğiniz efekti tam olarak elde etmek zor olabilir. SVGator gibi araçlarla, hangi animasyonların uygulanacağını seçebilir, bunları test edebilir ve ardından ortaya çıkan SVG dosyasını web sitenize ekleyebilirsiniz.

SVG dosyalarının nasıl canlandırılacağı hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde onlar hakkında konuşalım!

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