20 Hasznos SVG eszközök a jobb grafikához
Az SVG napjainkban népszerűvé válik a webdesignban, és az olyan eszközöket, mint az Illustrator vagy az Inkscape, használhatja SVG grafika létrehozásához. De amikor a web designról van szó, mindig könnyebbé kell tenni a könnyebb eredményeket.
Itt a 20 olyan eszköz, amellyel gyorsan és hatékonyan dolgozhat az SVG-vel. Többnyire online eszközök vannak, amelyek segíthetnek az optimalizálásban, a konverziókban, a minták készítésében és így tovább.
Interaktív SVG koordinátarendszer
Ha SVG-vel dolgozik, nem hagyhatja el a koordinátáját. Ez Sara Souiden nagyszerű interaktív eszköze, hogy segítsen megtudhatja, hogyan koordinálja az SVG a munkát. Használni a viewBox és preserveAspectRatio az SVG-n narancssárga és lila vonalak, valamint egy praktikus vonalzó segítségével játszhat, miközben megtanulhatja, hogyan működik az SVG koordinátái.
B64
B64 egy egyszerű eszköz optimalizálja a képeket, majd a base64 formátumba. Az SVG-képeket le lehet dobni (más formátumok, mint a JPG és a PNG is), majd a CSS-t a base64 háttérkép segítségével kapja meg.
SVGO
Az exportált SVG tartalmazhat felesleges információkat amely eltávolítható anélkül, hogy befolyásolná a renderelési eredményt. Ha akarod szerkesztő metaadatok, megjegyzések vagy rejtett elemek eltávolítása, használhatja az SVGO-t.
Az SVGO-t npm-en keresztül intallálhatja, $ [sudo] npm install -g svgo vagy használja a GUI-verziót, amely az SVG-optimalizálás feldolgozásához húzással rendelkezik.
SVG OMG
SVG OMG a SVGO (az előző eszköz) a GUI verzió az intuitívabb és könnyen használható. Éppen gombok váltásához minden egyes funkció be- vagy kikapcsolásához. Végül meg lehet ragadni az eredményt képfájlokként és kódként is.
SVG Most
Az Illustrator használatakor az exportált SVG tartalmaz néhány olyan információt, amely nem szükséges. Ezzel az eszközzel kap az exportált SVG optimalizált verzióját közvetlenül az Illustrator munkaterületéről. Ez az eszköz hozzáad egy panelt az SVG optimalizálásához. Az SVG Now-t a Creative Cloud bővítmények oldaláról kaphatja meg.
SVG a PNG átalakítóhoz
Akarni SVG-fájlok exportálása PNG formátumba? Anélkül, hogy megnyitná az olyan alkalmazásokat, mint az Illustrator? Használja ezt az SVG-PNG átalakító eszközt, hogy PNG formátumú képkimeneteket és PNG Base64 adat URI-t kapjon, ha szüksége van rá.
SVG Cirkusz
Ha úgy gondolod, hogy a betöltő animációk hűvösek, akkor most könnyen létrehozhatod az SVG-vel SVG Cirkusz. Az eszközök lehetővé teszik készítse el saját betöltőjét, fonóját, vagy bármi hasonlót hurkos animáció használatával. Állítsa be a „Színész”, a pozíció, a méret, a szín és a többi elemet a panelről, majd exportálja az eredményeket.
SVG Sprite
Az SVG Sprite egy Node.js modul, amely optimalizál egy csomó SVG fájlt, és az SVG sprite típusokba dobja őket beleértve a hagyományos CSS spriteket a háttér és / vagy az előtér képeihez, az SVG veremekhez és még sok máshoz.
Szinte
A kvázi segítségével Quasicrystal képeket készíthet mint amit alább látsz. Ez a generátor kísérleti jellegű, de az eredmények határozottan hűvösek. Az opciók értékének megváltoztatásával játszhat körül, majd az „SVG mentése” gombbal töltheti le az eredményeket.
Sima minta
Minták létrehozása SVG-vel soha nem volt könnyebb vagy szórakoztatóbb. Töltsd fel a képedet, méretezd le vagy változtassa meg a távolságot, forgassa el és térítse vissza, amíg szép mintát nem kap. Az eredmény letöltése előtt megtekintheti az eredményt.
Trianglify generátor
Készítsen szép SVG geometrikus mintákat val vel Trianglify generátor. Beállíthatja a szín véletlenszerűségét / variációját, szemcseméretét, és kiválaszthat egy színpalettát, amellyel együtt dolgozhat. Ez az eszköz a Trianglify GUI verziója.
SVG gradiens
Tudod, hogy a CSS színátmeneteket tudod csinálni, de tudtad, hogy ugyanezt teheted az SVG-vel? A legegyszerűbb módja gradiens létrehozása az SVG-n az eszköz használata. Csak írja be a start és stop színt, majd megkapja a generált eredmény kódját. A CSS-hez is tartozik.
A PSD exportálása az SVG-re
Ha a Photoshopot képszerkesztőjeként használja a munkájához, néha szükség lehet rá alakítsa át a Photoshop munkaterületen lévő SVG-re, ami nem támogatott formátum a Photoshopban. Töltse le a szkriptet ehhez az eszközhöz, majd másolja át a Adobe Photoshop / előbeállítások / parancsfájlok mappa.
Nevezze át a vektor réteg nevét az SVG kiterjesztéssel (például az 1. réteg réteg1 .vv), és most futtathatja a parancsfájlt Fájl> Scriptek> PS az SVG-re.
SVG szűrők
Tudja-e, hogy SVG-vel olyan effektusokat adhat hozzá, mint a színárnyalat, a telítettség, az elmosódás, a lineáris színbevonat és sok más kép? Itt van egy eszköz megjeleníti ezeket a hatásokat, majd megad egy részletet könnyűvé tenni beágyazza a hatást a projektbe.
SVG Morpheous
SVG Morpheous egy JavaScript könyvtár, amely lehetővé teszi morph egy SVG ikont egy alakról a másikra. Beállíthatja az enyhítő hatást, az átmeneti animációk időtartamát és a forgásirányt is.
Clip útvonal generátor
Az SVG lehetővé teszi, hogy a Kép klipre kattintjon az Alakzattal. Ez nagyon egyszerű, ha az alak négyzet vagy kör alakú. De mi van ha az alak sok ponttal rendelkezik vagy sokszög alakú? Itt kell ezt a Clip Path Generator eszközt használni.
Chartist.js
Chartist.js egy könyvtár rendkívül testreszabható, érzékeny diagramok létrehozása. Az SVG-t használja a diagramok megjelenítéséhez, amelyek szintén SMIL segítségével animálhatók. Ezzel a könyvtárral vonalkódot, kördiagramot, sávdiagramot és más típusú diagramokat hozhat létre, és akár animációt is hozzáadhat hozzájuk.
SVG stroke dash generátor
Ez egy egyszerű eszköz szaggatott vonalak létrehozása SVG-t használva stroke dasharray. Először válasszon ki egy műszerfajtát a listából, majd testreszabja a szélességet, magasságot, forgást vagy színt. Ezután megragadhatja a HTML kódot és a CSS-t, hogy alkalmazza ezt a kötőjelet a projektben.
Módszer Rajzolás: Egyszerű SVG-szerkesztő
A Method Draw egy web-alapú SVG-szerkesztő, egy intuitív kezelőfelület, amely a vászon mindkét oldalán szerszámokkal van ellátva. Rajzokat, alakzatokat, szöveget írhat be, vagy beépített formákat használhat, majd szerkesztheti a rajzolt objektumok tulajdonságait. Exportálja a képet SVG formátumban (SVG base64 formátumban is), vagy közvetlenül a PNG-ben mentse el.
A Flash exportálása animált SVG-re
Annak ellenére, hogy már nem túl népszerű, esély van arra, hogy némelyiknek nehezen hagyja el a Flash-t. Ha igen, akkor kapcsolja ki flash animációját SVG-ként, hogy az új technológiákkal kompatibilis legyen. Ez az eszköz kiterjeszti a Flash alkalmazást, és a CS5, a CS6 és a CC alkalmazásokon is dolgozhat.
Az SVG-be exportálhatja a Shapes, a Bitmaps szimbólumok, a Classic Motion Tweens, a Shape tweens (mások számára vitatható sikert) esetén..
