PNG vs SVG: Který formát kdy použít?

1. Zásadní rozdíl: pixelová mřížka versus matematické cesty

PNG je bitmapa: obrázek rozřeže na jednotlivé pixely a u každého zapíše barvu. Zvětšení PNG prostě natáhne ty pixely, a proto se objeví zuby a rozmazání. SVG je vektorová grafika: tvary popisuje matematickými pokyny, jako jsou souřadnice a křivky Bézier, a prohlížeč grafiku překreslí v nové velikosti, takže zůstává ostrá při libovolném měřítku. Tento jediný fakt je kořením téměř všech rozdílů mezi oběma formáty.

Co se týká průhlednosti, PNG podporuje kanál alfa a umí uložit průhledné pozadí. SVG je průhledné ze své podstaty — pokud nekreslíte obdélník pozadí, vše mimo grafiku zůstává průhledné. Pro úplnost: JPG průhlednost nepodporuje, jeho bílé pozadí je skutečná vykreslená barva.

2. Velikost souboru a rychlost načítání

U jednoduché grafiky, jako jsou ikony a loga, má SVG často jen několik kB a jediný soubor sedí na každou hustotu displeje. PNG naproti tomu obvykle potřebuje verze @2x a @3x, aby na Retina displeji zůstal ostrý, což velikost souboru násobí. U fotografií je tomu naopak: barevné přechody jsou nesmírně složité a vynucená vektorizace vygeneruje obrovské množství cest, takže SVG je mnohem větší než JPG či WEBP a převod se nevyplatí.

Důvod leží v způsobu komprese. PNG ukládá pixely ztrátově bez ztrát, takže čím složitější obrázek, tím větší soubor. SVG je obyčejný text, v němž se opakující se příkazy cest a souřadnice compressují mimořádně dobře. Proto se dva formáty, které se oba označují jako bezeztrátové, chovají z hlediska velikosti tak odlišně.

Použití	Doporučený formát	Proč
Ikony a loga na webu	SVG	Jeden soubor pro všechna rozlišení, barvy měníte přes CSS
Fotografie	JPG / WEBP	Malý soubor, fotorealistická podoba
Snímky obrazovky	PNG	Přesnost na úrovni pixelů a bezeztrátová komprese
Datové grafy	SVG	Ostré při škálování a snadno interaktivní
Avatary na sociálních sítích	PNG / JPG	Platformy obvykle přijímají jen bitmapy

3. Kdy použít PNG

• Fotografie, složité světlo a jemné přechody;
• Snímky obrazovky a rozhraní, které musí být přesné na úrovni pixelů;
• Místa, kde platforma přijímá jen bitmapy, například nahrávání avatara v některých administracích;
• Jako záloha pro kompatibilitu: ve velmi starém prostředí bez podpory SVG.

4. Kdy použít SVG

• Ikony a loga na webu: jeden soubor pro všechna rozlišení, na Retina displeji stále ostré;
• Grafika, kterou chcete přebarvovat přes CSS nebo JavaScript a animovat kreslením tahem;
• Datové grafy: vizualizační knihovny jako ECharts produkují SVG ve výchozím stavu;
• Tisk, laserové rytí a vyřezávání do vinylu, kde zařízení čte vektorové cesty.

5. Můžou se PNG a SVG převádět navzájem?

Ano. PNG na SVG: použijte nástroj PNG na SVG od PolySVG nebo nástroj Obrázek na SVG, nahrajte soubor a klikněte na generování — ikony a loga dopadnou výborně, fotografie získají ilustrativní charakter. Převod je zdarma a průhledné PNG si průhledné pozadí zachová. Vzniklé SVG můžete dál otevřít v editoru a přebarbit či odstranit pozadí, čímž vznikne kompletní pracovní postup. SVG na PNG: otevřete soubor v online SVG editoru a exportujte PNG s libovolným rozlišením — ideální do dokumentů nebo jako náhled.

Je ale potřeba upozornit, že převod PNG na SVG není prosté uložení pod jinou příponou, ale vektorizace, která obrysy překreslí. Grafické materiály dostanou čisté cesty, fotografie se zase zjednoduší na barevné plochy. Před stažením si výsledek v nástroji prohlédněte a přesvědčte se, že styl odpovídá vašim představám.

Jedno pravidlo: ikony, loga a grafy patří do SVG; fotografie a snímky obrazovky do PNG/JPG/WEBP. Když váháte, u grafického obsahu upřednostněte SVG. Pro hlubší pochopení si přečtěte Co je SVG a Tři způsoby převodu obrázku na SVG.