Na čo sa používajú súbory SVG?

Súbory Scalable Vector Graphics prešli v posledných rokoch dlhú cestu. No na čo sa používajú v praxi?

Podporujú súbory SVG animácie?

Súbor SVG nepodporuje iba statické obrázky. Pomocou množstva online nástrojov môžete do svojej webovej grafiky pridať aj pohyblivé prvky. Animácie SVG môžu obsahovať relatívne základné prvky, ako napríklad funkciu posúvača, ktorá strieda jednotlivé snímky v infografike. Hýbať sa môžu aj ilustrácie, napríklad v podobe pohyblivých ručičiek na hodinách.

Ako spoznám súbor SVG?

Súbor SVG najjednoduchšie odhalíte vďaka jeho prípone. Medzi súbormi sa zobrazuje ako .svg. Vektorové obrázky, ako napríklad súbory SVG, odhalíte aj vtedy, keď ich na obrazovke počítača zväčšíte o 200 a viac percent. Vektorový obrázok si zachová svoje čisté línie a jednoliate farby a nie je pixelovaný ani rozmazaný.

Súbory SVG sa dajú používať iba na internete?

Hoci sa súbory SVG používajú najmä na webe, dokážu fungovať aj mimo online sveta. Keďže si zachovávajú tvar aj po zmene originálnych rozmerov, súbory SVG môžete používať ako šablóny na tlač dizajnov na oblečenie, napríklad tričiek. Súbor JPEG pozostáva z veľkého množstva pixelov, takže línie dizajnu by nezostali také čisté.

Aké veľké sú súbory SVG?

Veľkosť SVG súborov závisí od toho, aký veľký objem obrázkových údajov obsahujú. Väčšinou je však menšia než veľkosť ostatných typov súborov. Komplexné grafiky s množstvom ciest a kotviacich bodov budú zaberať viac ukladacieho priestoru než jednoduchšie a čistejšie dizajny. Skúste minimalizovať počet komplexných prvkov vo svojom súbore.

Aký je rozdiel medzi súbormi SVG a PNG?

V skratke, súbory SVG sú vektorové súbory a súbory PNG sú rastrové súbory. Ak súbor PNG príliš zväčšíte alebo zmenšíte, stane sa rozmazaným a pixelovaným. Keďže súbory SVG neobsahujú žiadne pixely, ich rozlíšenie zostáva stále rovnaké. Súbory PNG navyše nepodporujú animácie.

Súbory SVG

Formát súborov SVG predstavuje populárny nástroj na zobrazovanie dvojrozmerných grafík, grafov a ilustrácií na webových lokalitách. A keďže ide o vektorové súbory, dajú sa zväčšiť či zmenšiť bez straty rozlíšenia. Prečítajte si viac o základných funkciách obrázkov SVG, ich výhodách a nevýhodách, ako aj o tom, ako sa formát SVG menil v priebehu času.

Čo sa dozviete

Čo je súbor SVG?

Scalable Vector Graphics (SVG) predstavuje vektorový formát súborov optimalizovaný pre web. Vektorové súbory na rozdiel od rastrových súborov založených na pixeloch, ako napríklad súbory JPEG, ukladajú obrázky pomocou matematických vzorcov vychádzajúcich z bodov a línií na mriežke. Veľkosť vektorových súborov, akými sú napríklad súbory SVG, sa teda dá v značnej miere meniť bez straty kvality. Vďaka tomu sa skvele hodia na tvorbu log a komplexných online grafík.

Súbory SVG sú medzi web dizajnérmi veľmi obľúbené, a to nielen vďaka svojej schopnosti meniť veľkosť. Súbory SVG sú napísané v kóde XML, čo znamená, že textové informácie ukladajú ako skutočný text, a nie tvary. Vďaka tomu môžu vyhľadávacie nástroje ako Google čítať v grafikách SVG kľúčové slová a webová lokalita sa potenciálne môže zobraziť vyššie vo výsledkoch vyhľadávania.

Súbor SVG jednoducho odhalíte vďaka prípone .svg.

História súboru SVG

V roku 1994 holandský softvérový inžinier Martijn Koster prvýkrát navrhol formát súborov SVG.

História súboru SVG sa začala písať koncom 90. rokov 20. storočia, keď konzorcium World Wide Web (W3C) vyzvalo na podávanie návrhov od vývojárov na nový typ formátu vektorovej grafiky. Bolo prijatých šesť konkurenčných návrhov, ktoré pomohli pri tvorbe formátu konzorcia W3C, z ktorého sa neskôr stal formát SVG.

Chvíľu trvalo, kým sa súbory SVG rozšírili. Veľmi sa nepoužívali až do roku 2017, keď ľudia objavili výhody použitia súborov SVG v moderných webových prehliadačoch. Súbory SVG sa v súčasnosti vo veľkej miere používajú ako 2D obrázky na webových lokalitách, pretože s nimi dokáže ľahko pracovať väčšina prehliadačov a aplikácií na tvorbu vektorových súborov.

Výhody a nevýhody súborov SVG

