Konvertera PNG till SVG: vektorisera logotyper och ikoner

En PNG är en rasterbild: ett fast rutnät av pixlar, var och en med en färg och eventuellt ett opacitetsvärde. En logotyp på 500 × 500 px innehåller exakt 250 000 sådana rutor och inget annat, så när du förstorar den till affischstorlek kan varje ruta bara bli större eller så suddas mellanrummen ut. En SVG är en vektorbild, en textfil som listar former som <path>, <circle> och <rect> med koordinater och fyllnadsfärger. En webbläsare eller en skärmaskin ritar om formerna i den storlek som behövs, och därför är en vektorlogotyp skarp både på en mobilskärm och på en mässbanderoll.

Att gå från vektor till raster är enkelt eftersom programmet bara målar formerna som pixlar; SVG till PNG gör precis det på en sekund. Åt andra hållet finns ingen förlustfri genväg, eftersom pixelrutnätet inte innehåller någon information om formerna som skapade det. Något måste titta på pixlarna och gissa var varje form börjar och slutar. Det steget kallas att spåra eller vektorisera, och varje ärlig PNG till SVG-konverterare, från Illustrator till ett kommandoradsprogram, är i grunden en spårare.

Vissa konverterare hoppar över det svåra. De skriver en giltig SVG-fil med ett enda <image>-element där originalets PNG är inbäddad som base64-text, vilket också gör filen ungefär en tredjedel större än PNG:n. Resultatet öppnas som SVG och klarar en filtypskontroll, men är fortfarande en pixelbild i ett vektorskal: zooma in så ser du samma hackiga kanter, och en skärmaskin hittar inga banor att följa. Öppna en valfri SVG i en textredigerare och sök efter data:image/png; finns den strängen där har ingenting vektoriserats.

Spårning passar bilder som från början ritats som former. En logotyp exporterad från ett designprogram, en platt ikon, en tecknad figur med svarta konturer, en inskannad signatur eller en stencil består alla av ett fåtal enfärgade ytor åtskilda av tydliga kanter. Spåraren grupperar varje färg i områden, följer deras gränser och anpassar mjuka kurvor längs dem, så SVG-filen hamnar nära de former designern ursprungligen ritade. Fet text i en ordbild spåras också bra, eftersom en stor bokstav bara är ännu en fylld form, och varje tecken blir en kontur som du kan färga om eller skala men inte längre skriva om.

Fotografier är motsatsen. Ett porträtt eller en produktbild har tusentals subtilt olika toner som flyter in i varandra, och ett vektorformat har inget effektivt sätt att beskriva det. Ber du en spårare om 16 färger får du en posteriserad illustration med synliga band; ber du om 64 får du tiotusentals små former i en fil som är mycket större än PNG:n och som ändå inte ser ut som ett foto. Mjuka toningar, skuggor och glöd blir på samma sätt travar av tunna band. Liten text är ett tredje problem: vid 10–12 px blandar kantutjämningen in varje bokstav i bakgrunden, och spåraren kan inte skilja ett ”e” från ett ”o”.

Upplösningen betyder mer än någon inställning. Spåraren anpassar varje kurva efter pixeltrappan längs en kant, och ju finare trappa, desto sannare kurva. Om du exporterade PNG:n själv från Figma, Canva, Photoshop eller en presentation, exportera den igen i två eller tre gånger visningsstorleken; en logotyp som är 1500–2000 px bred ger spåraren gott om underlag. Skala inte upp en liten PNG med en AI-förstorare först om inte resultatet ser rent ut vid 100 % zoom, eftersom påhittad kanttextur spåras lika troget som riktiga kanter.

Gör sedan bakgrunden enkel. PNG stöder full transparens, och en transparent bakgrund är det enklaste fallet: varje helt genomskinlig pixel behandlas som tomt utrymme, så SVG-filen får ingen vit ruta bakom motivet. Har PNG:n en enfärgad bakgrund, beskär tätt runt motivet först; vår guide om hur man beskär en bild till ett bildförhållande går igenom exakt beskärning. En rörig bakgrund, till exempel en logotyp fotograferad på en t-shirt, bör tas bort eller målas över med en enda färg före spårningen.

Minska till sist antalet färger innan spåraren gör det åt dig. Dölj skuggor, glöd och toningsöverlägg i källfilen, och ersätt en toning med dess mellanfärg om vektorversionen inte behöver den. Räkna de enfärgade ytorna som är kvar, inklusive konturfärgen, och skriv ner antalet; det är det mest användbara talet du anger i nästa steg. Om du väljer mellan en JPEG och en PNG av samma logotyp, ta PNG:n, eftersom JPEG-komprimering lägger brus kring varje kant, som förklaras i JPG vs JPEG vs PNG.

Varje spårare ställer samma tre frågor, även när namnen skiljer sig. Den första är hur många färger som ska behållas. I PNG till SVG-konverteraren väljer Färgläge mellan Färg, Gråskala och Svartvitt, och Antal färger anger i hur många grupper pixlarna sorteras, från 2 till 64. Anpassa det till antalet du skrev ner. Är det för högt delar spåraren upp kantutjämnade kantpixlar i egna tunna färger, vilket syns som en svag gloria runt varje form; är det för lågt slås två varumärkesfärger ihop till en.

