PNG SVG-be konvertálása: logók, ikonok és vonalrajzok

A PNG raszteres kép: pixelek rögzített rácsa, minden pixelnek van színe és opcionálisan átlátszósága. Egy 500 × 500 px-es logó pontosan 250 000 ilyen négyzetből áll, így ha plakátméretre nagyítja, a négyzetek csak nagyobbak lesznek, vagy elmosódnak közöttük az átmenetek. Az SVG vektorkép: szöveges fájl, amely alakzatokat (például <path>, <circle> és <rect>) ssorol fel koordinátákkal és kitöltőszínekkel. A böngésző vagy a vágógép ezeket az alakzatokat bármilyen méretben újrarajzolja, ezért a vektoros logó telefonképernyőn és kiállítási molinón is éles marad.

Vektorból rasztert készíteni egyszerű, mert a megjelenítő egyszerűen pixelekre festi az alakzatokat; az SVG PNG-be átalakító ezt egy másodperc alatt megteszi. Fordítva nincs veszteségmentes parancsikon, mert a pixelrács nem őrzi az alakzatokat, amelyekből létrejött. Valaminek meg kell néznie a pixeleket, és ki kell találnia, hol kezdődik és hol végződik az egyes alakzat. Ezt a lépést követésnek vagy vektorizálásnak hívják, és minden tisztességes PNG–SVG átalakító, az Illustratortól a parancssori programig, valójában egy követő.

Egyes átalakítók kihagyják a nehezét. Érvényes SVG fájlt írnak, amely egyetlen <image> elemben base64 szövegként tartalmazza az eredeti PNG-t, ettől a fájl nagyjából egyharmaddal nagyobb lesz a PNG-nél. Az eredmény SVG-ként megnyílik, és átmegy a fájltípus-ellenőrzésen, de továbbra is pixeles kép vektoros csomagolásban: nagyításkor ugyanazok a csipkés élek látszanak, a vágógép pedig nem talál követhető útvonalat. Nyisson meg bármely SVG-t szövegszerkesztőben, és keressen rá a data:image/png szövegre; ha megtalálja, semmi sem lett vektorizálva.

A követés azoknak a képeknek kedvez, amelyeket eleve alakzatokból rajzoltak. A tervezőprogramból exportált logó, az egyszerű ikon, a fekete körvonalas rajzfilmfigura, a beszkennelt aláírás vagy a sablon mind néhány egybefüggő színből áll, éles határokkal. A követő színenként régiókba csoportosít, végigköveti a határaikat, és sima görbéket illeszt rájuk, így az SVG közel kerül ahhoz, amit a tervező eredetileg rajzolt. A szövegmárkák vastag betűi is jól követhetők, mert egy nagy betű is csak egy kitöltött alakzat; minden karakter körvonallá válik, amelyet átszínezhet vagy átméretezhet, de újra már nem gépelhet.

A fényképek az ellenkező eset. Egy portré vagy termékfotó több ezer, finoman eltérő árnyalatot tartalmaz, amelyek egymásba mosódnak, és a vektoros formátum ezt nem tudja hatékonyan leírni. Ha 16 színt kér a követőtől, posztérizált illusztrációt kap látható sávokkal; 64 színnél több tízezer apró alakzatot kap, a PNG-nél jóval nagyobb fájlban, amely még így sem néz ki fényképnek. A lágy színátmenetek, árnyékok és derengések ugyanígy vékony sávok halmazává válnak. A kis szöveg a harmadik problémás pont: 10–12 px-en az élsimítás minden betűt a hátterébe olvaszt, és a követő nem tudja megkülönböztetni az „e” betűt az „o”-tól.

A felbontás fontosabb bármelyik beállításnál. A követő a görbéket az élek mentén futó pixellépcsőhöz illeszti, és minél finomabb a lépcső, annál hívebb a görbe. Ha a PNG-t Figmából, Canvából, Photoshopból vagy diasorból exportálta, exportálja újra a megjelenítési méret két-háromszorosában; az 1500–2000 px széles logó bőven elég munkaanyagot ad a követőnek. Ne nagyítson fel egy kis PNG-t előbb MI-alapú nagyítóval, hacsak az eredmény 100%-os nagyításon nem néz ki tisztán, mert a kitalált éltextúrát a követő ugyanolyan hűen követi, mint a valódi éleket.

