SVG → PNG

Vektorgrafikából képpontokra épülő PNG

Gyakorlati tudnivalók a svg to png átalakításhoz: mikor célszerű ezt a formátumot választani, mire figyelj, és hogyan ellenőrizd az eredményt.

Mikor érdemes használni?

Az SVG matematikai alakzatokkal és útvonalakkal írja le a grafikát, a PNG viszont konkrét képpontokat tárol. Emiatt az SVG szinte tetszőlegesen nagyítható, míg a PNG-t már a felhasználási méretnek megfelelő felbontásban célszerű előállítani. Egy 64 × 64 pixeles ikonból készített PNG például nyomdai plakáton már szemcsés lehet.

Formátum és megjelenítés

Mielőtt SVG-t PNG-vé alakítasz, érdemes tisztázni a felhasználást. Webes ikonhoz kis méret is elegendő lehet, prezentációhoz vagy nagy felbontású monitorhoz több pixel kell. A felbontás megválasztása a konverzió egyik legfontosabb döntése, mert a később felnagyított raszteres kép élessége már nem lesz azonos az eredeti vektoréval.

Minőség és fájlméret

Az SVG tartalmazhat átlátszó hátteret, és a PNG ezt megfelelő feldolgozás esetén megőrizheti. Ez hasznos, ha egy logót különböző színű felületekre szeretnél helyezni. A sötét vonalakat világos és sötét háttéren is ellenőrizd, mert egy vékony körvonal eltűnhet olyan felületen, amelyre eredetileg nem tervezték.

Gyakorlati munkamenet

Az összetett SVG-k betűtípusokat, szűrőket, maszkolást vagy külső erőforrásokat is használhatnak. Böngészők között lehetnek megjelenítési különbségek, ezért az export utáni PNG-t ne csak kicsinyített előnézetben vizsgáld. Fontos logóknál ellenőrizd a betűképet, a vágási határokat és az árnyékok helyzetét.

Ellenőrzés és gyakori félreértések

Ha a grafika további szerkesztésre kerül, az eredeti SVG-t őrizd meg: a PNG-ben már nem tudod külön kiválasztani a görbéket és alakzatokat. A PNG-t inkább felhasználási példánynak tekintsd. Ha az oldalad közvetlenül SVG-t is meg tud jeleníteni, a konverzió nem mindig szükséges, különösen akkor, ha a rugalmas méretezés fontos.

Válassz felbontást a célhoz

Egy alkalmazás gombjára szánt ikonhoz és egy nyomtatott plakáton szereplő logóhoz eltérő PNG-méret szükséges. Mielőtt exportálnál, becsüld meg a legnagyobb tényleges megjelenítési méretet. Ha például egy logót nagy sűrűségű képernyőn is élesen szeretnél használni, több képpontra lehet szükség, mint a CSS-ben megadott szélessége. A túl alacsonyra választott felbontású PNG szélei később elmosódhatnak. A túl nagy kép viszont feleslegesen lassíthatja az oldal betöltését, ezért célszerű külön méretet készíteni különböző célokra.

Miért térhet el a kész kép a vektorfájltól?

Az SVG tartalmazhat rendszerfüggő betűtípusokat, bonyolult szűrőket és külső hivatkozásokat. Az exportáló böngésző ezek közül nem feltétlenül jelenít meg mindent ugyanúgy. Ha egy logó felirata szokatlan betűkkel jelenik meg, nem a PNG formátum tehet róla, hanem a forrás megjelenítéséhez hiányzó betűkészlet. Először ellenőrizd az SVG előnézetét. A PNG elkészülte után pedig hasonlítsd össze a szöveget, a színeket és a kép szélein lévő üres teret az eredetivel.

További gyakorlati tanács

Különösen fontos ellenőrizni a kép körüli üres teret. Egy jól megrajzolt ikon is túl kicsinek tűnhet, ha a forrás SVG nagy margókkal rendelkezik, és ezek az exportban is megmaradnak. Prezentációhoz készített változatnál a háttérrel való kontraszt szintén számít. Egy fehér vonalakkal készült logó világos diasablonon szinte láthatatlan lehet. Ha több felületre szánod ugyanazt az ábrát, készíts világos és sötét háttérhez is külön ellenőrzött PNG-változatot.