Při tvorbě webu musí webdesignér počítat čtyři hlavní body přemýšlet o rozložení a vizuálním designu webu, text, obrázky, barvy a fonty zaměstnanci.
Z těchto čtyř bodů budeme v tomto příspěvku klást největší důraz na obrázky, protože budeme hovořit o jak vytvořit svg soubory protože je velmi důležité vzít v úvahu kvalitu obrázků, se kterými pracujete.
Léčba pomocí souborů SVG, se zvyšuje o profesionály a ne tak profesionály ve světě designu.
Co je soubor SVG?
SVG je anglická zkratka pro Scalabe Vector Graphics, ve španělštině Scalable Vector Graphics. Jde o a otevřený a bezplatný formát pomocí kterého lze vytvářet 2D grafiku, dvourozměrné.
Na rozdíl od jiných formátů obrázků, jako je JPG nebo PNG, SVG je škálovatelný formát, bez ohledu na to, jak moc chcete zvětšit jeho velikost, protože kvalita obrázku zůstane zachována. Je to jeden z nejpoužívanějších formátů na webových stránkách pro umístění grafiky nebo vektorových obrázků.
Proč bychom měli používat SVG?
U tohoto typu formátu si vektorové obrázky zachovají vysokou kvalitu bez ohledu na jejich velikost a rozlišení. Naopak obrázky složené z bitmap složených z pixelů při změně velikosti ztrácejí na kvalitě. Formát SVG je definován svou lehkostí a všestranností.
Dalším bodem ve prospěch použití tohoto formátu je jeho malá velikost, tedy díky tomu zvyšuje rychlost načítání stránek tam, kde jsou. Tyto obrázky jsou vytvářeny prohlížečem, což pomáhá snižovat zatížení a spotřebu serveru.
Navíc mohou vytvářet animované obrázky SVG kterým dodáváme našemu webu atmosféru blízkosti a přitahujeme pozornost návštěvníků, kteří je navštíví.
SVG je otevřený formát, tj. mohou projít vylepšeními a aktualizacemi. Soubory SVG lze navíc upravovat pomocí programů pro úpravu vektorů, například Adobe Illustartor, aniž by došlo ke ztrátě kvality zobrazení, lze je prohlížet na jakémkoli zařízení. Umožňuje nám to také tisknout bez ztráty kvality.
Jak snadno vytvářet soubory SVG
Snad nejjednodušší způsob, jak vytvořit soubory SVG, pokud je znáte, je prostřednictvím programu pro grafický design, jako je mimo jiné Illustrator, Corel Draw.
Když se zaměříme na program Illustrator, když budeme používat formát SVG, musíme vzít v úvahu, zda jsme použili přechody nebo jiné efekty, jako je umělecký efekt, rozostření, štětce, pixely atd. protože jsou rastrovány při uložení ve formátu SVG. Doporučuje se použít efekty filtrů SVG, přidat efekty, aby nemohly být později rastrovány.
Další rada, kterou vám dáváme, je použít jednoduché symboly a cesty v ilustracích pro lepší výkon uvedeného formátu. Vyhněte se používání štětců s velkým množstvím trasování, protože to generuje vyšší zatížení dat.
Chcete-li v tomto programu vytvořit soubor SVG, První věc, kterou musíme mít otevřeno, je prázdné plátno, kde budeme pracovat na našem nápadu.
Jakmile je naše práce hotová, přejdeme na panel nástrojů, který je zobrazen nad programem, a vybereme možnost soubor, uložit jako a objeví se vyskakovací obrazovka, kde nám řekne, že máme soubor pojmenovat a uveďte formát, ve kterém jej chceme uložit. V této poslední části musíme označit volbu SVG.
Při výběru typu SVG se zobrazí dialogové okno s různými možnostmi, které je třeba vzít v úvahu.
Obecně platí, že v prvním poli, které se objeví v tabulce, se objeví profil SVG 1.1. V následujícím nám dává možnost vybrat si zdroje, ve kterých nám dávají výchozí je text označený v SVG a podmnožina jako žádný. V našem případě tato práce nemá písma, pokud by ano, musela by se volba podmnožin změnit z žádné na všechny piktogramy.
Následující část je velmi důležitá, pokud poukážeme na možnost vložit, snímky kompozice budou začleněny do souboru, což způsobí jeho nabírání na váze, pokud použijeme hodně bitmapových obrázků. Pokud na druhou stranu označíme možnost odkazovat, musíme být opatrní, pokud je budeme na webu používat, protože musíme zahrnout soubory našich obrázků a také, což je velmi důležité, udržovat jejich cesta. Výhodou této možnosti je, že soubory budou vážit mnohem méně.
V sekci pokročilé možnosti najdeme možnost SVG, tato možnost bude indikovat, jak je soubor uvnitř, tedy kód naší práce. Tato možnost je nezbytná, pokud chcete přidat svůj soubor SVG, například do svého osobního WordPress, stačí zkopírovat kód a přidat jej přímo ve vašem WordPress HTML editoru.
Poslední rada, kterou vám dáváme, je, že při ukládání ve formátu SVG, mějte na paměti, že pokud pracujete s různými kreslicími plátny, bude zachováno pouze aktivní kreslicí plátno.
Pokud chceme jít dále a aplikovat efekty SVG na naši ilustraci, Illustrator nám nabízí sadu efektů. K tomu budeme muset vybrat objekt nebo skupinu. Chcete-li použít efekt, musíme vybrat okno efektů, filtry SVG a použít je.
Při aplikaci SVG filtru nám návrhový program ukáže okno kde Zobrazí se seznam filtrů, které lze použít, jakmile jeden vybereme, Illustrator nám ukáže, jak vypadá, ale v rastrované verzi.
Jak jste viděli, Formát SVG byl revolucí. Díky svému potenciálu a kvalitě které nabízí, činí webové stránky, které považujeme za mnohem atraktivnější, aniž by byl obětován výkon, pokud správně využívají uvedený formát. SVG se stalo dokonalým spojením mezi světem designu a webovým vývojem.