PNG na SVG omskakel: logo's, ikone en lynwerk natrek

'n PNG is 'n rasterbeeld: 'n vaste rooster piksels, elk met 'n kleur en opsioneel 'n deursigtigheidswaarde. 'n Logo van 500 × 500 px bevat presies 250 000 van daardie vierkantjies en niks meer nie, so as jy dit tot plakkaatgrootte vergroot, kan elke vierkantjie net groter word of die gapings tussen hulle vaag raak. 'n SVG is 'n vektorbeeld, 'n teks­lêer wat vorms soos <path>, <circle> en <rect> met koördinate en vulkleure lys. 'n Blaaier of snymasjien teken daardie vorms op enige grootte oor, en daarom bly 'n vektorlogo skerp op 'n foonskerm en op 'n vertoonbanier.

Van vektor na raster gaan is maklik, want die teken-enjin verf eenvoudig die vorms in piksels; SVG na PNG doen presies dit in 'n sekonde. Die ander kant toe is daar geen verliesvrye kortpad nie, want die pikselrooster hou geen rekord van die vorms wat dit voortgebring het nie. Iets moet na die piksels kyk en raai waar elke vorm begin en eindig. Daardie raaistap heet traseer of vektoriseer, en elke eerlike PNG-na-SVG-omskakelaar, van Illustrator tot 'n opdragreëlprogram, is onderliggend 'n traseerder.

Sommige omskakelaars slaan die moeilike deel oor. Hulle skryf 'n geldige SVG-lêer met een <image>-element waarin die oorspronklike PNG as base64-teks ingebed is, wat die lêer ook ongeveer 'n derde groter as die PNG maak. Die resultaat maak as SVG oop en slaag 'n lêertipe-toets, maar dit is steeds 'n pikselbeeld in 'n vektoromhulsel: zoem in en jy sien dieselfde getande rande, en 'n snymasjien vind geen paaie om te volg nie. Maak enige SVG in 'n teksredigeerder oop en soek na data:image/png; as daardie string daar is, is niks gevektoriseer nie.

Traseer beloon beelde wat van die begin af as vorms geteken is. 'n Logo uit 'n ontwerptoepassing, 'n plat ikoon, 'n spotprent met swart omlyning, 'n geskandeerde handtekening of 'n sjabloon bestaan almal uit 'n handjievol soliede kleure wat deur duidelike rande geskei word. Die traseerder groepeer elke kleur in gebiede, volg hul grense en pas gladde kurwes daarlangs in, sodat die SVG naby die vorms kom wat die ontwerper oorspronklik geteken het. Vet letters in 'n woordmerk traseer ook goed, want 'n groot letter is net nog 'n gevulde vorm, en elke karakter word 'n omlyning wat jy kan herkleur of in grootte verander, maar nie meer kan hertik nie.

Foto's is die teenoorgestelde geval. 'n Portret of produkfoto het duisende subtiel verskillende tone wat in mekaar vervloei, en 'n vektorformaat het geen doeltreffende manier om dit te beskryf nie. Vra 'n traseerder vir 16 kleure en jy kry 'n geposteriseerde illustrasie met sigbare bande; vra vir 64 en jy kry tienduisende klein vorms in 'n lêer wat baie groter as die PNG is en steeds nie soos 'n foto lyk nie. Sagte gradiënte, skaduwees en gloede word op dieselfde manier stapels dun bande. Klein teks is 'n derde probleem: by 10–12 px meng anti-aliasing elke letter met sy agtergrond, en die traseerder kan nie 'n "e" van 'n "o" onderskei nie.

Resolusie maak meer saak as enige instelling. Die traseerder pas elke kurwe by die trappies van piksels langs 'n rand, en hoe fyner daardie trappies, hoe waarheidsgetrouer die kurwe. As jy die PNG self uit Figma, Canva, Photoshop of 'n skyfiestel uitgevoer het, voer dit weer uit teen twee of drie keer die vertoongrootte; 'n logo van 1500–2000 px breed gee 'n traseerder volop om mee te werk. Moenie 'n klein PNG eers met 'n KI-vergroter opskaal nie, tensy die resultaat by 100 % zoem skoon lyk, want uitgedinkte randtekstuur word net so getrou getraseer as ware rande.

