Jak (a proč) se SVG chystá převzít v roce 2018

/2019-11-08 21:00:22/
Irving
/Grafika/

Rok 2018 bude rokem SVG. Formát obrazového souboru v posledních letech neustále roste v oblibě a používání, ale rok 2018 je skutečným průlomem.

Máte kombinaci uživatelů s displejem s vysokým rozlišením a je třeba poděkovat za rychlé načítání blesku. A zatímco přechod na SVG by mohl znít jako velký problém; to není.

SVG se snadno používá a implementuje a vy nemusíte opravdu měnit existující soubory; stačí přidat nové obrázky jako SVG. Tady je vše, co musíte vědět, pokud jde o SVG.

Prozkoumejte zdroje návrhu

SVG je vyroben pro web

Mozilla to popisuje takto:

SVG je jazyk založený na XML pro popis vektorových obrázků. Jde v podstatě o značkování, jako je HTML, kromě toho, že máte mnoho různých prvků pro definování tvarů, které chcete v obraze zobrazit, a efektů, které chcete na tyto tvary použít. SVG slouží k označení grafiky, nikoli obsahu. Na nejjednodušším konci spektra máte prvky pro vytváření jednoduchých tvarů, jako a. Mezi pokročilejší funkce SVG patří (transformace barev pomocí transformační matice, ) (animace částí vektorové grafiky) a (použití masky na horní část obrázku).

Mezi hlavní výhody SVG pro webové designéry patří schopnost vytvářet jednoduché vykreslování SVG v editoru kódu nebo textu, zatímco složitá grafika může být nakreslena v programu, jako je Adobe Illustrator; Text SVG je přístupný; SVG lze snadno upravovat a skriptovat; a vytváříte s vektorovým formátem, který se vykresluje dobře v jakékoli velikosti. Formáty SVG jsou podporovány moderními prohlížeči, jsou odolné proti budoucnosti a vysoce stlačitelné.

Některé nevýhody spočívají v tom, že navrhování SVG se může komplikovat a zpočátku je obtížnější je vytvořit. Druhým problémem je, že některé degradované prohlížeče prostě nechápou, co jsou.

Potřebujete lepší porozumění SVG? Máme průvodce začátečníkem pro SVG.

Jak designéři používají SVG

Jednou z výhod SVG je to, že s ním můžete dělat spoustu různých věcí. SVG lze použít pro:

Loga
Pozadí, vzory a textury
Animace
Citlivé obrázky
Ikony

Návrháři mohou použít SVG pro jakýkoli prvek v návrhu, kde je použitelný vektorový formát. Může nahradit JPG, PNG a GIF mimo jiné formáty.

Pravidlo vektorové formáty

Je velká šance, že budete používat více vektorových formátů. SVG je nezávislé na rozlišení. A to je obrovský bonus, protože víte, že vaše obrázky budou vypadat skvěle kdekoli.

Obzvláště příjemné na práci s obrázky SVG je to, že nemusíte opravdu měnit svůj pracovní postup, abyste je mohli implementovat. Pokud navrhujete software, jako je Illustrator nebo Sketch, proces - jiný než konečný export - je identický. Jediným úlovkem je, že v Illustratoru pravděpodobně budete chtít proměnit libovolné textové prvky na obrysy, ale mnoho lidí to už dělá.

Při přípravě souborů SVG je třeba mít na paměti jednu klíčovou věc. Chcete-li je udržet co nejmenší, ujistěte se, že jste odstranili všechny nepotřebné věci. (Vymažte tuto kartu!) SVG na webu obsahuje několik skvělých tipů pro kreslení prvků a ukládání souborů SVG nejlepším možným způsobem.

Textový formát je vhodný pro SEO

Použití SVG přichází s trochou bonusu i pro důvtipné designéry vyhledávačů. Protože SVG používá při formátování skutečný text, mohou vyhledávače obrázky lépe číst.

Ano, můžete přidat další informace s dalšími obrázky, ale je zde jen tolik prostoru pro klíčová slova. Pomocí SVG můžete vytvářet obrázky, které více vyhovují vyhledávání, a pouze nahrávat. Google indexuje veškerý obsah SVG, včetně samostatných souborů a kdy jsou soubory SVG vloženy přímo do HTML.

SVG je lehký

Na rozdíl od některých jiných typů souborů založených na vektorech, které se mohou rychle zrychlit, jsou SVG kódem. Kód je rychlý. Je to tak jednoduché. No ... skoro.

Pokud jde o ty fantastické vektorové kresby, které jste uložili jako SVG, zkontrolujte velikost souborů, než se dostanete příliš daleko. Zatímco formáty PNG mohou při přidání průhlednosti růst téměř exponenciálně, SVG mají tendenci růst na základě počtu cest a výplní v obraze.

Pokud je SVG obrovský, zvažte jeho export a JPG nebo PNG. (I když se to zdá protichůdné. Realita je taková, že většina návrhářů bude i nadále používat kombinaci typů souborů s obrázky; očekávejte, že použijete více SVG, než jste měli v minulosti.)

Úpravy jsou snadné

Pokud jste zvyklí kreslit ikony nebo loga nebo cokoli jiného v softwaru pro kreslení vektorů, nic o procesu úprav se za vás nezmění.

Ale pokud píšete SVG, jste na lahůdce. Stačí změnit slovo nebo souřadnice nebo barvu v textovém editoru a rozmachu, změna se provede. Je obtížné usnadnit úpravy.

Vytvářejte statické nebo animované obrázky pomocí SVG

Na rozdíl od většiny ostatních obrazových formátů, které vám umožňují mít statický nebo pohyblivý obraz, SVG to umožňuje. Můžete vytvořit statický obrázek nebo animaci. A všechno funguje skoro stejně. (Tento šikovný příklad je návod, jak animovat prvek podél cesty SVG!)

Tyto malé výhody pomáhají posunout SVG do popředí myslí designérů. Nemusíte se učit nový nástroj nebo techniku; s SVG již máte k dispozici vše, co potřebujete.

Závěr

Tady je velký důvod, že rok 2018 bude rokem, kdy začne převzít SVG: je to praktické.

Každý, kdo používá displeje s vysokým rozlišením, jsou vektorové formáty opravdu tou správnou cestou. Všechno se bezchybně přizpůsobí a nemusíte se starat o pixelaci. SVG vytvářejí skvělá loga (statická nebo citlivá), grafy a pozadí, ikony a malé obrázky a animace. Soubory jsou malé a rychle se načítají, a pokud jde o implementaci SVG do designu vašich webových stránek, neexistuje velká křivka učení.

Nyní můžete doslova začít používat obrázky SVG.