Ezután tegye egyszerűvé a hátteret. A PNG támogatja a teljes átlátszóságot, és az átlátszó háttér a legegyszerűbb eset: minden teljesen átlátszó pixelt üres térként kezel, így az SVG-ben nincs fehér doboz a grafika mögött. Ha a PNG-nek tömör háttere van, előbb vágja szorosan a grafika köré; a kép kivágása arányra útmutatónk a pontos kadrírozást is bemutatja. A zsúfolt hátteret, például a pólóra fotózott logóét, követés előtt el kell távolítani, vagy egyetlen egyszínű festékkel át kell fedni.

Végül csökkentse a színek számát, mielőtt a követő megtenné Ön helyett. Rejtse el az árnyékokat, derengéseket és színátmeneti rétegeket a forrásfájlban, és a színátmenetes kitöltést cserélje a középső színére, ha a vektoros változatnak nincs rá szüksége. Számolja meg a megmaradt egybefüggő színeket a körvonal színével együtt, és írja fel a számot; ez a leghasznosabb szám, amelyet a következő lépésben megad. Ha ugyanannak a logónak JPEG és PNG változata között választ, a PNG-t vegye, mert a JPEG-tömörítés zajt ad minden él köré, ahogyan a JPG, JPEG és PNG összehasonlítása elmagyarázza.

Minden követő ugyanazt a három kérdést teszi fel, még ha a feliratok eltérnek is. Az első, hogy hány színt tartson meg. A PNG SVG-be átalakítóban a Színmód a Színes, Szürkeárnyalatos és Fekete-fehér között választ, a Színek száma pedig azt állítja be, hány csoportba soroljuk a pixeleket, 2 és 64 között. Igazítsa a felírt számhoz. Ha túl magasra állítja, a követő az élsimított szélpixeleket külön vékony színekre bontja, ami halvány glóriaként jelenik meg minden alakzat körül; ha túl alacsonyra, két márkaszínt egybeolvaszt.

A második kérdés az élek kezelése. A Simítás lekerekíti a pixelek hagyta lépcsőket, a Részletesség pedig azt dönti el, mekkora folt lehet még alakzat. A PNG oldal Részletesség 70 és Simítás 40 értékről indul, ami tiszta exportnál megtartja a kis sarkokat. Csökkentse a Részletességet, ha por és kósza pontok jelennek meg, növelje a Simítást, ha a görbék remegnek, a Görbék beállítást pedig állítsa Egyenes vonalak értékre egyenes élekből épülő geometriai logóknál, vagy Pixeles élek értékre a blokkos megjelenésű pixelgrafikánál.

A harmadik kérdés csak a fekete-fehér követésre vonatkozik: hol húzódjon a határ a tinta és a papír között. A Küszöbérték 1 és 254 között mozog, alapértéke 128. A küszöbnél sötétebb pixelek feketék lesznek, a világosabbak üresek. Vékony kék golyóstollal írt aláírásnál emelje 160–180 felé, hogy a halvány vonások megmaradjanak; kissé szürke papíron készült vastag filctollrajznál csökkentse 100 felé, hogy a papír textúrája ne váljon foltokká. Egyszerre csak egy beállítást változtasson, és hasonlítsa össze az eredményt, mert a hatásaik kölcsönhatásban állnak.

Ne álljon meg a miniatűrnél. Nyissa meg az SVG-t böngészőben, és nagyítson 400–800%-ra a legszűkebb görbénél, egy betűhasnál vagy egy csúcs hegyénél. A jó követés sima íveket mutat, és éles sarkokat ott, ahol a tervben sarok van; a gyenge remegéseket, bemélyedéseket és lekerekített csúcsokat. Ezután nézze meg a fájlt vektorszerkesztőben, például Inkscape-ben, Illustratorban vagy Figmában, és kapcsolja be a körvonal- vagy csomópontnézetet. Egy egyszerű kétszínű logóhoz jellemzően néhány száz csomópont kell; ha az Öné több ezret mutat, a követő zajt követett, és az útvonalakat fájdalmas lesz szerkeszteni vagy kivágni.

