20 Användbara SVG-verktyg för bättre grafik
SVG ökar popularitet i webbdesign idag och du kan använda verktyg som Illustrator eller Inkscape för att skapa SVG-grafik. Men när det gäller webdesign, bör vi alltid optimera för ljusare resultat.
Här 20 verktyg som du kan använda för att arbeta med SVG snabbt och effektivt. Vi har mestadels onlineverktyg, som kan hjälpa till med optimering, konvertering, mönster och mer.
Interaktivt SVG-koordinatsystem
När du arbetar med SVG kan du inte lämna sin koordinat. Detta är ett bra interaktivt verktyg av Sara Souiden, som hjälper dig Lär dig hur SVG-koordinater fungerar. Använda viewBox och preserveAspectRatio På SVG, styrd av orange och lila linjer och en praktisk linjal, kan du spela medan du lär dig hur SVG-koordinater fungerar.
B64
B64 är ett enkelt verktyg till optimera bilder och ändra dem till bas64-formatet. Du kan släppa dina SVG-bilder (andra format som JPG och PNG fungerar också) och ta sedan CSS med base64 bakgrundsbild som resultat.
SVGO
SVG som exporteras kan innehålla onödig information som kan avlägsnas utan att det påverkar återgivningsresultatet. Om du vill ta bort redigeringsmetadata, kommentarer eller dolda element, du kan använda SVGO.
Du kan ange SVGO via npm, $ [sudo] npm installera -g svgo eller använd GUI-versionen som erbjuder dra och släpp för att få tillgång till din SVG-optimering.
SVG OMG
SVG OMG vrider kommandoraden för SVGO (föregående verktyg) till a GUI-versionen det mer intuitivt och lätt att använda. Bara vrid knapparna för att aktivera eller avaktivera varje funktion. I slutändan kan du få tag i resultatet som bildfiler och kod också.
SVG nu
När du arbetar på Illustrator innehåller den exporterade SVG någon information som inte är nödvändig. Med det här verktyget kommer du få den optimerade versionen av din exporterade SVG direkt från din Illustrator-arbetsyta. Detta verktyg lägger till en panel med några alternativ för att optimera SVG. Du kan få SVG nu från sidan Creative Cloud Add-ons.
SVG till PNG-omvandlare
Vill exportera SVG-filer till PNG-formulär? Utan att öppna applikationer som Illustrator för att göra det? Använd det här SVG till PNG Converter-verktyget för att få bildutgångar i PNG-format och även PNG Base64-data URI om du behöver det.
SVG Circus
Om du tycker att loader animationer är coola, nu kan du enkelt skapa det genom att använda SVG med SVG Circus. Verktygen gör att du kan gör din egen lastare, spinner eller något liknande med looped animation. Ställ in 'Skådespelare', position, storlek, färg och andra från panelen och exportera sedan för att få resultaten.
SVG Sprite
SVG Sprite är en Node.js-modul som optimerar en massa SVG-filer, och bakar dem in i SVG sprite-typer inklusive traditionella CSS sprites för bakgrunds- och / eller förgrundsbilder, SVG-stackar och mer.
Kvasi
Med kvasi kan du generera Quasicrystal bilder som vad du ser nedan. Denna generator är experimentell, men resultaten är definitivt coola. Du kan spela runt genom att ändra alternativvärdet och ladda ner resultaten med "Spara SVG" -knappen.
Vanligt mönster
Skapa mönster med SVG har aldrig varit enklare eller roligare. Ladda upp din bild, skala ner eller ändra mellanslag, rotera och lita på tills du får ett vackert mönster. Du kan förhandsgranska resultatet innan du hämtar det.
Trianglify Generator
Skapa vackra SVG geometriska mönster med Trianglify Generator. Du kan ställa in färgslumpen / varianten, granularitetsstorleken och välja en färgpalett att arbeta med. Detta verktyg är en GUI-version av Trianglify.
SVG Gradient
Du vet att du kan göra gradienter med CSS men visste du att du kan göra detsamma med SVG? Det enklaste sättet att generera gradient på SVG är med hjälp av det här verktyget. Ange bara start och stoppa färg så får du koden för det genererade resultatet. En fallback på CSS ingår också.
Exportera PSD till SVG
Om du använder Photoshop som bildredigerare för ditt arbete, kanske du kanske behöver konvertera din design på Photoshop-arbetsytan till SVG, vilket är ett format som inte stöds i Photoshop. Hämta skriptet till det här verktyget och kopiera sedan till Adobe Photoshop / förinställningar / skript mapp.
Byt namn på ett vektorskiktnamn med SVG-förlängningen (t ex skikt1 blir layer1.svg), och du kan nu köra skriptet från Arkiv> Skript> PS till SVG.
SVG-filter
Vet du att med SVG kan du lägga till effekter som med nyans, mättnad, oskärpa, linjär färgöverlagring och många andra till bilder? Här är ett verktyg som visualiserar dessa effekter och ger dig ett utdrag för att göra det enkelt bädda in effekten in i ditt projekt.
SVG Morpheous
SVG Morpheous är ett JavaScript-bibliotek som tillåter dig att morph en SVG ikon från en form till en annan. Du kan ställa in lättnadseffekten, varaktigheten för övergångsanimationer och även rotationsriktningen.
Clip path generator
SVG låter dig klicka på bildklippet med Form. Det här är ganska enkelt om formen är i form av en kvadrat eller en cirkel. Men vad om formen är en med många punkter eller en polygonal form? Det är där du behöver detta Clip Path Generator-verktyg.
Chartist.js
Chartist.js är ett bibliotek till skapa mycket anpassningsbara responsiva diagram. Den använder SVG för att visa diagrammen, som också kan animeras med SMIL. Med det här biblioteket kan du skapa linjediagram, cirkeldiagram, stapeldiagram och andra typer av diagram och till och med lägga till animering till dem.
SVG stroke dash generator
Detta är ett enkelt verktyg till generera streckade linjer utnyttja SVG stroke-dasharray. Välj först en strecktyp från listan och anpassa sedan den i fråga om bredd, höjd, rotation eller färg. Efteråt kan du ta tag i HTML-koden och CSS för att tillämpa denna strecklinje i ditt projekt.
Metodritning: En enkel SVG-editor
Metod Draw är en webbaserad SVG-editor, med en intuitivt gränssnitt som levereras med verktyg på båda sidor av duken. Du kan rita linjer, former, inmatningstexter eller använda inbyggda former och sedan redigera egenskaperna hos de ritade objekten. Exportera bilden i SVG-format (finns också i SVG-basformat) eller spara direkt i PNG.
Exportera Flash till animerad SVG
Även om det inte är mycket populärt längre, finns det en chans att några av er har svårt att släppa ut Flash. Om så är fallet kan du vänd din flashanimering till SVG så att den fungerar kompatibel med nyare tekniker. Detta verktyg utgör en förlängning till Flash-applikationen, och kan fungera på CS5, CS6 och CC.
Du kan exportera till SVG när det gäller Former, Bitmaps-symboler, Classic Motion Tweens, Shape Tweens (för andra finns det möjlig framgång).
