20 Užitočné nástroje SVG pre lepšiu grafiku

SVG sa v dnešnej dobe získava popularitou vo webovom dizajne a môžete použiť nástroje ako Illustrator alebo Inkscape na vytváranie grafiky SVG. Ale pokiaľ ide o dizajn webových stránok, mali by sme vždy optimalizovať pre ľahšie výsledky.

Tu je 20 nástrojov, ktoré môžete použiť na prácu so SVG rýchlo a efektívne. Máme väčšinou on-line nástroje, ktoré môžu pomôcť pri optimalizácii, konverzii, vytváraní vzorov atď.

Interaktívny súradnicový systém SVG

Pri práci so SVG nemôžete opustiť svoju súradnicu. Je to skvelý interaktívny nástroj od Sary Souidenovej, ktorý vám pomôže zistite, ako fungujú súradnice SVG. Použitie viewBox a preserveAspectRatio na SVG, vedené oranžovými a fialovými líniami a šikovným pravítkom, môžete hrať, kým sa učíte ako fungujú súradnice SVG.

B64

B64 je jednoduchý nástroj optimalizujte obrázky a potom ich preveďte do formátu base64. Môžete pustiť svoje SVG obrázky (iné formáty ako JPG a PNG pracovať taky) a potom si CSS s base64 base-image ako výsledok.

SVGO

Exportovaný SVG môže obsahovať zbytočné informácie ktoré je možné odstrániť bez ovplyvnenia výsledku vykresľovania. Ak chceš odstrániť metadáta editora, komentáre alebo skryté prvky, môžete použiť SVGO.

SVGO môžete zaviesť cez npm, $ [sudo] npm nainštalovať -g svgo alebo použite verziu grafického rozhrania, ktorá ponúka drag and drop na spracovanie optimalizácie SVG.

SVG OMG

SVG OMG prepne príkazový riadok SVGO (predchádzajúci nástroj) do a GUI verzia ktorý je intuitívnejší a ľahko sa používa. proste prepínať tlačidlami ak chcete aktivovať alebo deaktivovať každú funkciu. Nakoniec môžete získať výsledok ako súbory obrázkov aj kód.

SVG Teraz

Pri práci s aplikáciou Illustrator obsahuje exportovaný SVG nejaké informácie, ktoré nie sú potrebné. Pomocou tohto nástroja budete získate optimalizovanú verziu vášho exportovaného SVG priamo z pracovného priestoru aplikácie Illustrator. Tento nástroj pridá panel s niektorými možnosťami na optimalizáciu SVG. SVG Now môžete získať z doplnku Creative Cloud Add-ons.

Prevodník SVG na PNG

Chcieť exportovať súbory SVG do formátu PNG? Bez otvorenia aplikácií, ako je Illustrator, aby ste tak urobili? Použite tento nástroj SVG na konverziu PNG na získanie obrázkových výstupov vo formáte PNG a tiež URI PN6 Base64, ak ho potrebujete.

SVG Circus

Ak si myslíte, že animátory nakladačov sú v pohode, teraz ich môžete ľahko vytvoriť použitím SVG SVG Circus. Nástroje vám umožňujú vytvorte svoj vlastný nakladač, rozmetávač alebo niečo podobné pomocou animovanej klipy. Nastavte "Actor", pozíciu, veľkosť, farbu a ostatné z panelu a potom exportujte, aby ste získali výsledky.

SVG Sprite

SVG Sprite je modul Node.js, ktorý optimalizuje veľa súborov SVG, a pečie ich do typov SVG sprite vrátane tradičných skriptov CSS pre pozadie a / alebo obrázky v popredí, SVG stohy a ďalšie.

quasi

S kvázi môžete generovať obrazy Quasicrystal ako to vidíte nižšie. Tento generátor je experimentálny, ale výsledky sú rozhodne chladné. Môžete si prehrať zmenou hodnoty možností a potom stiahnuť výsledky pomocou tlačidla 'Uložiť SVG'.

Plain Pattern