Kým začnete ukladať svoje obrázky vo formáte súborov SVG, prečítajte si o ich výhodách a nevýhodách.

Výhody súborov SVG

Vektorové grafiky, ako napríklad SVG, si na rozdiel od rastrových súborov, ktoré sú zložené z pixelov, stále zachovávajú svoje rozlíšenie, a to bez ohľadu na to, aké veľké či malé ich vytvoríte. Nemusíte sa báť, že by obrázky SVG po zmene veľkosti alebo pri použití v niektorých prehliadačoch stratili svoju kvalitu.
Základné súbory SVG majú často menšiu veľkosť než rastrové obrázky, ktoré pozostávajú z množstva farebných pixelov a nepoužívajú matematické algoritmy ako súbory SVG.
Keďže sa v súboroch SVG text zobrazuje ako text (a nie ako dizajn), čítačky obrazovky môžu skenovať jednotlivé slová uložené v obrázkoch SVG. To sa hodí najmä ľuďom, ktorí potrebujú pomoc s čítaním webových stránok. Vyhľadávacie nástroje môžu tiež čítať a indexovať text uložený v obrázku SVG.
Formát SVG podporuje interaktivitu prostredníctvom skriptovacích jazykov, ako je JavaScript, čo umožňuje dynamickú a pútavú grafiku.
SVG je jazyk XML, ktorý umožňuje jednoduchú manipuláciu a integráciu s inými webovými technológiami.

Nevýhody súborov SVG

Súbory SVG sa skvele hodia na tvorbu webových grafík, akými sú napríklad logá, ilustrácie a grafy. Keďže však nepozostávajú z pixelov, zobrazovanie digitálnych fotografií vo vysokej kvalite je náročné. Na zobrazovanie detailných fotografií sa hodia skôr súbory JPEG.
Obrázky SVG podporujú iba moderné prehliadače. Používanie súborov SVG v prehliadači Internet Explorer 8 alebo v iných starších prehliadačoch môže byť problematické.
Ak ste sa s formátom súborov obrázkov SVG ešte nestretli, môžete mať problém s pochopením kódu, ktorý sa v nich nachádza.

Otvorenie súboru SVG

V súčasnosti môžete súbory SVG otvoriť vo väčšine najrozšírenejších prehliadačov ako Chrome, Edge, Safari a Firefox, a to bez ohľadu na to, či používate Mac alebo Windows. Stačí otvoriť požadovaný prehliadač a kliknúť na File (Súbor)

Open (Otvoriť) a vybrať súbor, ktorý chcete zobraziť. Daný súbor sa následne otvorí v prehliadači.

Ak chcete obrázok SVG otvoriť v programe vo svojom počítači, je to rovnako jednoduché. Keď dvakrát kliknite na názov súboru, zobrazí sa zoznam programov, v ktorých ho môžete otvoriť, prípadne sa súbor automaticky otvorí v kompatibilnom programe.

Vytvorenie a úprava súboru SVG

Keď používate Adobe Photoshop, postupujte podľa týchto krokov:

Po dokončení obrázka v aplikácii Photoshop kliknite na File (Súbor) > Export (Exportovať) > Export As (Exportovať ako).
V zobrazenom okne kliknite na rozbaľovaciu ponuku Format (Formát) a potom vyberte SVG.
Vyberte Export All (Exportovať všetko) a súbor uložte.

Užitočná poznámka: Keďže je aplikácia Photoshop určená na prácu s rastrovou grafikou, mnoho ľudí súbory SVG radšej vytvára a upravuje v aplikácii Adobe Illustrator, ktorá je určená na prácu s vektorovou grafikou.

Vytvorenie súboru SVG v aplikácii Illustrator

Keď používate Adobe Illustrator, postupujte podľa týchto krokov:

Po zostavení predlohy v aplikácii Illustrator výberom textu vytvorte obrysy. Tým sa vyhnete problémom s náhradou písma pri zobrazovaní predlohy na iných počítačoch. Vyberte Type (Typ) – Create Outlines (Vytvoriť obrysy).
V ponuke Select File (Vybrať súbor) > Save As (Uložiť ako) uložte súbor. V zobrazenom okne kliknite na rozbaľovaciu ponuku Format (Formát) a potom vyberte SVG.
Upravený súbor SVG môžete tiež exportovať pomocou ponuky File (Súbor) > Export (Exportovať) > Export As (Exportovať ako) a výberom možnosti SVG ako formátu. Táto možnosť vám umožní upraviť nastavenia exportu, ako sú presnosť a kompatibilita.

Úprava súboru SVG v aplikácii Illustrator

Vyberte súbor SVG a otvorte ho v aplikácii Illustrator. Prípadne ho môžete vložiť do existujúceho dokumentu Illustrator pomocou ponuky File (Súbor) > Place (Umiestniť).
Nástrojom výberu (alebo nástrojom priameho výberu) vyberte jednotlivé cesty, tvary alebo skupiny v rámci súboru SVG. Môžete im potom meniť veľkosť, tvarovať ich, transformovať, upravovať cesty, pridávať farby a efekty.