Maak dan die agtergrond eenvoudig. PNG ondersteun volle deursigtigheid, en 'n deursigtige agtergrond is die maklikste geval: elke heeltemal deursigtige piksel word as leë ruimte hanteer, so die SVG het geen wit blok agter die kunswerk nie. As die PNG 'n soliede agtergrond het, sny eers netjies om die kunswerk; ons gids oor hoe om 'n beeld tot 'n verhouding uit te sny dek presiese raamwerk. 'n Besige agtergrond, soos 'n logo wat op 'n T-hemp afgeneem is, moet verwyder of met een egalige kleur oorverf word voor jy traseer.

Verminder laastens die aantal kleure voordat die traseerder dit vir jou doen. Versteek skaduwees, gloede en gradiënt-oorlegsels in die bronlêer, en vervang 'n gradiëntvulling met sy middelkleur as die vektorweergawe dit nie nodig het nie. Tel die soliede kleure wat oorbly, insluitend die omlynkleur, en skryf die getal neer; dit is die nuttigste getal wat jy in die volgende stap sal invoer. As jy tussen 'n JPEG en 'n PNG van dieselfde logo kies, neem die PNG, aangesien JPEG-kompressie geraas om elke rand voeg, soos verduidelik in JPG vs JPEG vs PNG.

Elke traseerder vra dieselfde drie vrae, selfs wanneer die byskrifte verskil. Die eerste is hoeveel kleure om te hou. In die PNG na SVG-omskakelaar kies Kleurmodus tussen Kleur, Grysskaal en Swart-en-wit, en Aantal kleure stel in hoeveel groepe die piksels gesorteer word, van 2 tot 64. Pas dit by die getal wat jy neergeskryf het. Te hoog laat die traseerder anti-aliasing-randpiksels in hul eie dun kleure verdeel, wat as 'n flou halo om elke vorm wys; te laag voeg twee handelsmerkkleure in een saam.

Die tweede vraag is hoe om rande te hanteer. Gladmaak rond die trappies af wat piksels agterlaat, en Detail bepaal hoe klein 'n spikkel mag wees en nog 'n vorm word. Die PNG-bladsy begin by Detail 70 en Gladmaak 40, wat klein hoeke op 'n skoon uitvoer behou. Verlaag Detail as stof en dwaal-kolletjies verskyn, verhoog Gladmaak as kurwes wiebelrig lyk, en stel Kurwes op Reguit lyne vir meetkundige logo's met reguit rande of op Pikselrande vir pikselkuns wat blokkerig moet bly.

Die derde vraag geld net vir swart-en-wit traseer: waar om die lyn tussen ink en papier te trek. Drempel loop van 1 tot 254 met 128 as verstek. Piksels donkerder as die drempel word swart, ligter een word leeg. Vir 'n handtekening in dun blou bolpuntpen, verhoog dit na 160–180 sodat flou strepe oorleef; vir 'n vet merkpentekening op effens grys papier, verlaag dit na 100 sodat die papiertekstuur nie in spikkels verander nie. Verander een instelling op 'n slag en vergelyk, want die uitwerkings beïnvloed mekaar.

Moenie by die duimnaelskets ophou nie. Maak die SVG in 'n blaaier oop en zoem na 400–800 % op die kruppelste kurwe, 'n letterbuik of die punt van 'n spits. 'n Goeie trasering wys gladde boë en skerp hoeke waar die ontwerp hoeke het; 'n swak een wys wiebelinge, duike en afgeronde punte. Kyk dan na die lêer in 'n vektorredigeerder soos Inkscape, Illustrator of Figma en skakel omlyn- of nodusaansig aan. 'n Eenvoudige tweekleur-logo het gewoonlik 'n paar honderd nodusse nodig; as joune etlike duisende wys, het die traseerder geraas gevolg en sal die paaie moeilik wees om te wysig of te sny.

