PNG vagy SVG: melyik formátumot érdemes használni?
PNG és SVG összevetése: hogyan működik mindkét formátum, átláthatóság, fájlméret, skálázás és a megfelelő felhasználási területek, valamint a PNG és az SVG közötti átalakítás.
1. A lényegi különbség: pixelrács kontra matematikai útvonalak
A PNG egy raszter: az egyes pixelekre bontja a képet, és minden pixel színét eltárolja. A PNG nagyítása egyszerűen kinyújtja ezeket a pixeleket, ezért jelennek meg a lépcsők és az elmosódás. Az SVG egy vektorkép: matematikai utasításokkal, például koordinátákkal és Bézier-görbékkel írja le az alakzatokat, a böngésző pedig az új méretben rajzolja újra az alkotást, így mindig éles marad, bármilyen skálán. Egyetlen tény ez, amelyből a két formátum közötti szinte minden különbség ered.
Az átláthatóságnál a PNG támogatja az alfa csatornát, így tárolhat átlátszó hátteret. Az SVG eleve átlátszó — amíg nem rajzol hátzér téglalapot, minden a rajzon kívül marad átlátszó. Mellékesen: a JPG-nek egyáltalán nincs átláhatósága, a fehér háttere valódi, a képbe festett szín.
2. Fájlméret és betöltési sebesség
Egyszerű grafikáknál, mint az ikonok és a logók, az SVG gyakran csak néhány KB, és egyetlen fájl illik minden képernyősűrűséghez. A PNG ezzel szemben általában @2x és @3x változatot igényel a Retina kijelzőkön való élességhez, ami megszorozza a fájlméretet. Fotóknál fordított a kép: a gazdag színátmenetek vektorizálva rengeteg útvonalat termelnek, így az SVG jóval nagyobb lesz, mint egy JPG vagy WEBP — nem éri meg.
Az ok a tömörítés módjában van. A PNG veszteségmentesen tömöríti a pixeleket, ezért minél bonyolultabb a kép, annál nagyobb a fájl. Az SVG egyszerű szöveg, amelyben az ismétlődő útvonalparancsok és koordináták rendkívül jól tömörülnek. Épp ezért két olyan formátum, amelyet mindkettőt veszteségmentesnek nevezünk, ennyire másképpen viselkedik a méret tekintetében.
| Felhasználási eset | Ajánlott formátum | Miért |
|---|---|---|
| Weboldal-ikonok / logók | SVG | Egy fájl minden felbontáshoz, és a CSS újraszínezheti |
| Fotók | JPG / WEBP | Kis fájlok fotórealisztikus pontossággal |
| Képernyőképek | PNG | Pixelpontosan pontos és veszteségmentesen tömörített |
| Adatdiagramok | SVG | Éles skálázáskor és könnyen interaktív |
| Profilképek közösségi hálózatokon | PNG / JPG | A legtöbb platform csak rasztert fogad el |
3. Mikor használjunk PNG-t
- Fotók, összetett megvilágítás és finom színátmenetek;
- Képernyőképek és felületrögzítések, amelyeknek pixelpontosan pontosnak kell lenniük;
- Helyek, ahol a platform csak rasztert fogad el, például profilkép-feltöltés egyes vezérlőpultokon;
- Kompatibilitási tartalék nagyon régi környezetekhez, amelyek nem támogatják az SVG-t.
4. Mikor használjunk SVG-t
- Weboldal-ikonok és logók: egy fájl minden felbontáshoz, éles marad Retina kijelzőkön is;
- Grafikák, amelyeket CSS-sel vagy JavaScripttel újra kell színezni, illetve vonalrajzoló animációt igényelnek;
- Adatdiagramok: az olyan vizualizációs könyvtárak, mint az ECharts alapértelmezés szerint SVG-t állítanak elő;
- Nyomtatás, lézeres gravírozás és vinyilvágás, ahol az eszköz vektoros útvonalakat olvas be.
5. Átalakítható-e egymásba a PNG és az SVG?
Igen. PNG → SVG: használja a PolySVG PNG → SVG eszközt vagy a Kép → SVG eszközt, töltse fel a fájlt, és kattintson a létrehozásra a vektorizáláshoz — az eredmény kiváló az ikonokhoz és a logókhoz, míg a fotók rajzos stílust kapnak. A konverzió ingyenes, és az átlátszó PNG megtartja az átlátszó hátterét. A keletkező SVG továbbra is megnyitható a szerkesztőben újraszínezésre és háttéreltávolításra, ami befejezi a munkafolyamatot. SVG → PNG: nyissa meg a fájlt az online SVG szerkesztőben, és exportáljon PNG-t a szükséges felbontásban — tökéletes dokumentumokhoz vagy előnézeti képekhez.
Amire figyeljen: a PNG → SVG nem egyszerű mentés más néven, hanem vektorizálás, amely újrarajzolja a kontúrokat. A grafikai elemek tiszta útvonalakként kerülnek ki, a fotók viszont színblokkokba sűrűsödnek. Előbb tekintse meg az eredményt az eszközben, és győződjön meg róla, hogy a stílus megfelel a várakozásának, mielőtt letölti.
Egy mondatos szabály: ikonokhoz, logókhoz és diagramokhoz SVG; fotókhoz és képernyőképekhez PNG/JPG/WEBP. Ha kétsége van, a grafikus tartalomnak mindig az SVG-et válassza. Mélyebbre ásva olvassa el a Mi az SVG és a Három módszer a kép SVG-vé alakítására útmutatót.
Gyakori kérdések
A weboldal-ikonok PNG-k vagy SVG-k legyenek?
A legjobb az SVG: egy fájl illik minden képernyősűrűséghez, kicsi, és a CSS újraszínezheti. A PNG csak tartalék, ha egy platform nem támogatja az SVG-t.
Átlátszó PNG marad átlátszó az SVG-vé alakítás után?
Igen. Ha a PolySVG PNG → SVG eszközzel konvertál, az átlátszó területek teljes egészében megmaradnak, és nem kitalálunk fehér hátteret.
Alkalmasak-e a fotók az SVG-vé alakításra?
Ha fotórealisztikus pontosság kell, nem. A vektorizálás színblokkokba sűríti a fotót, és rajzos stílust ad; a fotókat továbbra is jobban szolgálja a JPG / WEBP.