8 migliori librerie gratuite per SVG
Tutti i browser moderni supportano il Tipo file SVG e sta rapidamente diventando una scelta preferita tra i web designer.
Puoi disegnare bellissime icone come SVG e ridimensionarle in qualsiasi dimensione senza perdita di qualità. Questo è uno dei maggiori vantaggi del formato SVG considerando display retina sono in aumento.
Se desideri animare o manipolare i tuoi SVG, ci vorrà un po 'più di lavoro. Ma queste librerie gratuite offrono gli strumenti migliori per il lavoro se sei disposto a rimboccarti le maniche e sporcarti le mani in qualche codice.
1. SVG.js
La prima libreria che devo raccomandare è svg.js . Naturalmente questo è totalmente gratuito e open source per l'utilizzo in qualsiasi tipo di progetto web.
È molto leggero per un totale di soli 16 KB quando è compresso con gzip e circa 62 KB minimo. Certo, questo è abbastanza grande nel suo complesso, ma rispetto alle librerie simili è più piccolo.
L'installazione è piuttosto semplice con supporto per npm e un'intera pagina dedicata a iniziare .
Ogni pagina nella documentazione ha un sacco di codici JS e HTML da esaminare e iniziare. Inoltre puoi trovare demo incorporate ospitato su JSFiddle per vedere come funziona questa libreria in azione.
2. Snap.svg
Un'altra popolare libreria SVG è Snap.svg . È una libreria JavaScript con zero dipendenze e una comunità di supporto abbastanza ampia che gestisce siti come allentato .
Attualmente il progetto è in v0.5.1 quindi ci sono molti modi per andare prima di una versione v1.0 completa.
Lo considererei comunque pronto per l'uso commerciale poiché è stato testato pesantemente per i bug in ogni versione e costruito per funzionare su qualsiasi tipo di SVG. Ciò include i file esportati da Illustrator, InkScape o SVG codificati nel codice HTML.
Dai un'occhiata al pagina demo per un assaggio di ciò che Snap può fare.
3. Bonsai.js
Per una libreria grafica più generale consiglio vivamente Bonsai.js . È in circolazione da anni ed è uno dei progetti più ben mantenuti con un gruppo di sostenitori.
Questo ti permette di creare cose interessanti con SVG e l'elemento canvas. Puoi disegnare piccole icone per pagine di destinazione o grafici più complessi come i grafici a torta.
Per non parlare del pieno controllo sui percorsi in SVG e degli effetti di animazione con i fotogrammi chiave nella libreria Bonsai.
Dai un'occhiata al pagina degli esempi per alcune dimostrazioni dal vivo e visita il documenti online per iniziare con la tua prima grafica Bonsai.
4. Paper.js
Paper.js si autodefinisce il coltellino svizzero di scripting di grafica vettoriale. E in molti modi questo è giusto per i soldi.
Per impostazione predefinita, Paper.js funziona su elementi HTML5 canvas con il proprio modello DOM da manipolare. Puoi modificare le curve di Bezier direttamente all'interno del codice che ti dà un controllo molto maggiore anche con gli script di base.
Dai un'occhiata a loro pagina degli esempi se sei curioso di vederlo in azione.
Direi che si tratta più di una libreria di manipolazione su tela che solo un'animazione personalizzata o una libreria SVG. Ma è decisamente potente e rappresenta un'ottima scelta per chiunque si iscriva agli SVG per il web.
5. Raphaël
Ecco una classica libreria JS per la manipolazione grafica e lo scripting SVG. Raphaël è totalmente gratuito sotto la licenza MIT e disponibile su GitHub per il download.
Al momento della stesura è attualmente in v2.2.1 e ha una base piuttosto ampia di contributori. Tutto il codice viene eseguito in plain JavaScript ma può includere TypeScript se si preferisce la codifica più veloce.
Ogni immagine della pagina ottiene la propria sezione DOM e può essere manipolata come un elemento DOM. Le funzioni personalizzate in Raphaël rendono questa una grande libreria per principianti solo imparando le corde di Tela HTML5 .
C'è anche un bel pazzo demo se si scavare attraverso il sito principale.
6. Two.js
L'open source Two.js script è un'API di disegno 2D personalizzata costruita in JavaScript.
Questo non è pensato solo per gli elementi canvas, anche se funziona meglio per quei tipi di layout. Ma puoi utilizzare Two.js per manipolare alcuni formati comuni sul Web: SVG, Canvas e WebGL.
Direi che Two.js ha una curva di apprendimento più ripida per qualcuno che non conosce molto bene JavaScript. Questo perché puoi fare così tanto con questa libreria e le funzionalità possono sembrare infinite.
Ma uno guarda oltre la pagina degli esempi e avrai un'idea di quanto è possibile.
7. Velocity.js
Tecnicamente il Velocity.js library è una libreria di animazione gratuita, tuttavia supporta gli SVG rendendola una scelta fantastica per tutte le animazioni UI / UX.
Puoi anche eseguire Velocity con jQuery o da solo usando vanilla JS.
Se guardi nella pagina principale troverai tutte le informazioni di configurazione necessarie insieme alla documentazione per ogni tipo di animazione. Molti di loro hanno anche demo su CodePen così puoi vedere come funzionano nel browser.
Stick to Velocity se stai cercando di creare animazioni pratiche per un sito web. Lo raccomando specificamente per il movimento UX di pagina di base o più complesso microinteractions .
8. Vivus.js
Con Vivus.js puoi creare un tipo di animazione molto specifico: l'effetto contorno disegnato.
Lo vedi sempre con le immagini SVG. Un percorso SVG può essere animato in vista un punto alla volta, quindi sembra che l'intero disegno sia disegnato a mano.
Questo è un effetto davvero accurato e con Vivus è semplicissimo da configurare. Certo, questo non migliora radicalmente l'esperienza dell'utente o aumenta l'usabilità, ma è una libreria davvero divertente con cui lavorare.
Soprattutto se sei nuovo di zecca per SVG e vuoi una semplice libreria JS con cui giocare per i test.
