20 Uporabna orodja SVG za boljšo grafiko

SVG danes pridobiva na priljubljenosti v spletnem oblikovanju in lahko uporabite orodja, kot je Illustrator ali Inkscape, za ustvarjanje grafike SVG. Toda ko gre za spletno oblikovanje, moramo vedno optimizirati za lažje rezultate.

Tukaj 20 orodij, ki jih lahko uporabite za hitro in učinkovito delo s SVG. V glavnem imamo spletna orodja, ki lahko pomagajo pri optimizaciji, pretvorbi, izdelavi vzorcev in še več.

Interaktivni SVG koordinatni sistem

Ko delate s SVG, ne morete zapustiti njegove koordinate. To je odlično interaktivno orodje Sara Souiden, ki vam pomaga spoznajte, kako SVG koordinira delo. Uporabljati viewBox in preserveAspectRatio na SVG-ju, ki ga vodijo oranžne in vijolične črte ter priročen ravnilo, lahko igrate med učenjem, kako SVG koordinira funkcijo.

b64

b64 je preprosto orodje optimizirajte slike in jih nato pretvorite v format base64. Svojo sliko SVG (druge oblike, kot sta JPG in PNG delo) lahko spustite, nato pa vzemite CSS s sliko ozadja base64.

SVGO

SVG, ki je izvožen, lahko vsebuje nepotrebne informacije ki jih je mogoče odstraniti brez vpliva na rezultat upodabljanja. Če želiš odstranite metapodatke urejevalnika, komentarje ali skrite elemente, lahko uporabite SVGO.

SVGO lahko uporabite preko npm, $ [sudo] npm namestite -g svgo ali uporabite različico grafičnega uporabniškega vmesnika, ki omogoča povleci in spusti za obdelavo vaše optimizacije SVG.

SVG OMG

SVG OMG obrne ukazno vrstico SVGO (prejšnje orodje) v a Različica GUI bolj intuitiven in enostaven za uporabo. Samo preklopite gumbe za vklop ali izklop vsake funkcije. Na koncu lahko dobite rezultat tudi kot slikovne datoteke in kodo.

SVG zdaj

Ko delate na Illustratorju, izvoženi SVG vsebuje nekaj informacij, ki niso potrebne. S tem orodjem boste dobite optimizirano različico izvoženega SVG-ja desno iz vašega delovnega prostora Illustrator. To orodje doda ploščo z nekaj možnostmi za optimizacijo SVG-ja. SVG Now lahko dobite na strani za dodatke Creative Cloud.

Pretvornik SVG v PNG

Hočem izvozite datoteke SVG v obrazec PNG? Brez odpiranja aplikacij, kot je Illustrator? Uporabite to orodje za pretvorbo SVG v PNG, če želite slikovne izhode v formatu PNG in tudi podatkovni URI podatkov PNG Base64, če ga potrebujete.

SVG Circus

Če menite, da so animacije nalaganja kul, jih lahko zdaj preprosto ustvarite z uporabo SVG-ja SVG Circus. Orodja vam omogočajo naredite svoj lastni nakladalnik, spinner ali kaj podobnega z uporabo animacije z zankami. Nastavite »Actor«, položaj, velikost, barvo in druge na plošči, nato izvozite, da dobite rezultate.

SVG Sprite

SVG Sprite je modul Node.js, ki optimizira veliko datotek SVG, in peče v SVG-sprite-vrste vključno s tradicionalnimi CSS spriteti za slike ozadja in / ali ospredja, svežnje SVG in drugo.

Kvazi

Z kvazi lahko ustvarjanje kvazikristalnih slik všeč, kar vidite spodaj. Ta generator je eksperimentalen, vendar so rezultati zagotovo kul. Lahko se igrate s spreminjanjem vrednosti možnosti, nato pa prenesete rezultate z gumbom »Shrani SVG«.

Navaden vzorec

