SVG vs PNG pre logá: ktorý formát použiť (a kedy)
Pre logo držte master ako SVG a používajte ho všade, kde je formát podporovaný — zostane ostré v akejkoľvek veľkosti a takmer nič neváži. Po PNG siahnite len vtedy, keď potrebujete rastrový obrázok pevnej veľkosti alebo miesto, ktoré SVG neprijme, ako väčšina sociálnych profilov. Pre tlač odovzdajte vektorové PDF alebo EPS. JPG pre logo nikdy nepoužívajte.
Na tejto stránke
Aký je rozdiel medzi SVG a PNG?
Rozdiel je vektor vs rastr. SVG (Scalable Vector Graphics) popisuje logo ako tvary — body, krivky a výplne — definované matematikou. Prekresľuje sa v akejkoľvek veľkosti, v akej sa objaví, takže zostáva všade ostré. Keďže je to kód, je navyše pre čistú geometriu väčšiny log maličké, často len pár kilobajtov.
PNG (Portable Network Graphics) je rastrový obrázok: pevná mriežka pixelov s danou šírkou a výškou. Podporuje priehľadnosť, takže logo čisto sedí na akejkoľvek farbe — ale zobrazené väčšie, než bolo vyexportované, sa pixely roztiahnu a okraje zjemnia.
Kedy použiť SVG?
Urobte zo SVG svoj hlavný súbor a predvolený formát pre čokoľvek na obrazovke:
- Weby a webové aplikácie — logo v hlavičke, päte a hero sekcii. Moderné prehliadače vykreslia SVG dokonale ostré na každej obrazovke, vrátane retina a 4K.
- Kdekoľvek musí logo škálovať — responzívne rozvrhnutia a displeje s vysokou hustotou.
- Ako jediný zdroj, z ktorého exportujete všetko ostatné.
- Favicony, keďže moderné prehliadače prijmú SVG favicon.
Kedy použiť PNG?
PNG použite, keď potrebujete rastr pevnej veľkosti alebo miesto, ktoré SVG neprijme:
- Profilové obrázky a titulné fotky sociálnych sietí — väčšina platforiem prijme len rastrové nahrávanie, tak vyexportujte štvorcové PNG vo veľkosti, ktorú každá odporúča.
- Niektoré e-mailové aplikácie a nástroje na podpisy, ktoré SVG spoľahlivo nevykreslia.
- Dokumenty, prezentácie a trhoviská, ktoré prijímajú len rastrové obrázky.
- Rýchle náhľady a miniatúry.
SVG vs PNG v prehľade
| Na čom záleží | SVG (vektor) | PNG (rastr) |
|---|---|---|
| Škálovanie | ostré v akejkoľvek veľkosti | pevná veľkosť; pri zväčšení sa rozmaže |
| Veľkosť súboru (logá) | maličká pre jednoduché značky | rastie s rozmermi |
| Priehľadnosť | áno | áno |
| Upraviteľnosť | tvary a farby zostávajú upraviteľné | sploštené pixely |
| Najlepšie pre | web, master, škálovanie | avatary, rastr pevnej veľkosti, nahrávanie |
| Kompatibilita | moderné prehliadače a dizajnové nástroje | prijímané takmer všade |
A čo EPS, PDF, AI — a JPG?
SVG a PNG pokryjú web, ale kompletný balík loga zvyčajne obsahuje pár ďalších:
- PDF — vektorový formát, ktorý prijme takmer každá tlačiareň aj kancelársky nástroj. Toto je najbezpečnejší súbor na odovzdanie tlačiarni.
- EPS — starší vektorový formát, o ktorý niektoré tlačiarne stále žiadajú. Berte ho ako export pre tlačovú kompatibilitu, nie niečo na dennodenné použitie.
- AI (Adobe Illustrator) — pracovný/zdrojový súbor. Ak logo robil dizajnér, nechajte si AI (alebo SVG) archivované ako upraviteľný originál.
- JPG — pre logá sa mu vyhnite. JPG nemá priehľadnosť, takže okolo značky vynúti farebný box, a jeho kompresia je stratová, čo rozmazáva ostré okraje. Je stavaný na fotky, nie na logá.
Nechajte si SVG ako jediný zdroj pravdy. Každé PNG, favicon, PDF a sociálny obrázok by sa mali exportovať z neho — nikdy naopak. Trasovanie PNG späť do vektora zriedka zodpovedá originálu.
Dá sa PNG previesť späť na SVG?
Nie čisto. Prevod PNG na SVG znamená trasovanie pixelov do tvarov, čo zriedka zodpovedá originálu a často vytvorí neporiadne cesty. Ak máte SVG, vždy začnite tam. Ak máte len PNG v nízkom rozlíšení, zvyčajne je lepšie značku znovu postaviť ako vektor, než ju automaticky trasovať.
A čo favicony a ikony aplikácií?
Favicon je len veľmi malá verzia vášho loga, takže ho exportujte zo SVG: SVG favicon pre moderné prehliadače, plus malé PNG (napríklad 32×32 a 180×180 Apple touch icon) pre širokú kompatibilitu. Rovnaké pravidlo platí pre ikony aplikácií — vygenerujte veľkosti, o ktoré si každá platforma povie, z vektorového masteru. Viď ako vytvoriť favicon z loga.
Krátka odpoveď
Navrhnite a uložte logo ako SVG, používajte ho na webe, exportujte PNG pre rastrové umiestnenia pevnej veľkosti, tlačiarňam dajte PDF alebo EPS a JPG úplne vynechajte. Keď si necháte vektorový master, môžete akúkoľvek veľkosť či formát vyrobiť neskôr bez straty kvality.
Vytvorte logo a exportujte SVG, PNG a faviconČasté otázky
Je SVG pre logá lepšie než PNG?
Pre logo zvyčajne áno: SVG je vektor, takže zostane ostré v akejkoľvek veľkosti a je pre jednoduché značky maličké. PNG sa stále hodí na rastrové umiestnenia pevnej veľkosti, ako sú sociálne avatary a nástroje, ktoré SVG nevedia.
Stráca SVG logo kvalitu pri zväčšení?
Nie. SVG popisuje tvary matematikou, takže sa ostro prekresľuje v akejkoľvek veľkosti — od favicony po billboard — bez toho, aby sa niekedy rozmazalo alebo spixelovalo.
Prečo vyzerá moje PNG logo rozmazane?
PNG má pevnú pixelovú veľkosť. Zobrazenie väčšie, než bolo vyexportované, alebo na displeji s vysokou hustotou, roztiahne tie pixely a zjemní okraje. Vyexportujte väčšie PNG, alebo použite SVG.
Mám použiť JPG pre logo?
Nie. JPG nemá priehľadnosť (takže pridá box na pozadí) a je stratové, čo rozmazáva ostré okraje značky. Pre logá používajte SVG alebo PNG, nikdy JPG.
Ktorý formát dám tlačiarni?
Vektorový súbor — zvyčajne PDF alebo EPS vyexportovaný z loga — aby ho tlačiareň mohla čisto zväčšiť na akúkoľvek veľkosť. SVG si nechajte ako master, z ktorého ich generujete.
Zdroje
- Scalable Vector Graphics (SVG) 2 — W3C
- Image file type and format guide — MDN Web Docs