Pri tvorbe webu musí webdizajnér brať ohľad štyri hlavné body premýšľanie o rozložení a vizuálnom dizajne webu, text, obrázky, farby a fonty zamestnancov.
Z týchto štyroch bodov budeme v tomto príspevku klásť najväčší dôraz na obrázky, keďže budeme hovoriť o ako vytvoriť súbory svg pretože je veľmi dôležité brať do úvahy kvalitu obrázkov, s ktorými pracujete.
Ošetrenie pomocou súborov SVG, sa zvyšuje o profesionálov a nie takí profesionáli vo svete dizajnu.
Čo je súbor SVG?
SVG je v angličtine skratka pre Scalabe Vector Graphics, v španielčine Scalable Vector Graphics. Ide o a otvorený a bezplatný formát s ktorým vytvoríte 2D grafiku, dva rozmery.
Na rozdiel od iných obrazových formátov, ako sú JPG alebo PNG, SVG je škálovateľný formát, bez ohľadu na to, ako veľmi chcete zväčšiť jeho veľkosť, pretože kvalita obrázka zostane zachovaná. Je to jeden z najpoužívanejších formátov na webových stránkach na umiestnenie grafiky alebo vektorových obrázkov.
Prečo by sme mali používať SVG?
Pri tomto type formátu si vektorové obrázky zachovajú vysokú kvalitu bez ohľadu na ich veľkosť a rozlíšenie. Naopak, obrázky zložené z bitmapy, zložené z pixelov, strácajú na kvalite, ak sa zmení ich veľkosť. Formát SVG je definovaný svojou ľahkosťou a všestrannosťou.
Ďalším bodom v prospech použitia tohto formátu je jeho malá veľkosť, teda vďaka tomu zvyšuje rýchlosť načítania stránok tam, kde sa nachádzajú. Tieto obrázky vytvára prehliadač, čo pomáha znižovať zaťaženie a spotrebu servera.
Navyše môžu vytvárať animované obrázky SVG pomocou ktorých vdýchneme našej webovej stránke atmosféru blízkosti a pritiahneme pozornosť návštevníkov, ktorí ju navštívia.
SVG je otvorený formát, tj môžu prejsť vylepšeniami a aktualizáciami. Okrem toho je možné súbory SVG upravovať pomocou programov na úpravu vektorov, napríklad Adobe Illustartor, bez straty kvality zobrazenia, je možné ich prezerať na akomkoľvek zariadení. Umožňuje nám to tiež tlačiť bez straty kvality.
Ako jednoducho vytvárať súbory SVG
Snáď najjednoduchší spôsob, ako vytvoriť súbory SVG, ak ich poznáte, je pomocou programu na grafický dizajn, ako je napríklad Illustrator, Corel Draw a iné.
Ak sa zameriame na program Illustrator, keď budeme používať formát SVG, musíme vziať do úvahy, či sme použili prechody alebo iné efekty, ako je umelecký efekt, rozostrenie, štetce, pixely atď. pretože sú rastrované pri ukladaní vo formáte súboru SVG. Odporúča sa použiť efekty filtra SVG, pridať efekty, aby ich nebolo možné neskôr rastrovať.
Ďalšia rada, ktorú vám dávame, je použiť jednoduché symboly a cesty v ilustráciách pre lepší výkon uvedeného formátu. Vyhnite sa používaniu štetcov s veľkým množstvom sledovania, pretože to generuje vyššiu dátovú záťaž.
Ak chcete v tomto programe vytvoriť súbor SVG, Prvá vec, ktorú musíme mať otvorené, je prázdne plátno, kde budeme pracovať na našom nápade.
Po dokončení našej práce prejdeme na panel nástrojov, ktorý je zobrazený nad programom, a vyberieme možnosť súbor, uložiť ako a objaví sa kontextová obrazovka, kde nám povie, aby sme súbor pomenovali a uveďte formát, v ktorom ho chceme uložiť. Práve v tejto poslednej časti musíme označiť možnosť SVG.
Pri výbere typu SVG sa zobrazí dialógové okno s rôznymi možnosťami, ktoré je potrebné vziať do úvahy.
Vo všeobecnosti platí, že v prvom poli, ktoré sa zobrazí v tabuľke, sa zobrazí profil SVG 1.1. V nasledujúcom nám dáva možnosť vybrať si zdroje, v ktorých nám dajú predvolene sa použije text označený v SVG a podskupina ako žiadny. V našom prípade táto práca nemá písma, ak by ich mala, musela by sa zmeniť možnosť podmnožín z žiadneho na všetky piktogramy.
Nasledujúca časť je veľmi dôležitá, ak poukážeme na možnosť vložiť, obrázky kompozície sa začlenia do súboru, čo spôsobí jej priberanie, ak použijeme veľa bitmapových obrázkov. Ak na druhej strane označíme možnosť odkazovať, musíme byť opatrní, ak ich budeme používať na webovej stránke, pretože musíme zahrnúť súbory našich obrázkov a tiež, čo je veľmi dôležité, udržiavať ich cesta. Výhodou tejto možnosti je, že súbory budú vážiť oveľa menej.
V sekcii rozšírených možností nájdeme možnosť SVG, táto možnosť bude označovať, ako sa súbor nachádza vo vnútri, teda kód našej práce. Táto možnosť je nevyhnutná, ak chcete pridať svoj SVG súbor, napríklad do svojho osobného WordPress, stačí skopírovať kód a pridať ho priamo do vášho WordPress HTML editora.
Posledná rada, ktorú vám dávame, je, že pri ukladaní vo formáte SVG, majte na pamäti, že ak pracujete s rôznymi kresliacimi plátnami, zachová sa len aktívna kresliaca plátna.
Ak chceme ísť ďalej a aplikovať efekty SVG na našu ilustráciu, Illustrator nám ponúka sadu efektov. Aby sme to dosiahli, budeme musieť vybrať objekt alebo skupinu. Ak chcete použiť efekt, musíme vybrať okno efektov, filtre SVG a použiť ich.
Pri aplikácii SVG filtra nám návrhový program ukáže okno kde Zobrazí sa zoznam filtrov, ktoré je možné použiť, keď jeden vyberieme, Illustrator nám ukáže, ako vyzerá, ale v rastrovanej verzii.
Ako ste videli, Formát SVG bol revolúciou. Vďaka svojmu potenciálu a kvalite ktoré ponúka, robí webové stránky, ktoré považujeme za oveľa atraktívnejšie, bez obetovania výkonu, pokiaľ správne využívajú uvedený formát. SVG sa stalo dokonalým spojením sveta dizajnu a vývoja webu.