Jak exportovat SVG vzory

Kdysi bývalo to, že byste mohli vymazat dlaždicový obrázek jako gif nebo jpg na 72dpi a dlaždit ho pomocí CSS. Je to běžná praxe mezi webovými designéry a je už po mnoho let; je to rychlý a snadný způsob přidání vzoru nebo textury k vaší práci. Pak tyto otravné body nad Apple vydaly displeje sítnice a než jsme to věděli pixel nebyl pixel déle. Najednou se tyto milované vzory staly historií.

SVG (Scaleable Vector Graphics) se rychle stávají standardem pro ostré grafiky na webu. Vyřeší problém, že musí vytvářet samostatné obrazové soubory, které vyhoví zařízením sítnice. Jsou opravdu zábavné a snadno se vytvářejí a otvírají svět možností ...

Krok 1: Vytvořte vzorek

Existují desítky různých aplikací, které vám umožní navrhnout vzorek SVG. Mým oblíbeným je Illustrator, takže to budu používat.

Otevřete aplikaci Adobe Illustrator a vytvořte nový dokument o rozměrech 300 x 300 pixelů. Potom přejděte na Objekt> Vzor> Vytvořit a vaše plátno se změní. Všimnete si, že ve středu vašeho kreslicího plátna bude modré čtverec. Také bude otevřen panel Pattern Options .

Před začátkem budeme muset provést nepatrnou úpravu. Přejděte do panelu Možnosti vzoru a zrušte zaškrtnutí políčka Přesunout dlaždic s výkresem. (Tato funkce je nepríjemná, protože nebudete moci přesunout nebo umístit svou kresbu do čtverce vzoru, bude se s ní pohybovat, pokud tuto možnost nezrušíte.)

Dále je obloha limit pro typ vzoru, který můžete vytvořit. Ve výchozím nastavení je čtverec vzoru nastaven na hodnotu 100px x 100px. Můžete vytočit libovolnou velikost, kterou chcete. Nechal jsem můj na výchozí.

Dále nakreslete čtverec o rozměrech 50 x 50 pixelů. Zarovnejte ho s horním a pravým okrajem čtverce.

Dále klikněte a podržte myši nad nástrojem Pen . Zobrazí se podřízené nástroje, kde můžete vybrat nástroj Přidat kotevní bod . Odtud přidejte kotevní bod do středu levé a pravé strany náměstí.

Pomocí nástroje přímého výběru vyberte kotevní body (podržte posun a vyberte obě.) Potom z horní nabídky vyberte Objekt> Transformovat> Přesunout.

Přesuňte dva body o 20px doprava a vytvořte druh šipky.

Dále duplikujte tvar jeho přetažením na novou pozici a podržte klávesu alt . (Nebo zkopírujte a vložte, pokud chcete.)

Vyberte nový tvar a přetáhněte jej do levého dolního rohu čtverce vzoru.

Po zvolení tvaru uchopte roh a otočte jej o 180 stupňů. (Podržte stisknuté tlačítko Shift a přesuňte na 180 stupňů.)

Z horní nabídky vyberte objekt> Transformovat> Přesunout a přesunout nový tvar -20px.

Nakonec klepněte na tlačítko Uložit kopii v horní části okna, pojmenujte vzorek a uložte jej, abyste dokončili vzor. Uložit kopii je důležité, pokud ji chcete později upravit. To vás znemožňuje znovu vytvářet.

Krok 2: Exportujte vzorek

Všimnete si, že jakmile opustíte režim vzoru, vzorek se automaticky vybere jako výplň. Vše, co musíte udělat, je nakreslit tvar na kreslicí desce a bude vyplněno vzorem. (Pokud jste z jakéhokoli důvodu změnili vyplnění tvaru, můžete najít vzorek v panelu Vzorník a aplikovat ho jako libovolnou jinou výplní.)

Dále změňte velikost tvary tak, aby pokrývala celou kreslicí desku o rozměrech 300 x 300 pixelů.

Vyberte Soubor> Uložit jako. Uložte soubor jako .svg.

Dále se zobrazí dialogové okno, kde si můžete vybrat z různých formátů a možností SVG. Ujistěte se, že v levém dolním rohu kliknete na další možnosti, abyste viděli všechny dostupné možnosti pro váš soubor SVG.

Typický formát je SVG 1.1, protože je nejčastěji používaným a nejvíce podporovaným SVG formátem. V tomto poli také budete kontrolovat, zda si zachováte schopnost upravit SVG v aplikaci Illustrator nebo povolíte text na cestě, což může být užitečné. Máte možnost použít SVG jako skutečný soubor, nebo můžete kód zkopírovat a vložit jej přímo do html dokumentu. Po dokončení klikněte na tlačítko OK.

Krok 3: Upravte vzor SVG

Otevřete soubor .svg v textovém editoru. Používám Sublime Text, ale můžete používat Poznámkový blok, Dreamweaver nebo jakýkoli kód HTML.

Otevřete stejný soubor v prohlížeči, abyste si mohli prohlédnout změny provedené v kódu.

Existuje několik oblastí, na které se dá zaměřit. Nejprve je třeba upravit hranice souboru SVG tak, aby vyplňoval prohlížeč.

Uvidíte: dole. Namísto toho změňte obě hodnoty o 300 až 100%. Váš kód bude vypadat takto:

Ještě byste si neměli všimnout změny. Mělo by to být ještě čtverec. Proč? Vzhledem k tomu, že pole zobrazení je nastaveno na 300 x 300, což jsou čtvercové kóty. Chcete-li vyplnit šířku a výšku prohlížeče, změňte kód na řádku 4 z viewBox = "0 0 300 300" na viewBox = "0 0 100% 100%" .

Když prohlížeč obnovíme, vzorec vyplní náš prohlížeč od konce do konce. Problém je, co když chcete změnit velikost vzoru? Vrátíte se zpět do Illustratoru a znovu všechno znovu? Ne. To je krása, že Illustrator generuje váš SVG kód. Kód můžete jednoduše upravit. Nemyslete na to jako na čistě grafický soubor. Přemýšlejte o tom jako s kódovým souborem, který můžete manipulovat a ohýbat se svou vůlí.

Chcete-li upravit velikost vzoru, podívejte se na řádku 5. Jednoduše změňte hodnoty šířky a výšky podle toho, co chcete. Doporučil bych, abyste ho drželi v čtvercovém poměru, pokud nechcete zkreslovat vzorek. Když změním hodnoty na 70, vzorek je menší, ale stále vyplňuje šířku a výšku obrazovky.

Pokud se podíváte na kód, uvidíte, že vzor je tvořen mnohoúhelníky. První polygon má výplň "žádný" (který produkuje bílou) a zbytek má hexadecimální hodnoty.

Chcete-li změnit barvy našeho vzoru, stačí, abychom změnili hodnoty výplně.

Pokud jste taková osoba, která ráda kopíruje a vkládá, je zde náš finální kód SVG:

To je úplně platné, ale je to trochu špinavé (díky Illustratoru). Doporučuji vám to optimalizovat před použitím. Existuje mnoho možností optimalizace, ale Peter Collingridge je je jedním z nejlepších, dává nám tento konečný kód:

Závěr

Schopnost exportovat vzory a vzory Illustratoru jako SVG otevírá spoustu možností. Nejenže můžete vytvořit vzorek SVG, můžete soubor upravovat za pár minut, ovládat barvy, velikosti a způsob, jakým je v prohlížeči vykreslen samotný soubor.