SVG vagy PNG a logóhoz: melyik formátumot használjuk (és mikor)

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

A különbség a vektor és a raszter között van. Az SVG (Scalable Vector Graphics) formákként írja le a logót — pontok, görbék és kitöltések —, amelyeket matematika határoz meg. Bármekkora méretben jelenik meg, újrarajzolódik, így mindenhol éles marad. Mivel kód, a legtöbb logó tiszta geometriájához apró méretű, gyakran csak néhány kilobájt.

A PNG (Portable Network Graphics) raszteres kép: pixelek rögzített rácsa, meghatározott szélességgel és magassággal. Támogatja az átlátszóságot, így a logó tisztán illeszkedik bármilyen színre — de az exportáltnál nagyobb méretben megjelenítve a pixelek kinyúlnak, és az élek elmosódnak.

Mikor használjunk SVG-t?

Tegye az SVG-t mesterfájllá, és mindenhez alapértelmezetté, ami képernyőn jelenik meg:

• Weboldalak és webalkalmazások — a logó a fejlécben, a lábjegyzetben és a hero szekcióban. A modern böngészők tökéletesen élesen jelenítik meg az SVG-t minden képernyőn, a retinától a 4K-ig.
• Bárhol, ahol a logónak skálázódnia kell — reszponzív elrendezések és nagy pixelsűrűségű kijelzők.
• Egyetlen forrásként, amelyből mindent mást exportál.
• Faviconok, mivel a modern böngészők elfogadják az SVG favicont.

Mikor használjunk PNG-t?

Használjon PNG-t, ha fix méretű raszterre van szüksége, vagy olyan helyre, amely nem fogadja el az SVG-t:

• Közösségimédia-profilképek és borítóképek — a legtöbb platform csak raszterfeltöltést fogad el, ezért exportáljon négyzetes PNG-t az egyes platformok által ajánlott méretben.
• Néhány e-mail-kliens és aláíráseszköz, amely nem jeleníti meg megbízhatóan az SVG-t.
• Dokumentumok, diavetítések és piacterek, amelyek csak raszterképeket fogadnak el.
• Gyors előnézetek és bélyegképek.

SVG vs PNG áttekintése

Mi a helyzet az EPS-szel, a PDF-fel, az AI-val — és a JPG-vel?

Az SVG és a PNG lefedi a webet, de egy teljes logócsomag általában tartalmaz néhány másikat is:

• PDF — vektoros formátum, amelyet szinte minden nyomda és irodai eszköz elfogad. Ez a legbiztonságosabb fájl, amit átadhat egy nyomdának.
• EPS — egy régebbi vektorformátum, amelyet egyes nyomdák még mindig kérnek. Kezelje nyomtatás-kompatibilitási exportként, ne olyanként, amit napi szinten használ.
• AI (Adobe Illustrator) — egy munka-/forrásfájl. Ha egy tervező készítette a logóját, tartsa meg az AI-t (vagy az SVG-t) archívumban, szerkeszthető eredetiként.
• JPG — kerülje logókhoz. A JPG nem támogat átlátszóságot, ezért hátteret kényszerít a jel köré, és a tömörítése veszteséges, ami elmossa az éles éleket. Fotókra tervezték, nem logókra.

Visszaalakítható egy PNG SVG-vé?

Nem tisztán. Egy PNG SVG-vé alakítása azt jelenti, hogy körberajzolja a pixeleket formákká, ami ritkán egyezik meg az eredetivel, és gyakran zavaros útvonalakat eredményez. Ha megvan az SVG, mindig onnan induljon. Ha csak egy alacsony felbontású PNG áll rendelkezésre, általában jobb újraépíteni a jelet vektorként, mint automatikusan körberajzolni.

Mi a helyzet a faviconokkal és az alkalmazásikonokkal?

A favicon csak egy nagyon kicsi verziója a logónak, ezért exportálja az SVG-ből: egy SVG favicont a modern böngészőkhöz, plusz kis PNG-ket (például 32×32 és egy 180×180-as Apple touch ikon) a széles kompatibilitáshoz. Ugyanez a szabály vonatkozik az alkalmazásikonokra is — generálja a méreteket, amelyeket az egyes platformok kérnek, a vektoros mesterfájlból. Lásd hogyan készítsünk favicont a logóból.

A rövid válasz

Tervezze meg és tárolja a logóját SVG-ként, a weben ezt használja, exportáljon PNG-t fix méretű raszteres elhelyezésekhez, a nyomdáknak adjon PDF-et vagy EPS-t, és teljesen hagyja ki a JPG-t. Tartsa meg a vektoros mesterfájlt, és később bármilyen méretet vagy formátumot minőségvesztés nélkül elő tud állítani.

Készítsen logót, és exportáljon SVG-t, PNG-t és favicont

Gyakori kérdések

Jobb az SVG, mint a PNG a logókhoz?

Egy logóhoz általában igen: az SVG vektoros, így bármilyen méretben éles marad, és egyszerű jelekhez apró méretű. A PNG továbbra is hasznos fix méretű raszteres elhelyezésekhez, mint a közösségimédia-avatarok és az SVG-t nem olvasó eszközök.

Elveszíti a minőségét egy SVG logó nagyításkor?

Nem. Az SVG matematikával írja le a formákat, így bármilyen méretben — a favicontól az óriásplakátig — élesen jelenik meg újra, anélkül hogy elmosódna vagy pixelessé válna.

Miért elmosódott a PNG logóm?

A PNG-nek fix pixelmérete van. Ha az exportáltnál nagyobbra jelenítik meg, vagy nagy pixelsűrűségű képernyőn mutatják, az kinyújtja a pixeleket, és elmossa az éleket. Exportáljon nagyobb PNG-t, vagy használja az SVG-t.

Használjak JPG-t logóhoz?

Nem. A JPG nem támogat átlátszóságot (így hátteret ad a jel köré), és veszteséges, ami elmossa a jel éles éleit. Logóhoz SVG-t vagy PNG-t használjon, sose JPG-t.

Milyen formátumot adjak egy nyomdának?

Egy vektorfájlt — általában a logóból exportált PDF-et vagy EPS-t —, hogy a nyomda tisztán bármilyen méretre skálázhassa. Tartsa meg az SVG-t mesterfájlként, amelyből ezeket generálja.