20 Užitečné SVG nástroje pro lepší grafiku

SVG získává popularitu ve web designu v těchto dnech a můžete použít nástroje jako Illustrator nebo Inkscape k vytvoření SVG grafiky. Ale pokud jde o web design, měli bychom vždy optimalizovat pro lehčí výsledky.

Tady 20 nástrojů, které můžete použít pro práci s SVG rychle a efektivně. Máme většinou online nástroje, které mohou pomoci při optimalizaci, konverzi, tvorbě vzorů a další.

Interaktivní SVG souřadnicový systém

Když pracujete s SVG, nemůžete opustit jeho souřadnici. To je skvělý interaktivní nástroj od Sara Souiden, která vám pomůže naučit, jak SVG koordinuje práci. Za použití viewBox a preserveAspectRatio na SVG, vedeném oranžovými a fialovými čarami a praktickým pravítkem, můžete hrát, když se učíte, jak funkce SVG funguje.

b64

b64 je jednoduchý nástroj optimalizovat obrázky a poté je převést do formátu base64. Můžete vynechat své SVG obrázky (jiné formáty, jako je JPG a PNG) a poté CSS s podkladem v pozadí64..

SVGO

SVG, který je exportován, může obsahovat zbytečné informace které lze odstranit bez ovlivnění výsledku vykreslování. Pokud chceš odstranit metadata editoru, komentáře nebo skryté elementy, můžete použít SVGO.

Můžete zavést SVGO přes npm, $ [sudo] npm install -g svgo nebo použijte verzi GUI, která nabízí přetažení pro optimalizaci SVG.

SVG OMG

SVG OMG změní příkazový řádek SVGO (předchozí nástroj) do Verze GUI intuitivnější a snadno použitelné. Prostě přepíná tlačítka aktivovat nebo deaktivovat jednotlivé funkce. Nakonec můžete výsledek získat jako obrazové soubory a kód.

SVG

Když pracujete na Illustratoru, exportovaný SVG obsahuje některé informace, které nejsou nutné. S tímto nástrojem budete Získejte optimalizovanou verzi exportovaného SVG přímo z pracovního prostoru aplikace Illustrator. Tento nástroj přidává panel s některými možnostmi pro optimalizaci SVG. SVG Now můžete získat ze stránky Creative Cloud Add-ons.

SVG na PNG převodník

Chtít export SVG souborů do PNG formuláře? Bez otevření aplikace, jako je Illustrator, aby tak učinily? Použijte tento nástroj SVG to PNG Converter pro získání obrazových výstupů ve formátu PNG a také URI dat PNG Base64, pokud to potřebujete.

Cirkus SVG

Pokud si myslíte, že animace zavaděče jsou v pohodě, můžete je snadno vytvořit pomocí SVG Cirkus SVG. Nástroje vám umožní vytvořte si vlastní zavaděč, spinner nebo něco podobného pomocí smyčkové animace. Nastavte „Actor“, pozici, velikost, barvu a další z panelu a poté export, abyste získali výsledky.

SVG Sprite

SVG Sprite je modul Node.js, který optimalizuje spoustu SVG souborů, a bere je do SVG sprite-typů včetně tradičních skřítků CSS pro obrázky pozadí a / nebo popředí, svazky SVG a další.

Kvazi

S kvazi můžete generovat Quasicrystal obrazy jako to, co vidíte níže. Tento generátor je experimentální, ale výsledky jsou rozhodně cool. Můžete si přehrát změnou hodnoty možností a poté stáhnout výsledky tlačítkem 'Uložit SVG'.

Obyčejný vzor

Vytváření vzorů pomocí SVG nikdy nebylo snazší ani zábavnější. Nahrajte svůj obrázek, zmenšete nebo změňte mezeru, otáčejte a přetírejte, dokud nedostanete krásný vzor. Výsledek si můžete prohlédnout před jeho stažením.

Generátor Trianglify

Vytvořte krásné geometrické vzory SVG s Generátor Trianglify. Můžete nastavit barevnou náhodnost / variantu, velikost granulity a vybrat barevnou paletu, se kterou chcete pracovat. Tento nástroj je GUI verze Trianglify.

Přechod SVG

Víte, že s CSS můžete dělat přechody, ale věděli jste, že s SVG můžete dělat totéž? Nejjednodušší způsob generovat gradient na SVG je pomocí tohoto nástroje. Stačí zadat barvu startu a stopu a pak dostanete kód pro vygenerovaný výsledek. Zahrnuta je také záloha na CSS.

Export PSD do SVG

Pokud používáte Photoshop jako editor obrázků pro vaši práci, někdy budete potřebovat převeďte svůj design na pracovní plochu Photoshopu do SVG, což je nepodporovaný formát ve Photoshopu. Stáhněte si skript do tohoto nástroje a poté jej zkopírujte do Adobe Photoshop / přednastavení / skripty složky.

Přejmenujte název vektorové vrstvy s příponou SVG (např. Layer1 se stane layer1.svg) a nyní můžete skript spustit z Soubor> Skripty> PS na SVG.

SVG filtry

Víte, že s SVG můžete přidat efekty, jako je odstín, sytost, rozmazání, lineární překrytí barev a mnoho dalších obrázků? Zde je nástroj, který vizualizuje tyto efekty, pak vám poskytne úryvek aby bylo snadné vložit efekt do vašeho projektu.

SVG Morpheous

SVG Morpheous je knihovna JavaScriptu, která vám umožní morph SVG ikonu z jednoho tvaru do druhého. Můžete nastavit efekt uvolnění, dobu trvání animací přechodu a také směr otáčení.

Generátor cesty klipu

SVG umožňuje kliknout na obrazový klip pomocí Shape. To je velmi snadné, pokud je tvar ve tvaru čtverce nebo kruhu. Ale co jestliže tvar je jeden s mnoha body nebo je polygonální tvar? To je místo, kde potřebujete tento nástroj Generátor klipů.

Chartist.js

Chartist.js je knihovna vytvářet vysoce přizpůsobitelné citlivé grafy. Využívá SVG k zobrazení grafů, které lze také animovat pomocí SMIL. S touto knihovnou můžete vytvořit řádkový graf, výsečový graf, sloupcový graf a další typy grafů a dokonce k nim přidat animaci.

Generátor zdvihu SVG

To je jednoduchý nástroj generovat přerušované čáry s využitím SVG mrtvice-pomlčka. Nejprve vyberte jeden typ pomlčky ze seznamu a poté jej upravte podle šířky, výšky, rotace nebo barvy. Poté můžete chytit HTML kód a CSS a použít tuto pomlčku ve vašem projektu.

Metoda Kreslení: Jednoduchý editor SVG

Metoda Draw je webový SVG editor, s intuitivní rozhraní, které přichází s nástroji na obou stranách plátna. Můžete kreslit čáry, tvary, vkládat text nebo používat vestavěné tvary a upravovat vlastnosti nakreslených objektů. Exportujte obraz ve formátu SVG (také ve formátu SVG base64) nebo uložte přímo do PNG.

Export Flash do animovaného SVG

Ačkoli to už není příliš populární, je tu šance, že někteří z vás mají problém s Flashem. Pokud ano, můžete otočte svou flash animaci do SVG, aby byla kompatibilní s novějšími technologiemi. Tento nástroj tvoří rozšíření aplikace Flash a může pracovat na CS5, CS6 a CC.

Můžete exportovat do SVG, pokud jde o tvary, bitmapy symboly, klasický pohyb tweens, tvar doplnění (pro ostatní, tam je sporný úspěch).