8 najlepszych darmowych bibliotek dla SVG
Wszystkie nowoczesne przeglądarki obsługują Plik SVG i szybko staje się ulubionym wyborem wśród projektantów stron internetowych.
Możesz zaprojektować piękne ikony jako SVG i skalować je do dowolnej wielkości bez utraty jakości. Jest to jedna z największych zalet formatu SVG wyświetlacze siatkówki rosną.
Jeśli chcesz animować lub manipulować swoimi SVG, zajmie to trochę więcej pracy. Ale te bezpłatne biblioteki oferują najlepsze narzędzia do pracy, jeśli chcesz zakasać rękawy i zabrudzić sobie ręce w jakiś kod.
1. SVG.js
Pierwsza biblioteka, którą muszę polecić, to SVG.js . Oczywiście jest to całkowicie bezpłatne i otwarte źródło do wykorzystania w każdym projekcie sieciowym.
Jest bardzo lekki i waży zaledwie 16 KB po spakowaniu gzipem i zminimalizowaniu około 62 KB. To prawda, że jest całkiem duża, ale w porównaniu z podobnymi bibliotekami jest po mniejszej stronie.
Instalacja jest dość prosta dzięki obsłudze npm i całej strony dedykowanej zaczynać .
Każda strona w dokumentacji ma wiele kodów JS i HTML, abyś mógł przejrzeć i zacząć. Dodatkowo możesz znaleźć osadzone dema hostowane na JSFiddle aby zobaczyć, jak działa ta biblioteka w akcji.
2. Snap.svg
Inną popularną biblioteką SVG jest Snap.svg . Jest to biblioteka JavaScript z zerowymi zależnościami i dość dużą społecznością wspierającą, działającą na takich stronach jak Luźny .
Obecnie projekt znajduje się w wersji 0.5.1, więc przed wydaniem pełnej wersji 1.0 jest dużo do zrobienia.
Nadal uważam, że jest to gotowy do użytku komercyjnego, ponieważ został przetestowany na błędy w każdym wydaniu i zbudowany do pracy z każdym typem SVG. Obejmuje to eksportowane pliki z programu Illustrator, InkScape lub zakodowanych SVG w kodzie HTML.
Spójrz na strona demo dla smaku tego, co potrafi Snap.
3. Bonsai.js
Dla bardziej ogólnej biblioteki graficznej bardzo polecam Bonsai.js . To już od lat i jest to jeden z lepiej utrzymanych projektów z rdzenną grupą zwolenników.
Dzięki temu możesz tworzyć całkiem fajne rzeczy dzięki SVG i elementowi canvas. Możesz zaprojektować małe ikony do stron docelowych lub bardziej złożone wykresy, takie jak wykresy kołowe.
Nie wspominając już o tym, że masz pełną kontrolę nad ścieżkami w SVG oraz efekty animacji za pomocą klatek kluczowych w bibliotece Bonsai.
Rzuć okiem na strona przykładów na kilka demonstracji na żywo i odwiedź dokumenty online zacząć od pierwszej grafiki Bonsai.
4. Paper.js
Paper.js nazywa się szwajcarski scyzoryk grafiki wektorowej. I pod wieloma względami jest to właściwe dla pieniędzy.
Domyślnie Paper.js działa na elementach canvas HTML5 z własnym modelem DOM do manipulowania. Krzywe Beziera można edytować bezpośrednio w kodzie, co zapewnia znacznie większą kontrolę nawet przy użyciu podstawowych skryptów.
Spójrz na ich strona przykładów jeśli chcesz zobaczyć to w akcji.
Powiedziałbym, że jest to bardziej biblioteka manipulacji na płótnie niż zwykła biblioteka animacji lub SVG. Jest to jednak zdecydowanie potężny i doskonały wybór dla każdego, kto dostanie się do SVG w Internecie.
5. Raphaël
Oto klasyczna biblioteka JS do manipulacji grafiką i skryptami SVG. Raphaël jest całkowicie bezpłatny na podstawie licencji MIT i jest dostępny na GitHub do pobrania.
W chwili pisania tego tekstu jest on obecnie w wersji 2.2.1 i ma dość dużą bazę użytkowników. Cały kod działa w prostym kodzie JavaScript, ale może to być TypeScript, jeśli wolisz szybsze kodowanie.
Każda grafika na stronie ma własną sekcję DOM i można nią manipulować tak jak element DOM. Niestandardowe funkcje w Raphaël sprawiają, że jest to świetna biblioteka dla początkujących, którzy dopiero uczą się lin Płaszczyzna HTML5 .
Jest też sporo szalonych dema jeśli przekopiesz się przez główną stronę.
6. Two.js
Otwarte źródło Two.js skrypt to niestandardowy API do rysowania 2D zbudowany w JavaScript.
Nie jest to przeznaczone tylko dla elementów canvas, chociaż najlepiej sprawdza się w tego typu układach. Ale możesz użyć narzędzia Two.js do manipulowania kilkoma popularnymi formatami w Internecie: SVG, Canvas i WebGL.
Powiedziałbym, że Two.js ma bardziej skomplikowaną krzywą uczenia się dla kogoś, kto nie jest super zaznajomiony z JavaScriptem. Dzieje się tak dlatego, że możesz zrobić tak wiele w tej bibliotece, a funkcje mogą wydawać się nieskończone.
Ale jedno spojrzenie strona przykładów a zobaczysz, ile jest to możliwe.
7. Velocity.js
Technicznie Velocity.js biblioteka jest darmową biblioteką animacji, jednak obsługuje SVG, co czyni ją fantastyczną opcją dla wszystkich animacji UI / UX.
Możesz również uruchomić Velocity z jQuery lub samodzielnie używając wanilowego JS.
Jeśli przejrzysz stronę główną, znajdziesz wszystkie potrzebne informacje o konfiguracji wraz z dokumentacją dla każdego rodzaju animacji. Większość z nich ma nawet dema na CodePen dzięki czemu możesz zobaczyć, jak działają w przeglądarce.
Trzymaj się prędkości, jeśli chcesz tworzyć praktyczne animacje na stronie internetowej. Szczególnie polecam dla podstawowego ruchu UX strony lub bardziej złożonego mikrointerakcje .
8. Vivus.js
Z Vivus.js możesz zbudować jeden bardzo specyficzny typ animacji: narysowany efekt konturu.
Widzisz to z obrazami SVG przez cały czas. Ścieżka SVG może być animowana, aby wyświetlić jeden punkt na raz, więc wygląda na to, że cała grafika jest rysowana ręcznie.
To naprawdę fajny efekt, a dzięki Vivus jest bardzo łatwy w konfiguracji. To prawda, że nie poprawia to znacząco komfortu użytkowania ani zwiększenia użyteczności, ale jest to naprawdę zabawna biblioteka do pracy.
Zwłaszcza jeśli jesteś nowicjuszem w SVG i chcesz mieć łatwą bibliotekę JS do przetestowania.
