A PNG és az SVG formátum közötti eltérések

A témakör tartalma

• Mit kell tudni a PNG-fájlokról?
   
• Mit kell tudni az SVG-fájlokról?
   
• Mi a különbség a PNG-fájlok és az SVG-fájlok között?
   
• Gyakori kérdések a PNG-fájlokról és az SVG-fájlokról
  

Mi a különbség a PNG-fájlok és az SVG-fájlok között?

A PNG és az SVG között sok átfedés van. Itt arról olvashat, hogy miben különböznek.

Raszteres és vektoros formátum

A PNG és az SVG között talán az a legalapvetőbb különbség, hogy az egyik raszteres, a másik vektoros fájltípus.

A PNG raszteres, azaz képpontalapú formátum. Ha egy raszteres képet túlságosan felnagyítanak, az szemcsés és pixeles lesz. Ha pedig túlzottan lekicsinyítik, akkor homályossá válhat. Bár a PNG-fájlok nagyon nagy felbontásokat képesek kezelni, nem növelhetők a végtelenségig.

Az SVG-fájlok ezzel szemben vektoralapúak, vagyis vonalak, pontok, alakzatok és algoritmusok összetett matematikai hálózatából épülnek fel. Tetszés szerint nagyíthatók anélkül, hogy romlana a felbontásuk.

További információ a raszteres és a vektoros formátumról

Fájlméretek

A PNG-fájlok gyakran nagy méretűek, hogy jól tudják kezelni a nagy felbontást. Méretük miatt a feldolgozásuk, megosztásuk, mentésük és megnyitásuk hosszabb időt vehet igénybe. A nagy méret az oldalak betöltési idejét is megnövelheti, ezért a JPEG formátumot gyakrabban használják a webes fényképekhez. A PNG formátumnak létezik egy kisebb, 8 bites változata is, de az csak 256 szín használatát támogatja.

Az SVG-fájlok sokkal kisebb méretűek, mint a PNG-fájlok, ezért jóval kisebb eséllyel lassítják a számítógépet vagy a webhelyeket. (Ugyanakkor a nagyon részletes tartalmak az SVG esetében is lassulást okozhatnak.) Mivel vektoros fájlformátumról van szó, az SVG minőségromlás nélkül nagyítható vagy kicsinyíthető.

Tömörítés

Az SVG veszteségmentes tömörítést kínál, ami azt jelenti, hogy a fájlok anélkül tömöríthetők kisebb méretűvé, hogy ez a felbontás, a részletgazdagság vagy a minőség rovására menne.

A PNG szintén képes 5–20%-os veszteségmentes tömörítésre, ami segíthet ellensúlyozni a nagy fájlméretet. Ugyanakkor a legtöbbször így is nagyobb méretű, mint az SVG.

Fényképezés

Mint már említettük, webes fényképekhez csak ritkán használnak PNG-fájlokat. Ugyanakkor nyomtatáshoz, szerkesztéshez és egyéb célokra kiválóak, mivel az ilyen formátumú fotók nagyon részletgazdagok és kiváló minőségűek. Az Adobe Photoshopban is gyakran használják őket.

Ezzel szemben az SVG-fájlok nem képpontokból állnak, így a fényképek jó minőségű megjelenítése nem az erősségük.

Webes felhasználás

A PNG-fájlok és az SVG-fájlok egyaránt képesek a webes grafikák, illusztrációk, logók, infografikák és táblázatok nagy részletességű megjelenítésére.

Az SVG formátum XML programozási nyelve azonban határozott előnnyel jár. Ez azt jelenti, hogy a megjelenített SVG-fájlok nem kódot, hanem szöveget tartalmaznak. Ennek köszönhetően a képernyőolvasók és a keresőprogramok elemezni tudják őket, így a hozzáférhetőség és a keresőprogram-optimalizálás szempontjából kiváló megoldást jelentenek.

Az SVG-fájlok általában kisebbek is, ami gyorsabbá teszi az oldalak betöltését. A keresőprogramok által végzett rangsorolás egy másik fontos eleme az oldalbetöltési idő.

Részben a PNG is támogatja a szövegalapú grafikát, de nem ugyanolyan mértékben. 

Kompatibilitás és komplexitás

Az SVG a PNG-nél fejlettebb fájltípusnak számít, de valójában nem minden böngészővel és operációs rendszerrel kompatibilis. Ráadásul a programozási nyelvük és a vektoralapú kompozíció szokatlan, és elriaszthatja az új felhasználókat.

A PNG viszont szabványos webes formátum, amelyet a webböngészők és az operációs rendszerek széles köre támogat.

Animáció

A PNG-fájlok nem támogatják az animációt – ellentétben a szintén raszteres GIF képfájlformátummal.

Az SVG-fájlok támogatják az animációt, de kevésbé, mint más fájltípusok, például az Adobe Illustrator natív AI formátuma.

További tudnivalók az AI-fájlokról

Átlátszóság

A PNG és az SVG is támogatja az átlátszóságot, ezért mindkettő kiváló választás a webes logókhoz és grafikákhoz.

Érdemes megjegyezni, hogy a PNG az egyik legjobb választás a raszteralapú, átlátszóságot tartalmazó fájlokhoz. Ha képpontokkal és átlátszósággal dolgozik, a PNG jobb választás, mint az SVG.

Hogyan alakíthatok raszteres képet SVG-fájllá?

Szabványos raszteres képfájl (például egy JPEG-fájl vagy egy PNG-fájl) vektoralapú SVG-fájllá alakításához végezze el az alábbi egyszerű lépéseket:

1. Nyissa meg az Adobe Illustratort.
    
2. Kattintson a Fájl > Megnyitás parancsra, és válassza ki a kívánt képfájlt a számítógépről.
    
3. Kattintson a Megnyitás gombra.
    
4. Kattintson a kontúrozási lehetőségre a felső listában, majd válassza a Képkontúrozás elemet.
    
5. Finomhangolja az átalakítást igényei szerint – ebbe a szín módosítása is beletartozhat.
    
6. A folyamat végeztével válassza ki a kontúrozott képet, majd kattintson a Csoportbontás lehetőségre. Ezzel szétválasztja a színalakzatokat.
    
7. Kattintson a Fájl > Exportálás parancsra.
    
8. Mentse a fájlt SVG formátumban.

Hogyan alakíthatok SVG-fájlt PNG-fájllá?

SVG-fájl PNG-fájllá alakításához végezze el ezeket az egyszerű lépéseket az Adobe Photoshopban:

1. Nyissa meg az Adobe Photoshopot.
   
   
2. Kattintson a Fájl > Megnyitás parancsra.
    
3. Válassza ki a kívánt SVG-fájlt a számítógépről.
    
4. Kattintson az Exportálás > Exportálás ekként > PNG elemre.
    
5. Mentse a fájlt PNG formátumban.

Gyakori kérdések a PNG-fájlokról és az SVG-fájlokról