Lêergrootte is 'n vinnige gesondheidskontrole. 'n Geoptimaliseerde SVG van 'n plat logo is gewoonlik 'n paar kilogrepe tot 'n paar tien kilogrepe, dikwels kleiner as die PNG waaruit dit kom. 'n Getraseerde lêer wat etlike kere groter as die bron-PNG is, beteken gewoonlik te veel kleure, te veel detail, of 'n foto wat nie getraseer moes word nie. Hou Optimaliseer SVG aan, want dit rond koördinate af en voeg paaie saam sonder sigbare verandering, en skaal die kunswerk laastens op na plakkaatgrootte en af na favicon-grootte om te bevestig dat dit by albei goed lees.

Die gratis lessenaaropsie is Inkscape. Voer die PNG in, kies dit en maak Path > Trace Bitmap oop (Shift+Alt+B). Enkelskandeer-modusse soos Brightness cutoff lewer een swart pad, wat by lyntekeninge pas; veelvuldige-skandeer-modusse traseer 'n vaste aantal kleure of grystone as gestapelde lae. Inkscape se swart-en-wit traseer is op Potrace gebou, 'n traseerbiblioteek wat Peter Selinger in 2001 vrygestel het. Potrace self is 'n opdragreëlprogram wat PBM, PGM, PPM of BMP eerder as PNG lees, net tweetoonbeelde hanteer, en SVG, PDF, EPS of DXF skryf, wat dit 'n goeie keuse maak om groot bondels skanderings te skripteer.

In Adobe Illustrator het Image Trace die ouer Live Trace in Illustrator CS6 vervang. Plaas die PNG, maak Window > Image Trace oop en begin met 'n voorinstelling soos Black and White Logo, 3 Colors of 16 Colors, en pas dan Paths, Corners en Noise in die gevorderde afdeling aan. Die trasering bly lewend totdat jy op Expand klik, wat dit in gewone wysigbare paaie verander. As jy nie een van die programme geïnstalleer het nie, volg 'n blaaieromskakelaar dieselfde proses van kleure verminder, rande vind en kurwes pas; die beeld na SVG-omskakelaar aanvaar ook JPG, WebP en HEIC en kan EPS, PDF of DXF in plaas van SVG skryf.

Op die web is SVG sedert 2001 'n W3C-aanbeveling en elke huidige blaaier teken dit in 'n <img>-etiket, as 'n CSS-agtergrond of inlyn in die HTML, waar sy kleure selfs by sweef kan verander. 'n Getraseerde logo vervang gewoonlik verskeie PNG-groottes vir retina-skerms met een klein lêer. Vir snymasjiene is SVG die formaat wat Cricut Design Space en Silhouette Studio verwag: elke getraseerde vorm word 'n snypad, en 'n veelkleur-trasering kom as aparte lae wat jy uit verskillende vinielkleure kan sny. Lasersnyers en CNC-sagteware verkies gewoonlik DXF, wat PNG na DXF uit dieselfde traseerinstellings lewer.

Drukkers vra vir vektorkunswerk omdat 'n pers, 'n borduur-digitaliseerder of 'n bordsnyer rande nodig het, nie piksels nie, en 'n getraseerde SVG voldoen dikwels daaraan vir plakkers, T-hemde of 'n banier. Dit bly 'n benadering: die kurwes is ingepaste raaiskote, die kleure is uit piksels gemiddeld, en teks is omlyn. Vra dus eers vir wie die logo gemaak het voor jy 'n maatskappylogo traseer. 'n Ontwerper of agentskap het byna altyd die oorspronklike AI, EPS, PDF of SVG met presiese kurwes, benoemde kleure en lettertipes, en dit stuur neem 'n minuut. Traseer is die regte hulpmiddel wanneer daardie oorspronklike verlore is, wanneer die logo net op 'n geskandeerde briefhoof oorleef, of wanneer die kunswerk jou eie tekening is.