Vytváranie vzorov pomocou SVG nikdy nebolo jednoduchšie ani zábavnejšie. Odovzdajte svoj obrázok, zmenšite mierku alebo zmenu medzery, otočte a prefarbujte, kým nedosiahnete krásny vzor. Pred stiahnutím si môžete prezrieť výsledok.

Trianglify Generator

Vytvorte krásne geometrické vzory SVG s Trianglify Generator. Môžete nastaviť farebnú náhodnosť / variantu, veľkosť zrnitosti a vybrať farebnú paletu, s ktorou chcete pracovať. Tento nástroj je GUI verzia Trianglify.

SVG Gradient

Viete, že môžete vytvárať gradienty s CSS, ale viete, že môžete urobiť to isté s SVG? Najjednoduchší spôsob generovať gradient na SVG je pomocou tohto nástroja. Jednoducho zadajte štart a stop farbu potom dostanete kód pre vygenerovaný výsledok. Záloha na CSS je tiež zahrnutá.

Export PSD do SVG

Ak používate Photoshop ako editor obrázkov pre vašu prácu, niekedy budete potrebovať preveďte svoj dizajn na pracovnom priestore Photoshopu do SVG, čo je nepodporovaný formát vo Photoshope. Stiahnite si skript do tohto nástroja a potom skopírujte súbor Adobe Photoshop / predvoľby / skripty zložka.

Premenujte názov vektorovej vrstvy s rozšírením SVG (napr. Layer1 sa stane layer1.svg) a teraz môžete spustiť skript z Súbor> Skripty> PS na SVG.

SVG filtre

Viete, že s programom SVG môžete pridávať efekty, ako sú odtieň, sýtosť, rozmazanie, lineárne prekrytie farieb a mnohé ďalšie obrázky? Tu je nástroj, ktorý zobrazuje tieto efekty a potom vám dáva úryvok aby bolo ľahké vložte efekt do vášho projektu.

SVG Morpheous

SVG Morpheous je knižnica JavaScript, ktorá vám umožňuje morph a ikonu SVG z jedného tvaru do druhého. Môžete nastaviť efekt uvoľnenia, trvanie prechodových animácií a tiež smer otáčania.

Generátor klipovej dráhy

SVG vám umožňuje kliknúť na obrázok s Tvarom. To je pomerne jednoduché, ak je tvar v tvare štvorca alebo kruhu. Ale čo ak je tvar s mnohými bodmi alebo je polygonálny tvar? Tu potrebujete nástroj Clip Path Generator.

Chartist.js

Chartist.js je knižnica pre vytvorte vysoko prispôsobiteľné odpovedajúce grafy. Používa SVG na zobrazenie grafov, ktoré môžu byť tiež animované pomocou SMIL. Pomocou tejto knižnice môžete vytvárať graf, graf, graf a iné typy grafov a dokonca pridávať do nich animácie.

SVG generátor pomlčka

Je to jednoduchý nástroj vytvárajte prerušované čiary pomocou SVG zdvihu dasharray. Najprv vyberte zo zoznamu jeden typ pomlčky a prispôsobte ho z hľadiska šírky, výšky, rotácie alebo farby. Potom môžete chytiť kód HTML a CSS, aby ste použili túto pomlčku v projekte.

Metóda Draw: Jednoduchý editor SVG

Metóda Draw je editor SVG založený na webe intuitívne rozhranie, ktoré sa dodáva s nástrojmi na oboch stranách plátna. Môžete nakresliť čiary, tvary, vstupný text alebo použiť vstavané tvary a upraviť vlastnosti nakreslených objektov. Exportujte obrázok vo formáte SVG (aj vo formáte SVG base64) alebo uložte priamo do formátu PNG.

Exportujte do animovaného SVG Flash

Hoci to už nie je veľmi populárne, existuje šanca, že niektorí z vás majú ťažké nechať Flash. Ak áno, môžete premeniť animáciu blesku na SVG, aby ju fungovala kompatibilne s novšími technológiami. Tento nástroj tvorí rozšírenie aplikácie Flash a môže pracovať na CS5, CS6 a CC.

Môžete exportovať do formátu SVG, pokiaľ ide o tvary, bitmapy, klasické pohybové tweensy, tvarové tweens (pre ostatných je to nesporný úspech).