8 bästa gratis biblioteken för SVG
Alla moderna webbläsare stöder SVG filtyp och det blir snabbt ett favoriserat val bland webbdesigners.
Du kan utforma vackra ikoner som SVGs och skala dem till alla storlekar utan kvalitetsförlust. Detta är en av de största fördelarna med SVG-formatet med tanke på näthinnan är på väg upp.
Om du vill animera eller manipulera dina SVGs som tar lite mer arbete. Men dessa gratisbibliotek erbjuder de bästa verktygen för jobbet om du är villig att rulla upp ärmarna och få dina händer smutsiga i någon kod.
1. SVG.js
Det första biblioteket jag måste rekommendera är SVG.js . Naturligtvis är detta helt gratis och öppet för användning i alla typer av webbprojekt.
Det är väldigt lättvikt på totalt 16KB när gzipped och ca 62KB minifieras. Beviljas detta är ganska stort som helhet, men jämfört med liknande bibliotek är det på mindre sida.
Installation är ganska enkel med stöd för npm och en hel sida dedikerad till komma igång .
Varje sida i dokumentationen har gott om JS och HTML-koder för att du ska kunna se igenom och komma igång. Dessutom kan du hitta inbäddade demos värd på JSFiddle för att se hur det här biblioteket fungerar i aktion.
2. Snap.svg
Ett annat populärt SVG-bibliotek är Snap.svg . Det är ett JavaScript-bibliotek med nollberoende och ett ganska stort supportgemenskap som körs via webbplatser som Slak .
För närvarande är projektet i v0.5.1 så det har långa sätt att gå innan en fullständig version av v1.0.
Jag skulle fortfarande överväga att detta är klart för kommersiellt bruk eftersom det har testats kraftigt för buggar i varje utgåva och byggd för att fungera över alla typer av SVG. Detta inkluderar exporterade filer från Illustrator, InkScape eller hårdkodade SVG i din HTML.
Ta en titt på demos sida för en smak av vad Snap kan göra.
3. Bonsai.js
För ett mer generellt grafikbibliotek rekommenderar jag starkt Bonsai.js . Det har funnits i många år och det är ett av de mer välskötta projekten med en kärngrupp av supportrar.
Detta låter dig bygga några ganska coola saker med SVGs och dukelementet. Du kan utforma små ikoner för målsidor eller mer komplexa grafer som cirkeldiagram.
För att inte tala om att du får full kontroll över vägar i SVGs tillsammans med animeringseffekter med hjälp av keyframes i Bonsai-biblioteket.
Ta en titt på exempel sida för några live demos och besök online docs att komma igång med din första Bonsai-grafik.
4. Paper.js
Paper.js kallar sig den schweiziska armén kniv av vektorgrafik skript. Och på många sätt är det rätt på pengarna.
Som standard fungerar Paper.js ovanpå HTML5 canvaselement med egen DOM-modell för att manipulera. Du kan redigera bezierkurvorna precis inuti koden, vilket ger dig mycket mer kontroll med jämna grundläggande skript.
Titta på deras exempel sida om du är nyfiken på att se detta i åtgärd.
Jag skulle säga att detta är mer av ett kanfas manipulations bibliotek än bara en anpassad animering eller SVG bibliotek. Men det är definitivt kraftfullt och ett bra val för alla att komma in i SVGs på webben.
5. Raphaël
Här är ett klassiskt JS-bibliotek för grafikmanipulation och SVG-skript. Raphaël är helt gratis under MIT-licensen och tillgänglig på GitHub för nedladdning.
Med detta skrivande är det för närvarande i v2.2.1 och har en ganska stor bas av bidragsgivare. Hela koden går i vanlig JavaScript men det kan innehålla TypeScript om du föredrar snabbare kodning.
Varje grafik på sidan får sin egen DOM-sektion och kan manipuleras precis som ett DOM-element. Anpassade funktioner i Raphaël gör detta till ett bra bibliotek för nybörjare, bara att lära sig HTML5-kanfas .
Det finns också en hel del galen demonstrationer om du gräver genom huvudsidan.
6. Two.js
Den öppna källan Two.js script är ett anpassat 2D-ritnings API som är inbyggt i JavaScript.
Detta är inte avsett för bara dukelement, även om det fungerar bäst för sådana typer av layouter. Men du kan använda Two.js för att manipulera några vanliga format på webben: SVG, Canvas och WebGL.
Jag skulle säga Two.js har en brantare inlärningskurva för någon som inte är super bekant med JavaScript. Detta beror på att du kan göra så mycket med det här biblioteket och funktionerna kan tyckas oändliga.
Men man tittar över exemplet sidan och du får en uppfattning om hur mycket som är möjligt.
7. Velocity.js
Tekniskt Velocity.js biblioteket är ett gratis animationsbibliotek, men det stöder SVGs vilket gör det till ett fantastiskt val för alla UI / UX-animationer.
Du kan också köra hastighet med jQuery eller på egen hand med vanilj JS.
Om du tittar på huvudsidan hittar du all installationsinformation du behöver tillsammans med dokumentation för varje typ av animering. De flesta av dem har även demos på CodePen så du kan se hur de fungerar i webbläsaren.
Håll dig till Velocity om du vill skapa praktiska animeringar för en webbplats. Jag rekommenderar det specifikt för grundläggande sida UX-rörelse eller mer komplex microinteractions .
8. Vivus.js
Med Vivus.js du kan bygga en mycket speciell typ av animering: den ritade kontureringseffekten.
Du ser det hela med SVG-bilder hela tiden. En SVG-sökväg kan animeras till en punkt i taget så det ser ut att hela grafiken är ritad för hand.
Det här är en väldigt snygg effekt och med Vivus är det väldigt enkelt att installera. Beviljas detta förbättrar inte användarupplevelsen radikalt eller ökar användbarheten, men det är ett riktigt roligt bibliotek att arbeta med.
Speciellt om du är helt ny hos SVGs och du vill ha ett enkelt JS-bibliotek att spela med för testning.
