20 Korisni SVG alati za bolju grafiku

SVG ovih dana dobiva na popularnosti u web dizajnu i možete koristiti alate kao što su Illustrator ili Inkscape za stvaranje SVG grafike. No, kada je u pitanju web dizajn, uvijek bismo trebali optimizirati za lakše rezultate.

Ovdje 20 alata koje možete koristiti za rad s SVG-om brzo i učinkovito. Uglavnom imamo online alate koji vam mogu pomoći u optimizaciji, pretvorbi, izradi uzoraka i još mnogo toga.

Interaktivni SVG koordinatni sustav

Kada radite sa SVG-om, ne možete napustiti njegovu koordinatu. Ovo je sjajan interaktivni alat Sara Souiden, koji će vam pomoći saznajte kako SVG koordinira rad. Koristiti Okvir pogleda i preserveAspectRatio na SVG-u, vođeni narančastim i ljubičastim linijama i praktičnim ravnilom, možete igrati dok učite kako funkcija SVG koordinira.

B64

B64 je jednostavan alat za optimizirajte slike i pretvorite ih u base64 format. Možete ispustiti SVG slike (drugi formati kao što su JPG i PNG rad), a zatim uhvatite CSS s osnovnom slikom base64 kao rezultat.

SVGO

SVG koji se izvozi može sadržavati nepotrebne informacije koje se mogu ukloniti bez utjecaja na rezultat prikazivanja. Ako želiš ukloniti metapodatke, komentare ili skrivene elemente urednika, možete koristiti SVGO.

SVGO možete namjestiti pomoću npm, $ [sudo] npm instaliraj -g svgo ili koristite GUI verziju koja nudi povuci i ispusti za obradu SVG optimizacije.

SVG OMG

SVG OMG okreće naredbeni redak od SVGO (prethodni alat) u a GUI verzija intuitivniji i jednostavniji za korištenje. Samo uključite gumbe za uključivanje ili isključivanje svake značajke. Na kraju možete uhvatiti rezultat kao slikovne datoteke i kod.

SVG sada

Kada radite na Illustratoru, izvezeni SVG sadrži neke informacije koje nisu potrebne. S ovim alatom ćete dobiti optimiziranu verziju izvezenog SVG-a pravo iz radnog prostora Illustrator. Ovaj alat dodaje panel s nekim opcijama za optimizaciju SVG-a. SVG Now možete dobiti na stranici Creative Cloud Add-ons.

SVG u PNG konverter

Želim izvoz SVG datoteka u PNG obrazac? Bez otvaranja aplikacija kao što je Illustrator? Upotrijebite ovaj alat za konverziju SVG-a u PNG za dobivanje izlaznih slika u PNG formatu i PNG Base64 URI-a podataka ako vam je potreban.

SVG Circus

Ako mislite da su animacije za učitavanje cool, sada ih možete lako izraditi pomoću SVG-a SVG Circus. Alati vam omogućuju napravite vlastiti utovarivač, pauk ili bilo što slično pomoću animacije u petlji. Postavite 'Glumac', položaj, veličinu, boju i druge na ploči, a zatim izvezite da biste dobili rezultate.

SVG Sprite

SVG Sprite je Node.js modul koji optimizira hrpa SVG datoteka, i peče ih u SVG sprite-tipove uključujući tradicionalne CSS spriteove za slike pozadine i / ili prednjeg plana, SVG hrpe i još mnogo toga.

Kvazi

Uz kvazi možete stvaraju kvazikristalne slike volite ono što vidite ispod. Ovaj generator je eksperimentalan, ali rezultati su svakako cool. Možete se igrati okolo promjenom vrijednosti opcija, a zatim preuzeti rezultate pomoću gumba "Spremi SVG".

Običan uzorak

Izrada uzoraka s SVG-om nikada nije bilo lakše ili zabavnije. Prenesite sliku, smanjite razmak ili promijenite razmak, rotirajte i obojite dok ne dobijete lijep uzorak. Prije preuzimanja možete pregledati rezultat.

