20 Noderīgi SVG rīki labākajai grafikai

SVG šajās dienās gūst popularitāti tīmekļa dizainā, un jūs varat izmantot tādus rīkus kā Illustrator vai Inkscape, lai izveidotu SVG grafiku. Bet, kad runa ir par web dizainu, mums vienmēr vajadzētu optimizēt vieglākus rezultātus.

Šeit 20 rīki, kurus var izmantot, lai strādātu ar SVG ātri un efektīvi. Mums ir galvenokārt tiešsaistes rīki, kas var palīdzēt optimizēt, pārveidot, veidot modeļus un vairāk.

Interaktīva SVG koordinātu sistēma

Strādājot ar SVG, jūs nevarat atstāt tās koordinātu. Tas ir lielisks Sara Souiden interaktīvs rīks, kas jums palīdzēs uzziniet, kā SVG koordinē darbu. Izmantojot skats un preserveAspectRatio uz SVG, vadoties pēc oranžām un violetām līnijām un ērts lineāls, jūs varat spēlēt, mācoties, kā darbojas SVG koordinātas.

b64

b64 ir vienkāršs līdzeklis optimizējiet attēlus un pēc tam tos pārveidojiet par bāzes64 formātu. Jūs varat nomest savus SVG attēlus (arī citus formātus, piemēram, JPG un PNG), un pēc tam iegūt CSS ar bāzes64 fona attēlu kā rezultātu.

SVGO

Eksportētais SVG var saturēt nevajadzīgu informāciju ko var noņemt, neietekmējot izciršanas rezultātu. Ja Tu gribi noņemt redaktora metadatus, komentārus vai slēptos elementus, varat izmantot SVGO.

Jūs varat ievadīt SVGO caur npm, $ [sudo] npm instalēt -g svgo vai izmantojiet GUI versiju, kas piedāvā velciet un nometiet, lai iegūtu SVG optimizāciju.

SVG OMG

SVG OMG pārvērš komandrindu SVGO (iepriekšējais rīks) GUI versija tas ir intuitīvāks un vieglāk lietojams. Tikai pārslēgt pogas lai aktivizētu vai deaktivizētu katru funkciju. Galu galā jūs varat sagrābt rezultātu kā attēlu failus un kodu.

SVG Tagad

Strādājot ar Illustrator, eksportētais SVG satur kādu informāciju, kas nav nepieciešama. Ar šo rīku jūs iegūstiet eksportētā SVG optimizēto versiju tieši no Illustrator darbvietas. Šis rīks pievieno paneli ar dažām iespējām SVG optimizēšanai. SVG Now varat saņemt lapā Creative Cloud pievienojumprogrammas.

SVG uz PNG pārveidotāju

Vēlaties eksportēt SVG failus uz PNG formu? Neatverot lietojumprogrammas, piemēram, Illustrator, to darīt? Izmantojiet šo SVG uz PNG konvertēšanas rīku, lai iegūtu attēla izejas PNG formātā un arī PNG Base64 datu URI, ja tas ir nepieciešams.

SVG Cirks

Ja domājat, ka iekrāvēja animācijas ir atdzist, tagad varat to viegli izveidot, izmantojot SVG ar SVG Cirks. Rīki ļauj izveidojiet savu iekrāvēju, vērpēju vai kaut ko līdzīgu, izmantojot animētu animāciju. No paneļa iestatiet „Aktieris”, pozīciju, lielumu, krāsu un citus, pēc tam eksportējiet, lai iegūtu rezultātus.

SVG Sprite

SVG Sprite ir Node.js modulis, kas optimizē daudz SVG failu, un cep tos SVG sprite veidos ieskaitot tradicionālos CSS sprites fona un / vai priekšplāna attēliem, SVG skursteņiem un vairāk.

Kvazi

Ar kvazi jūs varat radīt Quasicrystal attēlus patīk tas, ko jūs redzat zemāk. Šis ģenerators ir eksperimentāls, bet rezultāti noteikti ir forši. Jūs varat spēlēt apkārt, mainot opciju vērtību, pēc tam lejupielādējiet rezultātus ar pogu „Saglabāt SVG”.

Vienkāršs modelis

Rakstu izveide ar SVG nekad nav bijis vieglāk vai jautrāk. Augšupielādējiet savu attēlu, samaziniet to vai mainiet atstarpi, pagrieziet un mainiet krāsu, līdz iegūstat skaistu rakstu. Varat priekšskatīt rezultātu pirms tā lejupielādes.

