Súbory SVG

Čo sa dozviete

• Čo je súbor SVG?
• História súboru 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 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

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.

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č 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:

1. Po dokončení obrázka v aplikácii Photoshop kliknite na File (Súbor) > Export (Exportovať) > Export As (Exportovať ako).
2. V zobrazenom okne 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.