25: Ruční optimalizace SVG v Illustratoru - Triky CSS

Anonim

U tohoto videa bylo video odstraněno. Jednoho dne to znovu natočím. Pokud to čtete a já jsem to ještě neudělal, neváhejte mě kontaktovat a vyrušit mě.

Někdy SVG, který chcete použít, vypadá v Illustratoru naprosto dobře, ale není to tak, jak byste ho chtěli použít na webu.

Jednou z věcí, na kterou se v tomto videu díváme, je jednoduchý tvar, který vypadá, jako by to byl jediný tvar, ale ve skutečnosti jsou to čtyři tvary, které sedí na sebe. Abychom to zjednodušili, jednoduše vybereme všechny tvary a pomocí nástrojů Pathfinder v Illustratoru je spojíme do jednoho tvaru. Můžeme vidět, že se to okamžitě projevilo v kódu. Někdy je trochu zábavné mít soubor SVG otevřený jak v Illustratoru, tak v editoru kódu, takže když jej uložíte, uvidíte, co to s kódem dělá.

Pathfinder je skvělý pro manuální optimalizaci tvarů - stojí za to vědět, co tato tlačítka dělají - a co dělají se stisknutou klávesou možností.

Velikost souboru SVG je do značné míry určena tím, kolik bodů se v obrazcích děje. Existují i ​​další faktory, ale to je ta největší věc. Další věcí, na kterou se v tomto videu díváme, je použití funkce Illustrators Simplify Path ke snížení počtu bodů u některých tvarů textur, které zmenší velikost souboru.

Další věc, kterou je třeba vědět: složené cesty mohou být užitečné. Dva tvary, které jsou od sebe zcela oddělené, mohou být stále jednou cestou. Jako, doslova jeden. Syntaxe umožňuje v podstatě „zvednout pero, přesunout ho někam jinam, nakreslit něco nového“. Takže když v Illustratoru vytvoříte složenou cestu (např. Více nezávislých tvarů, Object> Compound Path> Make), tak to bude vypadat. Může vést ke zjednodušenému / optimalizovanému výstupu SVG.