20 Naudingi SVG įrankiai geresniam grafikai
SVG šiais laikais populiarėja žiniatinklio dizaine, o SVG grafikai sukurti galite naudoti tokius įrankius kaip „Illustrator“ arba „Inkscape“. Bet kai kalbama apie interneto dizainą, mes visada turėtume optimizuoti, kad būtų lengviau pasiekti rezultatus.
Čia 20 įrankių, kuriuos galite naudoti norint greitai ir efektyviai dirbti su SVG. Mes turime daugiausia internetinių įrankių, kurie gali padėti optimizuoti, konvertuoti, kurti modelius ir dar daugiau.
Interaktyvi SVG koordinačių sistema
Dirbdami su SVG negalite palikti jos koordinatės. Tai puiki Sara Souiden interaktyvi priemonė jums padėti sužinokite, kaip SVG koordinuoja darbą. Naudojant „ViewBox“ ir preserveAspectRatio SVG, vadovaujantis oranžinėmis ir violetinėmis linijomis ir patogiu valdikliu, galite žaisti mokantis, kaip veikia SVG koordinatės.
b64
b64 yra paprastas įrankis optimizuokite vaizdus, tada paverskite juos „base64“ formatu. Jūs galite atsisakyti savo SVG vaizdų (taip pat ir kitų formatų, pvz., JPG ir PNG), tada patraukite CSS su base64 background-image kaip rezultatą.
SVGO
Eksportuojamas SVG gali būti nereikalinga informacija kurios gali būti pašalintos nedarant įtakos atvaizdavimo rezultatui. Jeigu nori pašalinti redaktoriaus metaduomenis, komentarus ar paslėptus elementus, galite naudoti SVGO.
Galite įjungti SVGO per npm, $ [sudo] npm įdiegti -g svgo arba naudokite GUI versiją, kuri siūlo „SVG“ optimizavimą.
SVG OMG
SVG OMG paverčia komandų eilutę SVGO (ankstesnis įrankis) į a GUI versija kad jis būtų intuityvesnis ir paprastesnis. Tiesiog perjungti mygtukus įjungti arba išjungti kiekvieną funkciją. Galų gale galite patraukti rezultatą kaip vaizdo failus ir kodą.
SVG dabar
Kai dirbate su „Illustrator“, eksportuojama SVG turi tam tikrą informaciją, kuri nėra būtina. Su šiuo įrankiu gauti optimizuotą eksportuotos SVG versiją tiesiai iš Illustrator darbo vietos. Šis įrankis prideda skydelį su kai kuriomis galimybėmis optimizuoti SVG. SVG dabar galite gauti iš „Creative Cloud“ priedų puslapio.
SVG į PNG konverterį
Norėti eksportuoti SVG failus į PNG formą? Neatidarydami tokių programų kaip „Illustrator“? Naudokite šį SVG į PNG konverterio įrankį, kad gautumėte vaizdo išvestį PNG formatu ir PNG Base64 duomenų URI, jei to reikia.
SVG cirkas
Jei manote, kad krautuvo animacijos yra kietos, dabar galite ją lengvai sukurti naudodami SVG SVG cirkas. Įrankiai leidžia jums sukurkite savo krautuvą, verpiklį, ar panašų įprotį, naudodami kilpinę animaciją. Iš skydelio nustatykite „Aktorių“, padėtį, dydį, spalvą ir kitus, tada eksportuokite, kad gautumėte rezultatus.
SVG Sprite
SVG Sprite yra „Node.js“ modulis, optimizuojantis SVG failų krūva, ir kepina juos į SVG sprite tipus įskaitant tradicinius CSS sprites, skirtus fono ir (arba) pirmtakų atvaizdams, SVG kaminai ir kt.
Kvazi
Su kvazi galite sukurti „Quasicrystal“ vaizdus patinka tai, ką matote žemiau. Šis generatorius yra eksperimentinis, tačiau rezultatai tikrai kieti. Galite žaisti, pakeisdami parinkčių vertę, tada parsisiųskite rezultatus naudodami mygtuką „Išsaugoti SVG“.
Paprastas raštas
Modelių su SVG kūrimas niekada nebuvo lengviau ar smagu. Įkelkite savo vaizdą, sumažinkite jo dydį arba pakeiskite tarpą, pasukite ir perkelkite spalvą, kol gausite gražų modelį. Galite peržiūrėti rezultatą prieš jį atsisiųsdami.
Trianglify generatorius
Sukurkite gražius SVG geometrinius raštus su Trianglify generatorius. Galite nustatyti spalvų atsitiktinumą / variantą, raiškumo dydį ir pasirinkti spalvų paletę. Šis įrankis yra „Trianglify“ GUI versija.
SVG gradientas
Jūs žinote, kad galite atlikti gradientus su CSS, bet ar žinojote, kad galite tai padaryti su SVG? Lengviausias būdas generuoti SVG gradientą yra naudojant šį įrankį. Tiesiog įveskite pradžios ir sustabdymo spalvą, tada gausite gauto rezultato kodą. Taip pat įtrauktas „CSS“ rezervas.
Eksportuoti PSD į SVG
Jei naudojate „Photoshop“ kaip vaizdo redaktorių savo darbui, kartais jums gali prireikti konvertuokite savo dizainą „Photoshop“ darbo vietoje į SVG, kuris yra nepalaikomas „Photoshop“ formatas. Atsisiųskite šį scenarijų į šį įrankį, tada nukopijuokite į Adobe Photoshop / išankstiniai nustatymai / scenarijai aplanką.
Pervardykite vektoriaus sluoksnio pavadinimą SVG plėtiniu (pvz., Sluoksniu1 tampa layer1.svg) ir dabar galite paleisti scenarijų iš Failas> Skriptai> PS į SVG.
SVG filtrai
Ar žinote, kad su SVG galite pridėti efektų, pvz., Su atspalviu, sodrumu, neryškumu, linijine spalvų perdanga ir daugeliu kitų vaizdų? Čia yra įrankis vizualizuoja šiuos efektus, tada suteikia jums fragmentą kad būtų lengva įterpti efektą į savo projektą.
SVG Morpheous
SVG Morpheous yra „JavaScript“ biblioteka, kuri leidžia jums morph SVG piktogramą iš vienos formos į kitą. Galite nustatyti palengvinimo efektą, perėjimo animacijų trukmę ir sukimosi kryptį.
Klipo kelio generatorius
SVG leidžia spustelėti vaizdo klipą su „Shape“. Tai gana paprasta, jei forma yra kvadrato ar apskritimo forma. Bet kas jei forma yra viena su daug taškų arba yra daugiakampis? Štai kur jums reikia šio „Clip Path Generator“ įrankio.
Chartist.js
Chartist.js yra biblioteka sukurti labai pritaikomus reaguojančius grafikus. Jis naudoja SVG rodyti diagramas, kurios taip pat gali būti animuotos naudojant SMIL. Naudodami šią biblioteką galėsite sukurti linijų diagramą, pyragų diagramą, juostų diagramą ir kitų tipų diagramas ir netgi pridėti animaciją.
SVG smūgio brūkšnys generatorius
Tai paprastas įrankis generuoti brūkšnines linijas naudojant SVG insultas-dasharray. Pirmiausia iš sąrašo pasirinkite vieną brūkšnelio tipą, tada pritaikykite jį pagal plotį, aukštį, sukimą ar spalvą. Vėliau galite patraukti HTML kodą ir CSS, kad galėtumėte taikyti šį brūkšnelį savo projekte.
Metodas Lygiosios: paprastas SVG redaktorius
„Method Draw“ yra žiniatinklio SVG redaktorius, turintis „ intuityvi sąsaja su įrankiais abiejose drobės pusėse. Galite piešti linijas, figūras, įvesti tekstą arba naudoti integruotas formas, tada redaguoti piešiamų objektų savybes. Eksportuokite vaizdą SVG formatu (taip pat yra SVG base64 formatu) arba įrašykite tiesiogiai PNG.
Eksportuokite „Flash“ į animuotą SVG
Nors tai nėra labai populiarus, yra tikimybė, kad kai kurie iš jūsų turi sunkų laiką „Flash“. Jei taip, galite paverskite savo „flash“ animaciją į SVG, kad ji veiktų suderinamai su naujesnėmis technologijomis. Šis įrankis sudaro „Flash“ programos išplėtimą ir gali dirbti su CS5, CS6 ir CC.
Galite eksportuoti į SVG, kai kalbama apie „Shapes“, „Bitmaps“ simbolius, „Classic Motion Tweens“, „Shape tweens“ (kitiems yra ginčytina sėkmė).