Den andra frågan är hur kanterna ska hanteras. Utjämning rundar av trappstegen som pixlarna lämnar, och Detaljnivå avgör hur litet ett korn får vara och ändå bli en form. PNG-sidan startar på Detaljnivå 70 och Utjämning 40, vilket bevarar små hörn i en ren export. Sänk Detaljnivå om damm och lösa prickar dyker upp, höj Utjämning om kurvorna ser vickiga ut, och sätt Kurvor till Raka linjer för geometriska logotyper med raka kanter eller till Pixelkanter för pixelkonst som ska förbli kantig.

Den tredje frågan gäller bara svartvit spårning: var gränsen mellan bläck och papper ska dras. Tröskelvärde går från 1 till 254 med 128 som standard. Pixlar mörkare än tröskeln blir svarta, ljusare blir tomma. För en signatur skriven med tunn blå kulspetspenna, höj det mot 160–180 så att svaga streck överlever; för en kraftig tuschteckning på lätt grått papper, sänk det mot 100 så att papperstexturen inte blir prickar. Ändra en inställning i taget och jämför, eftersom effekterna påverkar varandra.

Nöj dig inte med miniatyren. Öppna SVG-filen i en webbläsare och zooma till 400–800 % på den snävaste kurvan, en bokstavsbåge eller en spets. En bra spårning visar mjuka bågar och skarpa hörn där designen har hörn; en svag visar vickningar, bucklor och avrundade spetsar. Titta sedan på filen i ett vektorprogram som Inkscape, Illustrator eller Figma och slå på kontur- eller nodvyn. En enkel tvåfärgad logotyp behöver vanligtvis några hundra noder; visar din flera tusen har spåraren följt brus och banorna blir besvärliga att redigera eller skära.

Filstorleken är en snabb kontroll. En optimerad SVG av en platt logotyp är vanligtvis några kilobyte till några tiotal kilobyte, ofta mindre än PNG:n den kom från. En spårad fil som är flera gånger större än käll-PNG:n betyder oftast för många färger, för mycket detaljer eller ett foto som inte borde ha spårats. Låt Optimera SVG vara på, eftersom det avrundar koordinater och slår ihop banor utan synlig skillnad, och skala till sist motivet upp till affischstorlek och ner till favicon-storlek för att se att det fungerar i båda.

Det kostnadsfria skrivbordsalternativet är Inkscape. Importera PNG:n, markera den och öppna Path > Trace Bitmap (Shift+Alt+B). Lägen med en genomgång, som Brightness cutoff, ger en svart bana, vilket passar streckteckningar; lägen med flera genomgångar spårar ett visst antal färger eller gråtoner som staplade lager. Inkscapes svartvita spårning bygger på Potrace, ett spårningsbibliotek som Peter Selinger släppte 2001. Potrace i sig är ett kommandoradsprogram som läser PBM, PGM, PPM eller BMP snarare än PNG, hanterar bara tvåtonsbilder och skriver SVG, PDF, EPS eller DXF, vilket gör det lämpligt för att skripta stora omgångar skanningar.

I Adobe Illustrator ersatte Image Trace den äldre Live Trace i Illustrator CS6. Placera PNG:n, öppna Window > Image Trace och utgå från en förinställning som Black and White Logo, 3 Colors eller 16 Colors, och justera sedan Paths, Corners och Noise i den avancerade delen. Spårningen förblir live tills du klickar på Expand, som gör den till vanliga redigerbara banor. Har du inget av programmen installerat kör en webbläsarkonverterare samma process: minska färger, hitta kanter, anpassa kurvor; bild till SVG-konverteraren tar också emot JPG, WebP och HEIC och kan skriva EPS, PDF eller DXF i stället för SVG.

På webben har SVG varit en W3C-rekommendation sedan 2001 och alla aktuella webbläsare visar det i en <img>-tagg, som CSS-bakgrund eller inbäddat i HTML, där färgerna till och med kan ändras vid hovring. En spårad logotyp ersätter ofta flera PNG-storlekar för retinaskärmar med en enda liten fil. För skärmaskiner är SVG det format som Cricut Design Space och Silhouette Studio förväntar sig: varje spårad form blir en skärbana, och en flerfärgsspårning kommer som separata lager som du kan skära i olika vinylfärger. Laserskärare och CNC-program föredrar oftast DXF, som PNG till DXF skapar med samma spårningsinställningar.

Tryckerier vill ha vektorgrafik eftersom en press, en brodyrdigitaliserare eller en skyltskärare behöver kanter, inte pixlar, och en spårad SVG räcker ofta för dekaler, t-shirts eller en banderoll. Det är ändå en approximation: kurvorna är anpassade gissningar, färgerna är medelvärden av pixlar och text är konverterad till konturer. Så innan du spårar ett företags logotyp, fråga den som gjorde den. En designer eller byrå har nästan alltid originalet som AI, EPS, PDF eller SVG med exakta kurvor, namngivna färger och typsnitt, och att skicka det tar en minut. Spårning är rätt verktyg när originalet är förlorat, när logotypen bara finns kvar på ett inskannat brevpapper eller när motivet är din egen teckning.