Súbory SVG

Čo sa dozviete

• Čo je súbor SVG?
  
• História súboru SVG
  
• Na čo sa používajú súbory SVG?
  
• Výhody a nevýhody súborov SVG
  
• Otvorenie súboru SVG
  
• Vytvorenie a úprava súboru SVG
  
• Súbory SVG: najčastejšie otázky

Č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 nie sú u web dizajnérov také obľúbené iba pre ich schopnosť 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

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, kedy ľ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.

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?

Ikony a logá na webových lokalitách

Dizajnéri súbory SVG často používajú na zobrazovanie log spoločnosti a ikon, napríklad tlačidiel, na webových lokalitách. Vďaka tomu, že veľkosť tohto typu súboru sa dá zväčšovať alebo zmenšovať bez straty kvality, dané súbory sa skvele hodia na tvorbu grafík, ktoré sa majú zobrazovať na viacerých miestach a v rôznych veľkostiach.

Infografiky a ilustrácie

Vďaka tomu, že súbory SVG používajú XML, vyhľadávacie nástroje ako Google môžu čítať grafy a diagramy plné textu, čo môže pomôcť s optimalizáciou pre vyhľadávače. Keďže Google dokáže v súboroch SVG detegovať kľúčové slová, potenciálne môže zobraziť webovú stránku vo výsledkoch vyhľadávania vyššie. Súbory SVG navyše podporujú aj animácie, takže webové stránky môžu vyzerať ešte zaujímavejšie.

Ďalšie vektorové súbory

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.

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č, kliknúť na Súbor > 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:

1. Po dokončení obrázka v aplikácii Photoshop kliknite na File (Súbor) > Export (Exportovať) > Export As (Exportovať ako).
   
2. V zobrazenom poli kliknite na rozbaľovaciu ponuku Format (Formát) a potom vyberte SVG.
   
3. 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.

Súbory SVG: najčastejšie otázky

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.