8 bedste gratis biblioteker til SVG

Alle moderne browsere understøtter SVG filetype og det bliver hurtigt et favoriseret valg blandt webdesignere.

Du kan designe smukke ikoner som SVG'er og skalere dem til enhver størrelse uden kvalitets tab. Dette er en af de største fordele ved SVG-formatet overvejer nethinden viser er på vej.

Hvis du vil animere eller manipulere dine SVG'er, vil det tage lidt mere arbejde. Men disse gratis biblioteker tilbyder de bedste værktøjer til jobbet, hvis du er villig til at rulle dine ærmer og få dine hænder snavset i nogle kode.

1. SVG.js

Det første bibliotek jeg skal anbefale er SVG.js . Det er naturligvis helt gratis og åbent til brug i enhver form for web-projekt.

Det er meget let, der kun udgør 16KB, når det er gzipped og ca. 62KB reduceret. Tildelt dette er temmelig stort som helhed, men i sammenligning med lignende biblioteker er det på den mindre side.

Installation er ret simpel med støtte til npm og en hel side dedikeret til komme i gang .

Hver side i dokumentationen har masser af JS og HTML-koder, så du kan se igennem og komme i gang. Plus du kan finde indlejrede demoer vært på JSFiddle for at se, hvordan dette bibliotek fungerer i aktion.

2. Snap.svg

Et andet populært SVG bibliotek er Snap.svg . Det er et JavaScript-bibliotek med nul afhængigheder og et temmelig stort support community kører gennem websteder som slack .

I øjeblikket er projektet i v0.5.1, så det har en lang vej at gå før en fuld v1.0 udgivelse.

Jeg vil stadig overveje dette klar til kommerciel brug, da det er blevet testet kraftigt for fejl i hver udgivelse og bygget til at arbejde på tværs af enhver type SVG. Dette omfatter eksporterede filer fra Illustrator, InkScape eller hardkodede SVG'er i din HTML.

Se på demoside til en smag af, hvad Snap kan gøre.

3. Bonsai.js

For et mere generelt grafikbibliotek anbefaler jeg stærkt Bonsai.js . Det har eksisteret i årevis, og det er et af de mere velholdte projekter med en kernegruppe af tilhængere.

Dette giver dig mulighed for at opbygge nogle temmelig seje ting med SVG'er og lærredelementet. Du kan designe små ikoner til destinationssider eller mere komplekse grafer som cirkeldiagrammer.

For ikke at nævne du får fuld kontrol over stier i SVG'er sammen med animations effekter ved hjælp af keyframes i Bonsai biblioteket.

Tag et kig på eksempler side for et par live demoer og besøg online docs at komme i gang med din første Bonsai grafik.

4. Paper.js

Paper.js kalder sig den schweiziske hær kniv af vektor grafik scripting. Og på mange måder er det ret på pengene.

Som standard fungerer Paper.js oven på HTML5 lærredelementer med sin egen DOM-model til at manipulere. Du kan redigere bezierkurver lige inde i koden, hvilket giver dig langt mere kontrol med lige grundlæggende scripting.

Kig på deres eksempler side hvis du er nysgerrig efter at se dette i aktion.

Jeg vil sige, at dette er mere af et lærred manipulation bibliotek end blot en brugerdefineret animation eller SVG bibliotek. Men det er helt sikkert magtfulde og et godt valg for alle at komme ind på SVG'er til internettet.

5. Raphaël

Her er et klassisk JS-bibliotek til grafikmanipulation og SVG-scripting. Raphaël er helt gratis under MIT-licensen og tilgængelig på GitHub til download.

Som ved denne skrivning er det i øjeblikket i v2.2.1 og har en temmelig stor base af bidragydere. Koden kører i almindelig JavaScript, men det kan omfatte TypeScript, hvis du foretrækker hurtigere kodning.

Hver grafik på siden får sin egen DOM sektion og kan manipuleres ligesom et DOM element. Brugerdefinerede funktioner i Raphaël gør dette til et godt bibliotek for begyndere, som bare lærer tovene HTML5 lærred .

Der er også ganske få skøre demoer hvis du graver gennem hovedstedet.

6. Two.js

Den åbne kilde Two.js script er en brugerdefineret 2D tegning API indbygget i JavaScript.

Dette er ikke beregnet til kun lærredselementer, selv om det virker bedst for disse typer af layout. Men du kan bruge Two.js til at manipulere nogle få almindelige formater på nettet: SVG, Canvas og WebGL.

Jeg vil sige Two.js har en stejlere læringskurve for en person, der ikke er fortrolig med JavaScript. Dette skyldes, at du kan gøre så meget med dette bibliotek, og funktionerne kan virke uendelige.

Men man kigger over eksemplet side og du får en ide om, hvor meget der er muligt.

7. Velocity.js

Teknisk Velocity.js bibliotek er et gratis animationsbibliotek, men det understøtter SVG'er, hvilket gør det til et fantastisk valg for alle UI / UX animationer.

Du kan også køre Velocity med jQuery eller alene ved hjælp af vanilla JS.

Hvis du kigger gennem hovedsiden, finder du alle opsætningsoplysninger, du har brug for sammen med dokumentation for hver type animation. De fleste af dem har endda demoer på CodePen så du kan se, hvordan de fungerer i browseren.

Hold dig til Velocity, hvis du søger at oprette praktiske animationer til en hjemmeside. Jeg anbefaler det specifikt til grundlæggende side UX bevægelse eller mere kompleks microinteractions .

8. Vivus.js

Med Vivus.js Du kan opbygge en meget specifik type animation: den trækede effekt.

Du kan se dette med SVG-billeder hele tiden. En SVG-sti kan animeres til visning ét punkt ad gangen, så det ser ud til, at hele grafikken bliver tegnet manuelt.

Dette er en rigtig pæn effekt, og med Vivus er det super nemt at installere. Tildelt dette forbedrer ikke brugeroplevelsen radikalt eller øger anvendeligheden, men det er et rigtig sjovt bibliotek at arbejde med.

Især hvis du er helt ny til SVG'er, og du vil have et let JS-bibliotek til at spille med til test.