Trianglify ģenerators

Izveidojiet skaistus SVG ģeometriskos rakstus ar Trianglify ģenerators. Varat iestatīt krāsu nejaušību / variantu, detalizācijas lielumu un izvēlēties krāsu paleti, ar kuru strādāt. Šis rīks ir Trianglify GUI versija.

SVG gradients

Jūs zināt, ka jūs varat veikt gradientus ar CSS, bet vai jūs zinājāt, ka to var izdarīt arī ar SVG? Vieglākais veids, kā ģenerē gradientu uz SVG ir, izmantojot šo rīku. Vienkārši ievadiet sākuma un beigu krāsu, tad iegūsiet iegūto rezultātu kodu. Ir iekļauts arī CSS rezerves variants.

Eksportēt PSD uz SVG

Ja izmantojat Photoshop kā attēlu redaktoru savam darbam, dažkārt jums var būt nepieciešams pārvērst savu dizainu Photoshop darbvietā par SVG, kas ir neatbalstīts formāts Photoshop. Lejupielādējiet šo skriptu šim rīkam, pēc tam nokopējiet Adobe Photoshop / presets / skripti mapi.

Pārdēvējiet vektora slāņa nosaukumu ar SVG paplašinājumu (piemēram, 1. slānis kļūst slānis 1.svg), un tagad varat palaist skriptu no Fails> Skripti> PS uz SVG.

SVG filtri

Vai jūs zināt, ka ar SVG jūs varat pievienot efektus, piemēram, ar nokrāsu, piesātinājumu, izplūšanu, lineāru krāsu pārklājumu un daudzus citus attēlus? Šeit ir rīks vizualizē šīs sekas, tad dod jums fragmentu lai būtu viegli iegult efektu jūsu projektā.

SVG Morpheous

SVG Morpheous ir JavaScript bibliotēka, kas ļauj jums morph SVG ikonu no vienas formas uz otru. Jūs varat iestatīt atvieglojuma efektu, pārejas animāciju ilgumu un arī rotācijas virzienu.

Clip ceļa ģenerators

SVG ļauj noklikšķināt uz attēla klipa ar Shape. Tas ir diezgan viegli, ja forma ir kvadrāta vai apļa formā. Bet kas ja forma ir viena ar daudz punktiem vai ir daudzstūra forma? Tādā veidā jums ir vajadzīgs šis Clip Path Generator rīks.

Chartist.js

Chartist.js ir bibliotēka izveidojiet ļoti pielāgojamas pielāgojamas diagrammas. Tas izmanto SVG, lai parādītu diagrammas, kuras var arī animēt, izmantojot SMIL. Izmantojot šo bibliotēku, jūs varat izveidot līnijas diagrammu, sektoru diagrammu, joslu diagrammu un cita veida diagrammas, kā arī pat pievienot tiem animāciju.

SVG insultu ģenerators

Tas ir vienkāršs rīks ģenerēt punktētas līnijas izmantojot SVG insults-dasharray. Vispirms sarakstā izvēlieties vienu domuzīmei, pēc tam pielāgojiet to platuma, augstuma, rotācijas vai krāsas ziņā. Pēc tam jūs varat sagrābt HTML kodu un CSS, lai piemērotu šo domuzīmei savā projektā.

Metode Draw: vienkāršs SVG redaktors

Metode Draw ir tīmekļa SVG redaktors ar intuitīvs interfeiss, kas nāk ar instrumentiem abās audekla pusēs. Varat zīmēt līnijas, formas, ievadīt tekstu vai izmantot iebūvētās formas, pēc tam rediģēt zīmēto objektu īpašības. Eksportējiet attēlu SVG formātā (arī nāk SVG bāzes64 formātā) vai saglabājiet tieši PNG.

Eksportēt Flash animētam SVG

Lai gan tas vairs nav ļoti populārs, pastāv iespēja, ka dažiem no jums ir grūti izlaist Flash. Ja tā, jūs varat pārvērst savu flash animāciju par SVG, lai saglabātu tā saderību ar jaunākajām tehnoloģijām. Šis rīks veido Flash lietojumprogrammas paplašinājumu un var strādāt ar CS5, CS6 un CC.

SVG var eksportēt, kad runa ir par formām, Bitmaps simboliem, Classic Motion Tweens, Shape tweens (citiem ir apstrīdams panākums).