20 Hyödyllisiä SVG-työkaluja parempaan grafiikkaan
SVG: n suosio on web-suunnittelussa näinä päivinä, ja voit käyttää työkaluja, kuten Illustrator tai Inkscape, luoda SVG-grafiikkaa. Mutta kun kyse on web-suunnittelusta, meidän pitäisi aina optimoida kevyempiä tuloksia.
Täällä 20 työkalua, joiden avulla voit työskennellä SVG: n kanssa nopeasti ja tehokkaasti. Meillä on enimmäkseen online-työkaluja, jotka voivat auttaa optimoinnissa, muuntamisessa, kuvioiden tekemisessä ja paljon muuta.
Interaktiivinen SVG-koordinaattijärjestelmä
Kun työskentelet SVG: n kanssa, et voi jättää sen koordinaattia. Tämä on hyvä interaktiivinen työkalu, jonka auttaa Sara Souiden oppia, miten SVG koordinoi työtä. Käyttämällä viewBox ja preserveAspectRatio SVG: ssä, jota ohjaavat oranssi ja violetti viiva ja kätevä viiva, voit pelata samalla, kun opit SVG-koordinaattien toiminnan.
B64
B64 on yksinkertainen työkalu optimoi kuvat sitten kääntää ne base64-muotoon. Voit pudottaa SVG-kuvat (muutkin tiedostomuodot, kuten JPG- ja PNG-työt) ja tarttua sitten CSS: ään base64-taustakuvan avulla.
SVGO
Vienti-SVG voi sisältää tarpeettomia tietoja joka voidaan poistaa vaikuttamatta renderointitulokseen. Jos haluat poista editorin metatiedot, kommentit tai piilotetut elementit, voit käyttää SVGO: ta.
Voit avata SVGOn npm: n kautta, $ [sudo] npm asenna -g svgo tai käytä graafisen käyttöliittymän versiota, joka tarjoaa vedon ja pudotuksen SVG-optimointiin.
SVG OMG
SVG OMG kääntää komentorivin SVGO (edellinen työkalu) a GUI-versio että se on intuitiivisempi ja helppokäyttöisempi. Vain vaihtaa painikkeita jokaisen toiminnon aktivoimiseksi tai poistamiseksi käytöstä. Lopulta voit tarttua tulokseen myös kuvatiedostoina ja koodina.
SVG nyt
Kun työskentelet Illustratorissa, viety SVG sisältää joitakin tietoja, joita ei tarvita. Tämän työkalun avulla saat viedyn SVG: n optimoidun version suoraan Illustratorin työtilasta. Tämä työkalu lisää paneelin, jossa on joitakin vaihtoehtoja SVG: n optimoimiseksi. Voit saada SVG Now -palvelun Creative Cloud -lisäosien sivulta.
SVG PNG-muuntimeen
Haluta viedä SVG-tiedostoja PNG-muotoon? Ilman Illustratorin kaltaisia sovelluksia? Käytä tätä SVG to PNG Converter -työkalua saadaksesi kuvalähtöjä PNG-muodossa ja myös PNG Base64 -tietojen URI: tä, jos tarvitset sitä.
SVG Circus
Jos luulet, että kuormaimen animaatiot ovat viileitä, voit luoda sen helposti käyttämällä SVG: tä SVG Circus. Työkalujen avulla voit tee oma kuormaajasi, kehrääjäsi tai jotain vastaavaa käyttämällä silmukoitua animaatiota. Aseta "Näyttelijä", sijainti, koko, väri ja muut paneelista ja vie sitten tulokset.
SVG Sprite
SVG Sprite on Node.js-moduuli, joka optimoi joukko SVG-tiedostoja, ja paistaa ne SVG-sprite-tyyppeihin mukaan lukien perinteiset CSS-spritit tausta- ja / tai etualan kuville, SVG-pinoille ja muille.
quasi
Käytännöllisesti katsoen voit tuottaa Quasicrystal-kuvia kuten mitä näet alla. Tämä generaattori on kokeellinen, mutta tulokset ovat varmasti viileitä. Voit toistaa noin muuttamalla vaihtoehtojen arvoa ja lataa tulokset Tallenna SVG-painikkeella.
Tavallinen kuvio
Kuvioiden luominen SVG: llä ei ole koskaan ollut helpompaa tai hauskempaa. Lataa kuva, pienennä tai vaihda välilyöntiä, käännä ja väritä, kunnes saat kauniita kuvioita. Voit esikatsella tulosta ennen sen lataamista.
Trianglify Generator
Luo kauniita SVG-geometrisia kuvioita kanssa Trianglify Generator. Voit määrittää värin satunnaisuuden / muunnoksen, rakeisuuden koon ja valita värivalikoiman. Tämä työkalu on Trianglifyn GUI-versio.
SVG-gradientti
Tiedät, että voit tehdä gradientteja CSS: llä, mutta tiesitkö, että voit tehdä saman SVG: n kanssa? Helpoin tapa luo gradientti SVG: lle on käyttämällä tätä työkalua. Syötä vain aloitus- ja lopetusvärit, jolloin saat koodin saadulle tulokselle. Mukana on myös CSS: n palautus.
Vie PSD SVG: hen
Jos käytät Photoshopia kuvankäsittelyohjelmana työssäsi, saatat joutua joskus muuntaa kuvasi Photoshop-työtilaksi SVG: ksi, joka ei ole tuettu formaatti Photoshopissa. Lataa Script tähän työkaluun ja kopioi sitten Adobe Photoshop / esiasetukset / skriptit kansio.
Nimeä uudelleen vektorikerroksen nimi SVG-laajennuksella (esim. Layer1 tulee layer1.svg), ja voit nyt suorittaa komentosarjan osoitteesta Tiedosto> Komentosarjat> PS SVG: hen.
SVG-suodattimet
Tiedätkö, että SVG: n avulla voit lisätä tehosteita, kuten värisävyä, värikylläisyyttä, hämärtymistä, lineaarista värikenttää ja monia muita kuvia? Tässä on työkalu visualisoi nämä vaikutukset ja antaa sitten katkelman helpottaa upota vaikutus hankkeeseen.
SVG Morpheous
SVG Morpheous on JavaScript-kirjasto, jonka avulla voit mykistää SVG-kuvakkeen yhdestä muodosta toiseen. Voit asettaa helpotusvaikutuksen, siirtymäanimaatioiden keston ja myös pyörimissuunnan.
Clip-polun generaattori
SVG: n avulla voit napsauttaa kuvan leikkeellä Shape. Tämä on melko helppoa, jos muoto on neliön tai ympyrän muodossa. Mutta mitä jos muoto on yksi, jossa on paljon pisteitä tai se on monikulmioinen? Siellä tarvitaan tätä Clip Path Generator -työkalua.
Chartist.js
Chartist.js on kirjasto luo hyvin muokattavia vastaavia kaavioita. Se käyttää SVG: tä näyttämään kaavioita, jotka voidaan myös animoida käyttämällä SMIL: ää. Tämän kirjaston avulla voit luoda rivikartan, ympyräkaavion, viivakaavion ja muuntyyppiset kaaviot ja lisätä jopa animaation niihin.
SVG-aivohalvauksen generaattori
Tämä on yksinkertainen työkalu tuottaa katkoviivoja käyttämällä SVG: tä aivohalvauksen dasharray. Valitse ensin yksi viiva tyyppi luettelosta ja muokkaa sitä sitten leveyden, korkeuden, pyörimisen tai värin perusteella. Tämän jälkeen voit tarttua HTML-koodiin ja CSS: hen tämän viivapiirin käyttämiseksi projektissasi.
Menetelmä Piirrä: Yksinkertainen SVG-editori
Method Draw on web-pohjainen SVG-editori, jossa on intuitiivinen käyttöliittymä, jossa on työkaluja kummankin puolen kankaalle. Voit piirtää viivoja, muotoja, syöttää tekstiä tai käyttää sisäänrakennettuja muotoja ja muokata sitten piirrettyjen objektien ominaisuuksia. Vie kuva SVG-muodossa (myös SVG base64 -muodossa) tai tallenna se suoraan PNG-muodossa.
Vie Flash animoituun SVG: hen
Vaikka se ei ole kovin suosittu, on mahdollisuus, että joillakin teistä on vaikea päästä Flashiin. Jos näin on, voit ota flash-animaatiosi SVG: ksi, jotta se toimisi yhteensopivasti uudempien teknologioiden kanssa. Tämä työkalu muodostaa laajennuksen Flash-sovellukseen ja voi toimia CS5-, CS6- ja CC-ohjelmissa.
Voit viedä SVG: hen, kun kyseessä on Shapes, Bitmaps Symbolit, Classic Motion Tweens, Shape tweens (muiden osalta on kiistatonta menestystä).