A fájlméret gyors ellenőrzés. Egy egyszerű logó optimalizált SVG-je jellemzően néhány kilobájttól néhány tíz kilobájtig terjed, gyakran kisebb az eredeti PNG-nél. Ha a követett fájl többszörösen nagyobb a forrás PNG-nél, az általában túl sok színt, túl sok részletet vagy egy olyan fotót jelent, amelyet nem kellett volna követni. Hagyja bekapcsolva az SVG optimalizálása beállítást, mert látható változás nélkül kerekíti a koordinátákat és vonja össze az útvonalakat, végül méretezze a grafikát plakátméretre és favicon-méretre is, hogy lássa, mindkettőn jól olvasható-e.

Az ingyenes asztali megoldás az Inkscape. Importálja a PNG-t, jelölje ki, és nyissa meg a Path > Trace Bitmap menüpontot (Shift+Alt+B). Az egyszeri szkennelési módok, például a Brightness cutoff, egyetlen fekete útvonalat adnak, ami vonalrajzhoz jó; a többszöri szkennelési módok meghatározott számú színt vagy szürkét követnek egymásra rakott rétegekként. Az Inkscape fekete-fehér követése a Potrace-re épül, amely követőkönyvtárat Peter Selinger adott ki 2001-ben. A Potrace maga parancssori program, amely PNG helyett PBM, PGM, PPM vagy BMP fájlt olvas, csak kéttónusú képeket kezel, és SVG, PDF, EPS vagy DXF fájlt ír, így jó választás nagy szkennelt tételek szkriptelt feldolgozásához.

Az Adobe Illustratorban az Image Trace az Illustrator CS6-ban váltotta fel a régebbi Live Trace-t. Helyezze el a PNG-t, nyissa meg a Window > Image Trace panelt, és indítson egy előbeállítással, például Black and White Logo, 3 Colors vagy 16 Colors, majd a speciális részben finomítsa a Paths, Corners és Noise értékeket. A követés addig él, amíg az Expand gombra nem kattint, amely hagyományos, szerkeszthető útvonalakká alakítja. Ha egyik program sincs telepítve, a böngészős átalakító ugyanazt a folyamatot futtatja: színek csökkentése, élek keresése, görbék illesztése; a kép SVG-be átalakító JPG, WebP és HEIC fájlt is elfogad, és SVG helyett EPS, PDF vagy DXF fájlt is tud írni.

A weben az SVG 2001 óta W3C-ajánlás, és minden mai böngésző megjeleníti <img> címkében, CSS-háttérként vagy közvetlenül a HTML-ben, ahol a színei akár egérráhúzásra is változhatnak. Egy követett logó általában a retina képernyőkhöz készült több PNG-méretet váltja ki egyetlen kis fájllal. A vágógépeknél az SVG az a formátum, amelyet a Cricut Design Space és a Silhouette Studio vár: minden követett alakzat vágási útvonallá válik, a többszínű követés pedig külön rétegekként érkezik, amelyeket különböző színű fóliából vághat ki. A lézervágók és CNC-szoftverek általában a DXF-et részesítik előnyben, amelyet a PNG DXF-be ugyanezekkel a követési beállításokkal készít el.

A nyomdák vektoros grafikát kérnek, mert a nyomógépnek, a hímzésdigitalizálónak vagy a feliratvágónak élekre van szüksége, nem pixelekre, és a követett SVG ezt matricáknál, pólóknál vagy molinónál gyakran kielégíti. Ez azonban továbbra is közelítés: a görbék illesztett becslések, a színek pixelekből átlagoltak, a szöveg pedig körvonallá alakított. Ezért cégembléma követése előtt kérdezze meg azt, aki készítette. Egy tervező vagy ügynökség szinte mindig rendelkezik az eredeti AI, EPS, PDF vagy SVG fájllal, pontos görbékkel, elnevezett színekkel és betűtípusokkal, és elküldeni egy perc. A követés akkor a megfelelő eszköz, ha az eredeti elveszett, ha a logó csak egy beszkennelt fejlécen maradt meg, vagy ha a grafika az Ön saját rajza.