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.
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 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.
Súbory Scalable Vector Graphics prešli v posledných rokoch dlhú cestu. No na čo sa používajú v praxi?
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.
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.
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 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.
Keď používate Adobe Photoshop, postupujte podľa týchto krokov:
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ú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.
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ý.
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é.
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.
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.
Prečítajte si viac o ďalšom obľúbenom formáte určenom na tvorbu webových grafík a log.
Zistite, prečo sú súbory JPEG navrhnuté pre digitálne fotografie.
Oboznámte sa s týmto novým typom rastrového súboru vyvinutého spoločnosťou Apple.
Objavte tento rozšírený vektorový formát vyvinutý pre Adobe Illustrator.
Ktorý formát súborov zvíťazí pri tvorbe webových dizajnov?
Pozrite sa podrobnejšie na ich tlačové vlastnosti.
Vytvárajte nádherné vektorové grafiky a ilustrácie.
7 dní zadarmo, potom 23,99 € mesačne.
Vytvárajte elegantné rozloženia stránok pre tlačové a digitálne médiá.
7 dní zadarmo, potom 23,99 € mesačne.
Získajte celú zbierku tvorivých aplikácií a ešte oveľa viac.
7 dní zadarmo, potom 62,47 € mesačne.