8 beste gratis biblioteker for SVG
Alle moderne nettlesere støtter SVG filetype og det blir raskt et favorisert valg blant webdesignere.
Du kan designe vakre ikoner som SVGer og skalere dem til en hvilken som helst størrelse uten tap av kvalitet. Dette er en av de største fordelene ved SVG-formatet vurderer netthinnen vises er på vei oppover.
Hvis du vil animere eller manipulere SVG-ene dine, vil det ta litt mer arbeid. Men disse gratisbibliotekene tilbyr de beste verktøyene for jobben hvis du er villig til å rulle opp ermene og få hendene skitne i noen kode.
1. SVG.js
Det første biblioteket jeg må anbefale er SVG.js . Naturligvis er dette helt gratis og åpent hentet til bruk i alle typer webprosjekter.
Den er veldig lett, til sammen bare 16KB når gzipped og ca 62KB minifisert. Gitt dette er ganske stort som helhet, men i forhold til lignende biblioteker er det på den mindre siden.
Installasjonen er ganske enkel med støtte for npm og en hel side dedikert til starter .
Hver side i dokumentasjonen har masse JS og HTML-koder for å se gjennom og komme i gang. I tillegg kan du finne innebygde demoer vert på JSFiddle for å se hvordan dette biblioteket fungerer i aksjon.
2. Snap.svg
Et annet populært SVG bibliotek er Snap.svg . Det er et JavaScript-bibliotek med nullavhengigheter og et ganske stort støttemiljø som kjører gjennom nettsteder som Slack .
For tiden er prosjektet i v0.5.1, så det har en lang vei å gå før en full v1.0-utgivelse.
Jeg vil fortsatt vurdere dette klart for kommersiell bruk siden det har blitt testet tungt for feil i hver utgivelse og bygget for å fungere på tvers av alle typer SVG. Dette inkluderer eksporterte filer fra Illustrator, InkScape eller hardkodede SVGer i HTML.
Ta en titt på demoside for en smak av hva Snap kan gjøre.
3. Bonsai.js
For et mer generelt grafikkbibliotek anbefaler jeg på det sterkeste Bonsai.js . Det har eksistert i årevis, og det er en av de mer godt vedlikeholdte prosjektene med en kjernegruppe tilhengere.
Dette lar deg bygge noen ganske kule ting med SVGs og lerretelementet. Du kan designe små ikoner for destinasjonssider eller mer komplekse grafer som kakediagrammer.
For ikke å nevne at du får full kontroll over stier i SVGer sammen med animasjonseffekter ved hjelp av keyframes i Bonsai biblioteket.
Ta en titt på eksempler side for noen få live demoer og besøk online docs å komme i gang med din første Bonsai grafikk.
4. Paper.js
Paper.js kaller seg den sveitsiske hærkniven av vektorgrafikkskripting. Og på mange måter er dette rett på pengene.
Som standard fungerer Paper.js på toppen av HTML5 lerretelementer med egen DOM-modell for å manipulere. Du kan redigere bezierkurver rett inne i koden, noe som gir deg langt mer kontroll med jevn grunnleggende skripting.
Ta en titt på deres eksempler side hvis du er nysgjerrig på å se dette i aksjon.
Jeg vil si at dette er mer av et lerret manipulasjons bibliotek enn bare en tilpasset animasjon eller SVG bibliotek. Men det er definitivt kraftig og et godt valg for alle som kommer inn i SVGs på nettet.
5. Raphaël
Her er et klassisk JS-bibliotek for grafikkmanipulering og SVG-skripting. Raphaël er helt gratis under MIT-lisensen og tilgjengelig på GitHub for nedlasting.
Som ved denne skrivingen er det for øyeblikket i v2.2.1 og har en ganske stor base av bidragsytere. Alle koden går i vanlig JavaScript, men det kan inkludere TypeScript hvis du foretrekker raskere koding.
Hver grafikk på siden får sin egen DOM-seksjon og kan manipuleres akkurat som et DOM-element. Egendefinerte funksjoner i Raphaël gjør dette til et flott bibliotek for nybegynnere, bare lærer tauene av HTML5 lerret .
Det er også ganske mange galne demoer hvis du graver gjennom hovedstedet.
6. Two.js
Den åpne kilden Two.js Skriptet er en tilpasset 2D-tegning API som er innebygd i JavaScript.
Dette er ikke ment for bare lerretelementer, selv om det virker best for slike typer oppsett. Men du kan bruke Two.js til å manipulere noen få vanlige formater på nettet: SVG, Canvas og WebGL.
Jeg vil si Two.js har en brattere lærekurve for noen som ikke er super kjent med JavaScript. Dette er fordi du kan gjøre så mye med dette biblioteket og funksjonene kan virke uendelige.
Men man ser over eksemplar siden og du får en ide om hvor mye som er mulig.
7. Velocity.js
Teknisk Velocity.js biblioteket er et gratis animasjonsbibliotek, men det støtter SVGs som gjør det til et fantastisk valg for alle UI / UX animasjoner.
Du kan også kjøre Velocity med jQuery eller på egen hånd ved hjelp av vanilla JS.
Hvis du ser gjennom hovedsiden finner du all oppsettinformasjon du trenger sammen med dokumentasjon for hver type animasjon. De fleste av dem har til og med demoer på CodePen slik at du kan se hvordan de fungerer i nettleseren.
Hold deg til Velocity hvis du ønsker å lage praktiske animasjoner for et nettsted. Jeg anbefaler det spesielt for grunnleggende side UX-bevegelse eller mer kompleks microinteractions .
8. Vivus.js
Med Vivus.js du kan bygge en veldig spesifikk type animasjon: den trukket kontur effekten.
Du ser dette med SVG-bilder hele tiden. En SVG-bane kan animeres til visning ett punkt om gangen slik at det ser ut til at hele grafikken trekkes for hånd.
Dette er en veldig fin effekt, og med Vivus er det veldig enkelt å sette opp. Gitt dette forbedrer ikke brukeropplevelsen radikalt eller øker brukervennligheten, men det er et veldig morsomt bibliotek å jobbe med.
Spesielt hvis du er helt ny til SVGs, og du vil ha et enkelt JS-bibliotek for å leke med for testing.
