SVG için 8 En İyi Ücretsiz Kütüphane
Tüm modern tarayıcılar SVG filetype ve web tasarımcıları arasında hızla tercih edilen bir seçim haline geliyor.
SVG'ler olarak güzel ikonlar tasarlayabilir ve kalite kaybı olmadan herhangi bir boyuta ölçeklendirebilirsiniz. Bu, dikkate alınarak SVG formatının en büyük faydalarından biridir. retina görüntüler yükselişte.
SVG'lerinizi biraz daha fazla iş yapacak olan animasyonları canlandırmak veya değiştirmek istiyorsanız. Ancak bu ücretsiz kütüphaneler, kollarınızı açmak ve bazı kodlarda ellerinizi kirletmek istiyorsanız, iş için en iyi araçları sunar.
1. SVG.js
Tavsiye etmem gereken ilk kütüphane SVG.js . Doğal olarak bu, herhangi bir web projesinde kullanılmak üzere tamamen ücretsiz ve açık kaynaklıdır.
Gzipli ve yaklaşık 62 KB küçültülmüş olduğunda sadece 16KB'nin toplamı çok hafif. Bu bir bütün olarak oldukça büyük, ancak benzer kütüphaneler ile karşılaştırıldığında daha küçük tarafındadır.
Npm desteği ve adanmış bir sayfa desteği ile kurulum oldukça basittir başlamak .
Belgelerindeki her sayfa, bakmak ve işe başlamak için bol miktarda JS ve HTML koduna sahiptir. Artı gömülü demoları bulabilirsiniz JSFiddle'da barındırılıyor Bu kütüphanenin nasıl çalıştığını görmek için.
2. Snap.svg
Bir başka popüler SVG kütüphanesi Snap.svg . Sıfır bağımlılıkları olan bir JavaScript kütüphanesi ve benzeri web siteleri üzerinden çalışan oldukça büyük bir destek topluluğu. Gevşek .
Şu anda proje v0.5.1'de olduğundan, tam bir v1.0 sürümünden önce çıkmanın uzun bir yolu var.
Yine de, her sürümdeki hatalar için test edildiği ve herhangi bir SVG türünde çalışacak şekilde oluşturulduğundan, bu ürünü ticari kullanıma hazır olarak düşünebilirim. Bu, dışa aktarılan dosyaları HTML'nizdeki Illustrator, InkScape veya sabit kodlanmış SVG'lerden içerir.
Bir göz atın demolar sayfası Snap'in yapabildiği bir tat için.
3. Bonsai.js
Daha genel bir grafik kütüphanesi için tavsiye ederim Bonsai.js . Yıllar boyunca etraftaydı ve çekirdek bir destek grubuyla daha iyi bakılan projelerden biri.
Bu, SVG'ler ve tuval öğesi ile oldukça güzel şeyler oluşturmanıza olanak tanır. Açılış sayfaları veya pasta grafikler gibi daha karmaşık grafikler için küçük simgeler tasarlayabilirsiniz.
Bonsai kitaplığındaki ana kareleri kullanarak animasyon efektleri ile birlikte SVG'lerdeki yollar üzerinde tam denetim sahibi olmanıza gerek yok.
Bir göz atın örnekler sayfası birkaç canlı demo için çevrimiçi dokümanlar İlk Bonsai grafiklerinizi kullanmaya başlamak için.
4. Paper.js
Paper.js kendini vektör grafikleri komut dosyası İsviçre Çakısı çağırır. Ve birçok yönden bu para üzerinde haklı.
Varsayılan olarak Paper.js, işlemek için kendi DOM modeliyle HTML5 tuval öğelerinin üstünde çalışır. Bezier eğrilerini doğrudan kod içinde düzenleyebilir ve bu da size temel komut dosyaları ile bile çok daha fazla kontrol imkanı verir.
Onların bir göz atın örnekler sayfası Bunu eylemde görmek için merak ediyorsanız.
Bunun sadece bir animasyon veya SVG kütüphanesinden ziyade bir tuval manipülasyon kütüphanesi olduğunu söyleyebilirim. Ancak, web için SVG'lere giren herkes için kesinlikle güçlü ve mükemmel bir seçim.
5. Raphaël
İşte grafik manipülasyon ve SVG komut dosyası için klasik bir JS kütüphanesi. Raphael MIT Lisansı altında tamamen ücretsiz ve mevcut GitHub'da indirmek için.
Bu yazıdan şu an v2.2.1'de ve oldukça geniş katılımcılar tabanı var. Tüm kodlar basit bir JavaScript ile çalışır, ancak daha hızlı kodlamayı tercih ederseniz, TypeScript'i içerebilir.
Sayfadaki her grafik kendi DOM bölümünü alır ve bir DOM öğesi gibi manipüle edilebilir. Raphaël'deki özel işlevler, yeni başlayanlar için sadece ipleri öğrenmek için harika bir kütüphane yapar HTML5 tuval .
Ayrıca bir kaç çılgınlık var. demolar Ana siteyi kazıyorsanız.
6. Two.js
Açık kaynak Two.js script, JavaScript’te yerleşik bir özel 2D çizim API'sidir.
Bu, sadece bu tür yerleşim düzenleri için en iyi şekilde çalışsa da, sadece tuval öğeleri için geçerli değildir. Ancak, web üzerinde birkaç yaygın biçimi değiştirmek için Two.js'yi kullanabilirsiniz: SVG, Canvas ve WebGL.
Two.js'nin, JavaScript'i iyi bilmeyen biri için daha dik bir öğrenme eğrisi olduğunu söyleyebilirim. Çünkü bu kütüphaneyle çok şey yapabilirsiniz ve özellikler sonsuz gibi görünebilir.
Ama bir tane bak örnekler sayfası ve ne kadar mümkün olduğuna dair bir fikir edinirsiniz.
7. Velocity.js
Teknik olarak Velocity.js kütüphane ücretsiz bir animasyon kütüphanesidir, ancak SVG'leri tüm UI / UX animasyonu için harika bir seçim haline getirmektedir.
Velocity'yi jQuery ile veya vanilla JS'yi kullanarak kendi başınıza çalıştırabilirsiniz.
Ana sayfaya bakarsanız, ihtiyacınız olan tüm kurulum bilgilerini, her bir animasyon türü için dokümantasyonla birlikte bulacaksınız. Onların çoğunun demoları bile var CodePen'de böylece tarayıcıda nasıl çalıştıklarını görebilirsiniz.
Bir web sitesi için pratik animasyonlar oluşturmak istiyorsanız Hızına sabitleyin. Temel sayfa UX hareket veya daha karmaşık için özellikle tavsiye ederim mikro etkileşimler .
8. Vivus.js
İle Vivus.js Çok özel bir animasyon türü oluşturabilirsiniz: çizilmiş anahat efekti.
Bunu her zaman SVG görüntüleri ile görüyorsunuz. Bir SVG yolu her seferinde bir noktaya görüntülenmek üzere canlandırılabilir, böylece tüm grafik elle çizilir gibi görünür.
Bu gerçekten temiz bir etki ve Vivus ile kurulumu çok kolay. Bu, kullanıcı deneyimini radikal bir şekilde geliştirmez veya kullanılabilirliği artırmaz, ancak çalışmak için gerçekten eğlenceli bir kütüphanedir.
Özellikle SVG'lerde yepyeni iseniz ve test için oynamak için kolay bir JS kütüphanesi istiyorsanız.