Trianglify Generator

Napravite lijepe SVG geometrijske uzorke s Trianglify Generator. Možete postaviti slučajnost / varijaciju boja, veličinu zrnatosti i odabrati paletu boja s kojom ćete raditi. Ovaj alat je GUI verzija programa Trianglify.

SVG gradijent

Znate da možete napraviti gradijente s CSS-om, ali jeste li znali da možete učiniti isto s SVG-om? Najlakši način generirati gradijent na SVG-u je pomoću ovog alata. Samo unesite start i stop boju, tada ćete dobiti kod za generirani rezultat. Uključena je i zamjena za CSS.

Izvezi PSD u SVG

Ako koristite Photoshop kao uređivač slika za svoj rad, ponekad ćete možda morati pretvoriti svoj dizajn u Photoshop radni prostor u SVG, koji je nepodržani format u Photoshopu. Preuzmite skriptu na ovaj alat, a zatim kopirajte u Adobe Photoshop / postavke / skripte mapa.

Preimenujte ime vektorskog sloja sa SVG proširenjem (npr. Layer1 postaje layer1.svg), a sada možete pokrenuti skriptu iz Datoteka> Skripte> PS u SVG.

SVG filtri

Znate li da sa SVG-om možete dodavati efekte kao što su nijansa, zasićenost, zamućenje, linearni prekrivač boja i mnogi drugi na slike? Ovdje je alat koji vizualizira te učinke, a zatim vam daje isječak kako bi vam bilo lakše ugraditi učinak u svoj projekt.

SVG Morpheous

SVG Morpheous je JavaScript biblioteka koja vam omogućuje pretvorite SVG ikonu iz jednog oblika u drugi. Možete postaviti efekt ublažavanja, trajanje prelaznih animacija i smjer rotacije.

Generator putanje klipa

SVG vam omogućuje da kliknete slikovni isječak s oblikom Shape. To je vrlo jednostavno ako je oblik u obliku kvadrata ili kruga. Ali što ako je oblik jedan s mnogo točaka ili je poligonalni oblik? To je mjesto gdje vam je potreban ovaj alat Clip Path Generator.

Chartist.js

Chartist.js je knjižnica za stvoriti vrlo prilagodljive grafikone. Ona koristi SVG za prikaz grafikona, koji se također mogu animirati pomoću SMIL-a. Pomoću te knjižnice možete izraditi linijski grafikon, tortni grafikon, stupčasti grafikon i druge vrste grafikona, pa čak i dodati im animaciju.

SVG generator crtice crtica

To je jednostavan alat generira isprekidane linije koristeći SVG takta DashArray. Najprije odaberite jednu vrstu crtice s popisa, a zatim je prilagodite u smislu širine, visine, rotacije ili boje. Nakon toga možete uzeti HTML kôd i CSS da biste primijenili ovu crticu u svom projektu.

Način crtanja: jednostavan SVG editor

Metod Draw je web-bazirani SVG editor, s intuitivno sučelje koje dolazi s alatima na obje strane platna. Možete nacrtati linije, oblike, unositi tekst ili koristiti ugrađene oblike, a zatim urediti svojstva nacrtanih objekata. Izvezite sliku u SVG formatu (također dolazi u SVG base64 formatu) ili spremite izravno u PNG.

Izvezi Flash u animirani SVG

Iako više nije popularna, postoji mogućnost da neki od vas teško puštaju Flash. Ako je tako, možete pretvorite vašu flash animaciju u SVG kako bi je održavali kompatibilnu s novim tehnologijama. Ovaj alat čini proširenje Flash aplikacije i može raditi na CS5, CS6 i CC.

Možete izvesti u SVG kada je riječ o Oblicima, Bitmap simbolima, Klasičnom pokretu Tweens, Shape tweens (za druge postoji uvjerljiv uspjeh).