20 Instrumente SVG utile pentru o mai bună grafică

SVG câștigă popularitate în designul web în aceste zile și puteți utiliza instrumente precum Illustrator sau Inkscape pentru a crea grafică SVG. Dar când vine vorba de designul web, ar trebui să optimizăm mereu pentru rezultate mai ușoare.

Aici 20 de instrumente pe care le puteți utiliza pentru a lucra cu SVG rapid și eficient. Avem cele mai multe instrumente online, care vă pot ajuta în optimizare, conversie, modelare și multe altele.

Sistem interactiv SVG Coordinate

Când lucrați cu SVG, nu puteți lăsa coordonatele. Acesta este un instrument interactiv excelent de către Sara Souiden, care vă ajută aflați cum funcționează coordonatele SVG. Utilizarea funcției viewBox și preserveAspectRatio pe SVG, ghidată de linii portocalii și purpurii și o riglă la îndemână, puteți juca în timp ce aflați cum funcționează coordonatele SVG.

B64

B64 este un simplu instrument optimizați imaginile apoi transformați-le în formatul base64. Puteți să vă aruncați imaginile SVG (alte formate cum ar fi JPG și PNG de lucru prea), apoi apuca CSS cu base64 imagine de fund ca rezultat.

SVGO

SVG care este exportat poate conține informații inutile care pot fi îndepărtate fără a afecta rezultatul redării. Dacă dorești eliminați metadatele editorului, comentariile sau elementele ascunse, puteți utiliza SVGO.

Puteți introduce SVGO prin intermediul npm, $ [sudo] npm instalați -g svgo sau utilizați versiunea GUI care oferă drag and drop pentru a procesa optimizarea SVG.

SVG OMG

SVG OMG transformă linia de comandă de SVGO (instrumentul anterior) într-un Versiune GUI mai intuitiv și ușor de utilizat. Doar comutați butoanele pentru a activa sau a dezactiva fiecare caracteristică. În final poți apuca rezultatul ca și fișiere imagine și cod.

SVG Acum

Când lucrați la Illustrator, SVG exportat conține câteva informații care nu sunt necesare. Cu acest instrument vei face asta obțineți versiunea optimizată a SVG exportată chiar din spațiul de lucru Illustrator. Acest instrument adaugă un panou cu câteva opțiuni pentru optimizarea SVG. Aveți posibilitatea să obțineți SVG Acum din pagina Creative Cloud Add-ons.

Convertor SVG la PNG

Vreau să exportați fișierele SVG în formatul PNG? Fără a deschide aplicații ca Illustrator pentru a face acest lucru? Utilizați acest SVG la PNG Converter instrument pentru a obține imagini în format PNG și, de asemenea, PNG Base64 URI de date, dacă aveți nevoie de ea.

SVG Circus

Dacă credeți că animațiile încărcătorului sunt reci, acum puteți să o creați ușor utilizând SVG cu SVG Circus. Instrumentele vă permit să faceți încărcătorul propriu, spinnerul sau orice altceva similar folosind animație cu buclă. Setați "Actorul", poziția, dimensiunea, culoarea și altele din panou, apoi exportați pentru a obține rezultatele.

SVG Sprite

SVG Sprite este un modul Node.js, care se optimizează o grămadă de fișiere SVG, și le sparge în tipuri de sprite SVG inclusiv sprite tradiționale CSS pentru imagini de fond și / sau în prim-plan, stive SVG și multe altele.

cvasi

Cu cvasi puteți generează imagini Quasicrystal cum vedeți mai jos. Acest generator este experimental, dar rezultatele sunt cu siguranță reci. Puteți să jucați prin modificarea valorii opțiunilor, apoi să descărcați rezultatele cu ajutorul butonului "Salvați SVG".

Model curb

Crearea de modele cu SVG nu a fost niciodată mai ușoară sau mai distractivă. Încărcați imaginea, micșorați sau modificați distanța, rotiți și recolorați până când obțineți un model frumos. Puteți examina rezultatul înainte de al descărca.

