PNG vs SVG

Rastrový vs vektorový typ

Asi najpodstatnejší rozdiel medzi PNG a SVG spočíva v tom, že jeden súbor je rastrový a druhý je vektorový.

PNG je rastrový obrázkový formát, čo znamená, že je založený na pixeloch. Ak rastrový obrázok príliš zväčšíte, nadobudne zrnitosť a pixelový vzhľad. Ak je obrázok zasa príliš malý, môže byť nejasný. Súbory PNG dokážu spracovať veľmi veľké rozlíšenie, avšak nedajú sa zväčšovať donekonečna.

Súbory SVG sú zasa vektorové. Sú vytvorené z komplexnej matematickej siete čiar, bodov, tvarov a algoritmov. Dokážu sa zväčšiť na akúkoľvek veľkosť bez straty rozlíšenia.

Ďalšie informácie o rastrovom a vektorovom type

Veľkosti súborov

PNG súbory sú častokrát veľké, a preto dokážu spracovať vysoké rozlíšenia. Pre ich veľkosť môže spracovanie, zdieľanie, ukladanie alebo otváranie týchto súborov trvať dlhší čas. Aj načítanie stránky sa môže spomaliť. Preto sa súbory JPEG častejšie používajú pre online fotografie. Existuje však aj menší 8-bitový variant PNG, ktorý však podporuje len 256 farieb.

SVG sú oveľa menšie súbory ako PNG a nezvyknú spomaľovať váš počítač alebo webovú lokalitu. (Každý detailný dizajnový prvok však môže súbor SVG spomaliť.) Keďže ide o formát vektorového súboru, môžete súbor SVG zväčšovať alebo zmenšovať bez straty kvality.

Komprimácia

Súbory SVG poskytujú bezstratovú komprimáciu. To znamená, že ich možno komprimovať na menšie súbory bez vplyvu na ich definíciu, detail alebo kvalitu.

Súbory PNG okrem toho ťažia z bezstratovej komprimácie na úrovni 5 – 20 %, čo môže kompenzovať ich veľkosť. Aj napriek tomu však zvyknú byť väčšie ako súbory SVG.

Fotografia

Ako už bolo spomenuté, súbory PNG sa bežne nepoužívajú pre webové fotografie. Dokážu však spracovať veľmi detailné vysokokvalitné digitálne fotografie na tlač, úpravy a iné účely. Sú bežným formátom súborov v aplikácii Adobe Photoshop.

Súbory SVG zasa nepoužívajú pixely. Preto majú problém zobrazovať fotografiu vo vysokom štandarde.

Použitie na webe

Súbory PNG aj SVG dokážu zobrazovať zložité detailné úrovne webových grafík, ilustrácií, log, infografík a tabuliek.

Kľúčovou výhodou formátu SVG je však jeho programovací jazyk XML. To znamená, že každý zobrazený súbor SVG je napísaný v textovej, nie kódovej podobe. Zariadenia na čítanie z obrazovky a vyhľadávače ich teda dokážu analyzovať. Preto sú vynikajúce na účely zjednodušenie ovládania a SEO.

Súbory SVG sú tiež zvyčajne menšie, vďaka čomu sa na stránke rýchlejšie načítavajú. Trvanie načítavania stránky je ďalším dôležitým aspektom pre poradie vo vyhľadávačoch.

Formát PNG navyše podporuje niektoré textové grafiky, nie však v rovnakom rozsahu.

Kompatibilita a zložitosť

SVG je považovaný za pokročilejší typ súborov ako PNG, avšak v skutočnosti nie je kompatibilný s každým prehliadačom a operačným systémom. Noví používatelia navyše nemusia poznať programovací jazyk a vektorovú kompozíciu týchto súborov, a preto sa im môžu vyhýbať.

Formát PNG je zasa štandardný online formát s rozsiahlou podporou zo strany webových prehliadačov a operačných systémov.

Animácia

Súbory PNG na rozdiel od rastrového obrázkového súboru GIF nepodporujú animáciu.

Súbory SVG animáciu podporujú, avšak nie sú tak pohotové ako iné typy súborov, napríklad AI – natívny formát aplikácie Adobe Illustrator.

Ďalšie informácie o súboroch AI

Priehľadnosť

Súbory PNG a SVG podporujú priehľadnosť. Sú vynikajúcim riešením pre online logá a grafiky.

Je vhodné poznamenať, že súbory PNG sú najlepšou voľbou, pokiaľ ide o rastrový priehľadný súbor. Ak pracujete s pixelmi a priehľadnými prvkami, súbory PNG sú lepšou voľbou ako súbory SVG.

1. Otvorte Adobe Illustrator.
2. Kliknite na File (Súbor) > Open (Otvoriť) a vyberte svoj obrázok v počítači.
3. Kliknite na Open (Otvoriť).
4. V hornej ponuke kliknite na možnosť Trace (Konvertovať) a vyberte Image Trace (Konvertovať na vektor).
5. Upravte konverziu podľa svojich špecifikácii. Môže to zahŕňať úpravu farby.
6. Po dokončení procesu vyberte obrázok, ktorý chcete skonvertovať, a kliknite na Ungroup (Zrušiť zoskupenie). Farebné tvary sa tým rozdelia.
7. Kliknite na File (Súbor) > Export (Exportovať).
8. Uložte súbor vo formáte SVG.

1. Otvorte Adobe Photoshop.
2. Kliknite na File (Súbor) > Open (Otvoriť).
3. V počítači vyberte súbor SVG.
4. Kliknite na Export (Exportovať) > Export As (Exportovať ako) > PNG.
5. Uložte súbor vo formáte PNG.