8 parasta vapaata kirjastoa SVG: lle
Kaikki modernit selaimet tukevat SVG-tiedostotyyppi ja se on nopeasti tulossa suosittu valinta web-suunnittelijoiden.
Voit suunnitella kauniita kuvakkeita SVG: nä ja skaalaa ne mihin tahansa kokoon ilman laadun heikkenemistä. Tämä on yksi SVG-muodon suurimmista eduista verkkokalvonäytöt ovat nousussa.
Jos haluat animoida tai manipuloida SVG-tiedostojasi, joka vie vähän enemmän työtä. Mutta nämä ilmaiset kirjastot tarjoavat parhaan työkalun työhön, jos olet valmis rullattamaan hihat ja käsiäsi likaisiksi joissakin koodeissa.
1. SVG.js
Ensimmäinen kirjasto, jonka täytyy suositella, on SVG.js . Luonnollisesti tämä on täysin ilmainen ja avoin lähde käytettäväksi kaikenlaisissa web-projekteissa.
Se on erittäin kevyt, yhteensä vain 16 kilotavua gzipped ja noin 62KB minified. Hyväksytty tämä on melko suuri koko, mutta verrattuna samankaltaisiin kirjastoihin se on pienemmällä puolella.
Asennus on melko yksinkertainen, sillä tuki on npm ja koko sivulle omistettu päästä alkuun .
Jokaisella asiakirjojen sivulla on paljon JS- ja HTML-koodeja, joiden avulla voit katsoa ja aloittaa. Lisäksi voit löytää upotettuja demoja isännöi JSFiddle nähdä, miten tämä kirjasto toimii toiminnassa.
2. Snap.svg
Toinen suosittu SVG-kirjasto on Snap.svg . Se on JavaScript-kirjasto, jossa on nolla riippuvuudet ja melko suuri tukiyhteisö, joka käy verkkosivuilla löysä .
Tällä hetkellä projekti on v0.5.1, joten se on pitkä keino mennä ennen koko v1.0-versiota.
Haluaisin edelleen harkita tätä kaupalliseen käyttöön, koska se on testattu voimakkaasti jokaisen julkaisun vikojen suhteen ja rakennettu toimimaan minkä tahansa SVG: n kautta. Tämä sisältää vietyjä tiedostoja Illustrator-, InkScape- tai HTML-koodattuja SVG-tiedostoja.
Katsokaa demos-sivu mitä Snap voi tehdä.
3. Bonsai.js
Yleisemmälle grafiikkakirjastolle suosittelen Bonsai.js . Se on ollut jo vuosikausia ja se on yksi hyvin hoidetuista hankkeista, joissa on ydinryhmä kannattajia.
Näin voit rakentaa melko hienoja juttuja SVG: itä ja kangaselementillä. Voit suunnitella pieniä kuvakkeita aloitussivuille tai monimutkaisempia kaavioita, kuten ympyräkaaviot.
Puhumattakaan täysin SVG: iden reiteistä ja animaatioefekteistä Bonsai-kirjaston avainkehyksillä.
Ota kurkistus esimerkkisivu muutaman live demo ja vierailla online-asiakirjat Aloita Bonsai-grafiikkasi ensimmäinen.
4. Paper.js
Paper.js kutsuu itseään Sveitsin armeijan veitsellä vektorigrafiikan skriptejä. Ja monella tavalla tämä on aivan rahaa.
Oletusarvona Paper.js toimii HTML5-kenno-elementtien päälle, jolla on oma DOM-malli manipuloida. Voit muokata bezier-käyrät oikealla koodilla, joka antaa sinulle paljon enemmän hallintaa edes peruskomentojen avulla.
Katsokaa heidän esimerkkisivu jos olet utelias näkemään tämän toiminnassa.
Sanon, että tämä on enemmän kankaiden manipulointi kirjasto kuin vain mukautettu animaatio tai SVG kirjasto. Mutta se on ehdottomasti tehokas ja erinomainen valinta kaikille, jotka tulevat SVG-verkkoon.
5. Raphaël
Tässä on klassinen JS-kirjasto grafiikan manipulointiin ja SVG-skripteihin. Raphaël on täysin ilmainen MIT-lisenssin alla ja saatavilla GitHubissa ladattavaksi.
Tämän kirjoittamisen jälkeen se on tällä hetkellä v2.2.1: ssä ja sillä on melko suuri tukiaseman perusta. Kaikki koodi suoritetaan pelkkää JavaScript-koodia, mutta siihen voi sisältyä TypeScript, jos haluat nopeamman koodauksen.
Sivun jokaisella grafiikalla on oma DOM-osa ja sitä voidaan käsitellä aivan kuten DOM-elementti. Raphaeltin räätälöityjä toimintoja tekevät tästä erinomaisen kirjaston aloittelijoille, jotka oppivat vain köydet HTML5-kangas .
Myös muutama hullu demoja jos kaivaa pääsivun kautta.
6. Kaksi.js
Avoin lähdekoodi Two.js skripti on mukautettu 2D-piirustus API, joka on rakennettu JavaScript.
Tämä ei ole tarkoitettu vain kankaaseen, vaikka se toimii parhaiten tällaisten asettelujen tyyppien kanssa. Voit kuitenkin käyttää Two.js-ohjelmaa muutamaan yhteiseen muotoon verkossa: SVG, Canvas ja WebGL.
Sanoisin, että Two.js: lla on jyrkkä oppimiskäyrä jollekin, joka ei ole erittäin perehtynyt JavaScript-kenttään. Tämä johtuu siitä, että voit tehdä niin paljon tämän kirjaston kanssa ja ominaisuudet voivat tuntua loputtomalta.
Mutta yksi katse esimerkkisivu ja saat käsityksen siitä, kuinka paljon on mahdollista.
7. Velocity.js
Teknisesti Velocity.js kirjasto on ilmainen animaatiokirjasto, mutta se tukee SVG-tiedostoja, joten se on fantastinen valinta kaikille UI / UX-animaatioille.
Voit myös ajaa Velocityn jQueryn kanssa tai itse käyttämällä vanilja JS: tä.
Jos katsot pääsivulta, löydät kaikki tarvitsemasi asetustiedot sekä kunkin animaatiotyypin dokumentaatiot. Suurin osa heistä on jopa demoja koodilla joten näet kuinka ne toimivat selaimessa.
Stick to Velocity, jos haluat luoda käytännön animaatioita verkkosivustolle. Suosittelen erityisesti perustason UX-liikkeitä tai monimutkaisempaa microinteractions .
8. Vivus.js
Kanssa Vivus.js voit rakentaa hyvin erityisiä animaatiotyyppejä: piirretty vaikutus.
Näet tämän SVG-kuvina koko ajan. SVG-polku voidaan animoitua yhdestä pisteestä kerrallaan, joten näyttää siltä, että koko graafia piirretään käsin.
Tämä on todella siisti vaikutus ja Vivusin kanssa se on erittäin helppo asentaa. Hyväksytty tämä ei paranna radikaalisti käyttökokemusta tai lisää käyttökelpoisuutta, mutta se on todella hauska kirjasto.
Varsinkin jos olet uusi SVG-tiedostoja ja haluat helppokäyttöisen JS-kirjaston pelata testejä varten.
