20 Kasulikud SVG-tööriistad parema graafika jaoks

SVG on tänapäeval populaarseks veebidisainis ja SVG graafika loomiseks saate kasutada selliseid tööriistu nagu Illustrator või Inkscape. Aga kui tegemist on veebidisainiga, peaksime alati tulemuste optimeerimiseks optimeerima.

Siin 20 tööriista, mida saate kasutada SVG-ga töötamiseks kiiresti ja tõhusalt. Meil on enamasti veebipõhised tööriistad, mis võivad aidata optimeerida, konverteerida, kujundada mustreid ja palju muud.

Interaktiivne SVG-koordinaatsüsteem

SVG-ga töötamisel ei saa selle koordinaati lahkuda. See on Sara Souideni suurepärane interaktiivne tööriist, et teid aidata õppida, kuidas SVG tööd koordineerib. Kasutades vaateaken ja preserveAspectRatio SVG-s, mida juhivad oranžid ja lilla jooned ning mugav joonlaud, saate mängida, kui õpite, kuidas SVG koordinaadid toimivad.

b64

b64 on lihtne vahend optimeerige pildid ja muutke need base64-vormingusse. Saate oma SVG-pildid langeda (ka muud formaadid nagu JPG ja PNG töö), seejärel haarake CSS-i base64 taustapildiga..

SVGO

Eksporditud SVG võib sisaldada tarbetut teavet mida saab eemaldada, ilma et see mõjutaks renderdamistulemust. Kui sa tahad eemaldage redaktori metaandmed, kommentaarid või peidetud elemendid, saate kasutada SVGO-d.

SVGO-d saab sisse lülitada npm kaudu, $ [sudo] npm install -g svgo või kasutage GUI versiooni, mis pakub lohistamist lohistamiseks SVG optimeerimiseks.

SVG OMG

SVG OMG lülitab SVGO (eelmine tööriist) a GUI versioon see on intuitiivsem ja kergemini kasutatav. Lihtsalt nuppude vahetamiseks iga funktsiooni aktiveerimiseks või desaktiveerimiseks. Lõppkokkuvõttes saate ka tulemuse pildifailidena ja koodina haarata.

SVG Nüüd

Illustratoriga töötades sisaldab eksporditud SVG mingit teavet, mis ei ole vajalik. Selle tööriistaga saate saada eksporditud SVG optimeeritud versioon otse Illustratori tööala alt. See tööriist lisab paneeli, millel on mõned võimalused SVG optimeerimiseks. SVG Now saate siit Creative Cloudi lisandmoodulite lehelt.

SVG PNG konverterisse

Tahtma SVG-failide eksportimine PNG-vormingusse? Ilma selliseid rakendusi avamata nagu Illustrator seda teha? Kasutage seda SVG-PNG-konverteritööriista, et saada pildi väljundid PNG-vormingus ja ka PNG Base64-andmete URI, kui seda vajate.

SVG tsirkus

Kui arvate, et laaduri animatsioonid on lahedad, saate nüüd selle luua lihtsalt, kasutades SVG-d SVG tsirkus. Tööriistad võimaldavad teil tehke oma laadur, spinner või midagi sarnast, kasutades silmusega animatsiooni. Seadistage paneelilt „Näitleja”, positsioon, suurus, värv ja teised ning seejärel tulemuste saamiseks eksportige.

SVG Sprite

SVG Sprite on moodul Node.js, mis optimeerib hulk SVG-faile, ja küpsetab need SVG sprite tüüpi kaasa arvatud traditsioonilised CSS spritid taust- ja / või esiplaanile, SVG-stackidele ja muudele.

Kvaasi

Kvaasi saab luua Quasicrystal pilte nagu see, mida näete allpool. See generaator on eksperimentaalne, kuid tulemused on kindlasti lahedad. Saate mängida ümber, muutes suvandite väärtust, seejärel laadige tulemused nupule 'Salvesta SVG'.

Lihtne muster