Ustvarjanje vzorcev s SVG nikoli ni bilo lažje ali bolj zabavno. Naložite sliko, zmanjšajte ali spremenite razmik, obrnite in obarvajte, dokler ne dobite lepega vzorca. Pred prenosom si lahko ogledate rezultat.

Trianglify Generator

Ustvarite čudovite geometrijske vzorce SVG z Trianglify Generator. Nastavite lahko barvno naključnost / različico, velikost zrnatosti in izberete barvno paleto, s katero boste delali. To orodje je grafična različica programa Trianglify.

SVG Gradient

Veste, da lahko naredite gradiente s CSS-jem, ali ste vedeli, da lahko storite enako z SVG-jem? Najlažji način ustvarite gradient na SVG je z uporabo tega orodja. Samo vnesite start in stop barvo, potem boste dobili kodo za ustvarjeni rezultat. Vključena je tudi zamenjava za CSS.

Izvozi PSD v SVG

Če uporabljate Photoshop kot urejevalnik slik za svoje delo, boste včasih morda morali pretvorite svoj dizajn v delovni prostor Photoshop v SVG, ki je nepodprta oblika v Photoshopu. Prenesite skript v to orodje in ga kopirajte v Adobe Photoshop / prednastavitve / skripte mapo.

Preimenujte ime vektorskega sloja z razširitvijo SVG (npr. Layer1 postane layer1.svg) in zdaj lahko izvajate skript iz Datoteka> Skripte> PS v SVG.

Filtri SVG

Ali veste, da lahko s slikami SVG dodajate učinke, kot so odtenek, nasičenost, zamegljenost, linearna barvna prekrivnost in številne druge slike? Tukaj je orodje, ki vizualizira te učinke, nato pa vam prikaže odrezek za lažje vdelajte učinek v svoj projekt.

SVG Morpheous

SVG Morpheous je knjižnica JavaScript, ki vam omogoča pretvorite ikono SVG iz ene oblike v drugo. Nastavite lahko učinek sproščanja, trajanje prehodnih animacij in smer vrtenja.

Generator potovalne poti

SVG vam omogoča, da kliknete slikovni posnetek z obliko Shape. To je precej enostavno, če je oblika v obliki kvadrata ali kroga. Ampak kaj če je oblika ena z veliko točkami ali je poligonalna oblika? Tukaj potrebujete orodje Clip Path Generator.

Chartist.js

Chartist.js je knjižnica za ustvarite zelo prilagodljive odzivne grafikone. Uporablja SVG za prikaz grafikonov, ki jih je mogoče animirati tudi z uporabo SMIL. S to knjižnico lahko ustvarite linijski diagram, tortni grafikon, stolpčni grafikon in druge vrste grafikonov in jim celo dodate animacijo..

SVG generator črpalke

To je preprosto orodje ustvarjajo črtkane črte uporabo SVG kap-dasharray. Najprej s seznama izberite eno vrstico, nato jo prilagodite glede na širino, višino, vrtenje ali barvo. Nato lahko zagrabite HTML kodo in CSS, da uporabite to črto v vašem projektu.

Metoda Draw: Enostaven urejevalnik SVG

Method Draw je spletni SVG urejevalnik, z intuitiven vmesnik z orodji na obeh straneh platna. Narišete lahko črte, oblike, vnesete besedilo ali uporabite vgrajene oblike, nato pa uredite lastnosti risanih predmetov. Izvozite sliko v formatu SVG (tudi v formatu SVG base64) ali shranite neposredno v PNG.

Izvozi Flash v animirani SVG

Čeprav ni več priljubljen, obstaja možnost, da nekateri od vas težko pustijo Flash. Če je tako, lahko pretvorite vašo flash animacijo v SVG, da bo delovala skladno z novejšimi tehnologijami. To orodje je razširitev aplikacije Flash in lahko deluje na CS5, CS6 in CC.

Izvozite lahko v SVG, ko gre za oblike, simbole bitne slike, klasične gibe tweens, oblike tweens (za druge, je sporen uspeh).