PNG alebo SVG: ktorý formát použiť?

1. Základný rozdiel: mriežky bodov proti matematickým cestám

PNG je raster: rozdelí obraz na jednotlivé body a uloží farbu každého z nich. Zväčšenie PNG len natiahne tieto body, preto sa objavujú schodíky a rozmazanie. SVG je vektorový obrázok: opisuje tvary matematickými pokynmi, ako sú súradnice a krivky Bézier, a prehliadač kresbu v novom rozmere prekreslí, takže zostáva ostrý v každej mierke. Práve tento jediný fakt je koreňom takmer všetkých rozdielov medzi oboma formátmi.

Pri priehľadnosti: PNG podporuje alfakanál a vie uložiť priehľadné pozadie. SVG je priehľadné zo svojej podstaty — kým nakreslíte obdĺžnik pozadia, všetko mimo kresby zostáva priehľadné. Pre info: JPG priehľadnosť vôbec nemá, jeho biele pozadie je skutočná farba vypísaná do obrázka.

2. Veľkosť súboru a rýchlosť načítania

Pri jednoduchej grafike, ako sú ikony a logá, má SVG často len niekoľko KB a jeden súbor sa hodí ku každej hustote obrazovky. PNG naopak na Retina displejoch zvyčajne potrebuje verzie @2x a @3x, čo veľkosť súboru násobí. Pri fotografiách je to naopak: bohaté farebné prechody pri vektorizácii vytvoria obrovské množstvo ciest, takže SVG skončí oveľa väčšie ako JPG či WEBP — to sa neoplatí.

Príčina je v spôsobe kompresie. PNG ukladá body bezstratovo, takže čím zložitejší obraz, tým väčší súbor. SVG je jednoduchý text, v ktorom sa opakované príkazy ciest a súradnice stláčajú extrémne dobre. Preto sa dva formáty, ktoré oba nazývame „bezstratové“, správajú z hľadiska veľkosti tak odlišne.

Prípad použitia	Odporúčaný formát	Prečo
Ikony / logá webu	SVG	Jeden súbor pre každé rozlíšenie a CSS ich vie prefarbovať
Fotografie	JPG / WEBP	Malé súbory s fotografickou vernosťou
Snímky obrazovky	PNG	Presné na úrovni bodov a bezstratovo stlačené
Dátové grafy	SVG	Ostré pri škálovaní a jednoducho interaktívne
Profilové fotky na sociálnych sieťach	PNG / JPG	Väčšina platforiem prijíma len raster

3. Kedy použiť PNG

• Fotografie, zložité osvetlenie a jemné prechody;
• Snímky obrazovky a rozhrania, ktoré musia byť presné na úrovni bodov;
• Miesta, kde platforma prijíma len raster, napríklad nahrávanie profilovej fotografie v niektorých paneloch;
• ako záložný variant pre veľmi staré prostredia, ktoré SVG nepodporujú.

4. Kedy použiť SVG

• Ikony a logá webov: jeden súbor pre každé rozlíšenie, stále ostré aj na Retina displejoch;
• Grafika, ktorú treba prefarbovať cez CSS alebo JavaScript a animovať kreslením čiar;
• Dátové grafy: knižnice na vizualizáciu, ako je ECharts, vytvárajú SVG štandardne;
• Tlač, laserové gravírovanie a rezanie vinylu, kde zariadenie číta vektorové cesty.

5. Dajú sa PNG a SVG prevádzať navzájom?

Áno. PNG na SVG: použite nástroj PolySVG PNG na SVG alebo nástroj Obrázok na SVG, nahrajte súbor a kliknite na generovanie, čím sa vektorizuje — výsledok je vynikajúci pre ikony a logá, fotografie získajú ilustrovaný štýl. Prevod je bezplatný a priehľadný PNG si ponechá priehľadné pozadie. Vzniknutý SVG sa dá ďalej otvoriť v editore na prefarbenie a odstránenie pozadia, čím sa pracovný postup uzatvorí. SVG na PNG: otvorte súbor v online SVG editore a exportujte PNG v potrebnom rozlíšení — ideálne pre dokumenty alebo náhľadové obrázky.

Na čo si dať pozor: prevod PNG na SVG nie je jednoduché „uložiť ako“, ale vektorizácia, ktorá prekreslí obrysy. Grafické prvky vychádzajú ako čisté cesty, fotografie sa zhutia do farebných blokov. Najprv si výsledok v nástroji pozrite a uistite sa, že štýl zodpovedá očakávaniu, až potom súbor stiahnite.

Pravidlo v jednej vete: ikony, logá a grafy patria do SVG; fotografie a snímky obrazovky do PNG/JPG/WEBP. Ak váhate, pre grafický obsah si vyberte SVG. Pre ďalšie podrobnosti si prečítajte Čo je SVG a Tri spôsoby, ako premeniť obrázok na SVG.