SVG-ga musterite loomine pole kunagi olnud lihtsam ega lõbusam. Laadige üles oma pilt, vähendage seda või muutke vahekaugust, pööra ja värvi, kuni saad ilus muster. Saate eelvaate eelvaadet enne selle allalaadimist vaadata.

Trianglify generaator

Loo ilusad SVG geomeetrilised mustrid koos Trianglify generaator. Saate määrata värvi juhuslikkuse / variandi, teravuse suuruse ja valida värvipaleti töötamiseks. See tööriist on Trianglify GUI versioon.

SVG gradient

Te teate, et saate CSS-iga gradiente teha, aga kas teadsite, et saate sama teha ka SVG-ga? Lihtsaim viis tekitab SVG-le gradiendi on selle tööriista abil. Sisestage lihtsalt algus- ja lõppvärv, siis saad genereeritud tulemuse koodi. Samuti on lisatud CSS-i varukoopia.

Ekspordi PSD SVG-sse

Kui kasutate oma töö jaoks Photoshopit pildiredaktorina, võib mõnikord olla vaja teisendage oma disain Photoshopi tööruumist SVG-ks, mis on Photoshopis toetamata formaat. Laadige skript sellele tööriistale, seejärel kopeerige see Adobe Photoshop / eelseaded / skriptid kausta.

Nimetage vektorikihi nimi SVG laiendiga (nt layer1 muutub layer1.svg) ja nüüd saate skripti käivitada Fail> Skriptid> PS SVG-le.

SVG filtrid

Kas teate, et SVG-ga saate pildile lisada selliseid efekte nagu toon, küllastumine, hägusus, lineaarne värvikiht ja paljud teised? Siin on tööriist visualiseerib need efektid, seejärel annab teile väljavõtte lihtsamaks teha mõju oma projekti.

SVG Morpheous

SVG Morpheous on JavaScript-raamatukogu, mis võimaldab teil morfeerib SVG ikooni ühest kujust teise. Saate seada leevendava efekti, ülemineku animatsioonide kestuse ja pöörlemissuuna.

Clip tee generaator

SVG abil saate klõpsata pildil klippiga Shape. See on üsna lihtne, kui kuju on ruudu või ringi kujul. Aga mis kui kuju on palju, kus on palju punkte või on see hulknurkne? Sealt vajate seda Clip Path Generator'i tööriista.

Chartist.js

Chartist.js on raamatukogu luua väga kohandatavaid reageerivaid diagramme. See kasutab SVG-d, et kuvada graafikuid, mida saab ka animeerida SMIL-i abil. Selle raamatukogu abil on teil võimalik luua rida-, pirukas-, ribakaart- ja muid kaarte ning lisada neile isegi animatsioon.

SVG löögikriipsugeneraator

See on lihtne vahend luua katkendjooned SVG-d kasutades insult-dasharray. Kõigepealt valige loendist üks kriipsitüüp, seejärel kohandage seda laiuse, kõrguse, pöörlemise või värvi järgi. Seejärel saate HTML-koodi ja CSS-i selle kriipsjoone oma projektis rakendada.

Meetod Joonistus: Lihtne SVG redaktor

Method Draw on veebipõhine SVG-redaktor, millel on intuitiivne kasutajaliides, mis kaasas tööriistad lõuendi mõlemal küljel. Võite joonistada jooni, kujundeid, sisestada teksti või kasutada sisseehitatud kujundeid, seejärel redigeerida tõmmatud objektide omadusi. Ekspordi pilt SVG-vormingus (ka SVG base64-vormingus) või salvestage otse PNG-vormingusse.

Ekspordi Flash animatsiooniga SVG-le

Kuigi see ei ole enam väga populaarne, on tõenäoline, et mõnel teist on raske Flashi lubada. Kui jah, siis saate muutke oma flash-animatsioon SVG-ks, et see oleks kooskõlas uuemate tehnoloogiatega. See tööriist laiendab Flashi rakendust ja saab töötada CS5, CS6 ja CC.

Võid eksportida SVG-sse, kui tegemist on kujundite, bitikaartide sümbolitega, klassikaliste liikumisteede, kuju tweenidega (teiste jaoks on vaieldav edu).