Generator trianglificat

Creați modele frumoase SVG geometrice cu Generator trianglificat. Puteți seta culoarea aleatorie / varianta, dimensiunea granularității și alegeți o paletă de culori pentru a lucra cu. Acest instrument este o versiune GUI de Trianglify.

SVG Gradient

Știți că puteți face gradienți cu CSS, dar știați că puteți face același lucru și cu SVG? Cea mai ușoară cale spre genera gradient pe SVG este prin utilizarea acestui instrument. Doar introduceți start și stop color apoi veți obține codul pentru rezultatul generat. Este inclusă și o rezervă pentru CSS.

Exportați PSD în SVG

Dacă utilizați Photoshop ca editor de imagine pentru munca dvs., uneori este posibil să aveți nevoie transformați designul pe spațiul de lucru Photoshop în SVG, care este un format neacceptat în Photoshop. Descărcați scriptul pentru acest instrument, apoi copiați-l la Adobe Photoshop / presetări / scripturi pliant.

Redenumiți un nume de strat vectorial cu extensia SVG (de exemplu, layer1 deveni layer1.svg), iar acum puteți rula scriptul de la Fișier> Scripturi> PS la SVG.

Filtre SVG

Știți că, cu ajutorul SVG, puteți adăuga efecte cum ar fi nuanța, saturația, estomparea, suprapunerea de culoare liniară și multe altele la imagini? Iată un instrument care vizualizează aceste efecte, apoi vă oferă un fragment pentru a face mai ușor încorporați efectul în proiectul dvs..

SVG Morpheous

SVG Morpheous este o bibliotecă JavaScript care vă permite să transforma o pictogramă SVG de la o formă la alta. Puteți seta efectul de relaxare, durata animațiilor de tranziție și, de asemenea, direcția de rotație.

Clip generator de cale

SVG vă permite să faceți clic pe clipul imagine cu Shape. Acest lucru este destul de ușor dacă forma este sub forma unui pătrat sau a unui cerc. Dar ce dacă forma este una cu multe puncte sau este o formă poligonală? Aici aveți nevoie de acest instrument de generare a căii Clip.

Chartist.js

Chartist.js este o bibliotecă crea diagrame foarte adaptabile. Acesta utilizează SVG pentru a afișa graficele, care pot fi animate utilizând SMIL. Cu această bibliotecă, puteți crea o diagramă de linie, o diagramă de plăci, o diagramă de bare și alte tipuri de diagrame și chiar să le adăugați animație.

Generator de bordură SVG

Acesta este un simplu instrument generează linii punctate folosind SVG accident vascular cerebral-dasharray. Mai întâi alegeți un tip de liniuță din listă, apoi personalizați-l în ceea ce privește lățimea, înălțimea, rotația sau culoarea. Apoi puteți să luați codul HTML și CSS pentru a aplica această linie în proiectul dvs..

Metoda Draw: Un editor simplu SVG

Metoda Draw este un editor SVG bazat pe web, cu un interfață intuitivă care vine cu unelte de pe ambele părți ale pânzei. Aveți posibilitatea să desenați linii, forme, text de intrare sau să folosiți forme încorporate, apoi să editați proprietățile obiectelor desenate. Exportați imaginea în format SVG (de asemenea, în format SVG base64) sau salvați direct în PNG.

Exportați Flash la SVG animat

Deși nu mai este foarte populară, există o șansă ca unii dintre voi să încerce să renunțe la Flash. Dacă da, puteți transformați animația flash în SVG pentru a păstra compatibilitatea cu tehnologii mai noi. Acest instrument formează o extensie a aplicației Flash și poate funcționa pe CS5, CS6 și CC.

Puteți exporta în SVG când este vorba despre Forme, Simboluri Bitmaps, Clasic Motion Tweens, Shape tweens (pentru alții, există un succes susținut).