Konverter PNG til SVG: vektoriser logoer, ikoner og streger

En PNG er et rasterbillede: et fast gitter af pixels, som hver har en farve og eventuelt en værdi for gennemsigtighed. Et logo på 500 × 500 px indeholder præcis 250.000 af de små firkanter og intet andet, så når du forstørrer det til plakatstørrelse, kan hver firkant kun blive større, eller overgangene mellem dem bliver slørede. En SVG er et vektorbillede, en tekstfil, der angiver figurer som <path>, <circle> og <rect> med koordinater og fyldfarver. En browser eller en skæremaskine tegner figurerne igen i den størrelse, den har brug for, og derfor er et vektorlogo skarpt både på en telefonskærm og på et messebanner.

Fra vektor til raster er let, for programmet maler bare figurerne ind i pixels; SVG til PNG gør netop det på et øjeblik. Den modsatte vej findes der ingen tabsfri genvej, for pixelgitteret rummer ingen oplysninger om de figurer, der skabte det. Noget må se på pixelsene og gætte, hvor hver figur begynder og slutter. Det gæt kaldes sporing eller vektorisering, og enhver ærlig PNG til SVG-konverter, fra Illustrator til et kommandolinjeprogram, er i bund og grund en sporingsmotor.

Nogle konvertere springer det svære over. De skriver en gyldig SVG-fil med ét <image>-element, hvor den oprindelige PNG ligger indlejret som base64-tekst, og det gør også filen cirka en tredjedel større end PNG'en. Resultatet åbner som en SVG og består et filtypetjek, men er stadig et pixelbillede i en vektorindpakning: zoom ind, og du ser de samme takkede kanter, og en skæremaskine finder ingen stier at følge. Åbn en vilkårlig SVG i en teksteditor og søg efter data:image/png; hvis den streng findes, er intet blevet vektoriseret.

Sporing fungerer bedst på billeder, der fra start var tegnet som former. Et logo eksporteret fra et designprogram, et fladt ikon, en tegneserie med sorte konturer, en indscannet underskrift eller en stencil består alle af en håndfuld ensfarvede flader adskilt af tydelige kanter. Sporingen samler hver farve i områder, følger deres grænser og lægger bløde kurver langs dem, så SVG-filen kommer tæt på de former, designeren oprindelig tegnede. Fed skrift i et ordmærke sporer også godt, fordi et stort bogstav blot er endnu en fyldt figur, og hvert tegn bliver til en kontur, du kan omfarve eller skalere, men ikke længere redigere som tekst.

Fotografier er det modsatte tilfælde. Et portræt eller et produktbillede har tusindvis af svagt forskellige toner, der glider over i hinanden, og et vektorformat har ingen effektiv måde at beskrive det på. Bed sporingen om 16 farver, og du får en posteriseret illustration med synlige bånd; bed om 64, og du får titusindvis af små former i en fil, der er langt større end PNG'en, og som stadig ikke ligner et foto. Bløde farveovergange, skygger og glød bliver på samme måde til stakke af tynde bånd. Små tekster er et tredje problem: ved 10–12 px smelter kantudglatningen hvert bogstav sammen med baggrunden, og sporingen kan ikke kende forskel på et "e" og et "o".

Opløsningen betyder mere end nogen indstilling. Sporingen tilpasser hver kurve til trappetrinene af pixels langs en kant, og jo finere trappen er, desto mere præcis bliver kurven. Hvis du selv har eksporteret PNG'en fra Figma, Canva, Photoshop eller en præsentation, så eksportér den igen i to-tre gange visningsstørrelsen; et logo på 1500–2000 px i bredden giver sporingen rigeligt at arbejde med. Opskaler ikke en lille PNG med en AI-forstørrer først, medmindre resultatet ser rent ud ved 100 % zoom, for opfundet kanttekstur bliver sporet lige så trofast som rigtige kanter.

Gør derefter baggrunden enkel. PNG understøtter fuld gennemsigtighed, og en gennemsigtig baggrund er det letteste tilfælde: hver helt gennemsigtig pixel behandles som tomt rum, så SVG-filen ikke får en hvid boks bag motivet. Hvis PNG'en har en ensfarvet baggrund, så beskær tæt omkring motivet først; vores guide til at beskære et billede til et billedformat gennemgår præcis beskæring. En urolig baggrund, for eksempel et logo fotograferet på en T-shirt, bør fjernes eller males over med én ensartet farve før sporing.

Til sidst skal du nedbringe antallet af farver, før sporingen gør det for dig. Skjul skygger, glød og overlejrede farveovergange i kildefilen, og erstat en farveovergang med dens midterfarve, hvis vektorversionen ikke behøver den. Tæl de ensfarvede flader, der er tilbage, inklusive konturfarven, og skriv tallet ned; det er det mest nyttige tal, du skal indtaste i næste trin. Hvis du kan vælge mellem en JPEG og en PNG af det samme logo, så tag PNG'en, da JPEG-komprimering lægger støj omkring hver kant, som forklaret i JPG vs. JPEG vs. PNG.

Enhver sporingsmotor stiller de samme tre spørgsmål, også selv om navnene er forskellige. Det første er, hvor mange farver der skal bevares. I PNG til SVG-konverteren vælger Farvetilstand mellem Farve, Gråtoner og Sort-hvid, og Antal farver angiver, hvor mange grupper pixelsene sorteres i, fra 2 til 64. Tilpas det til det tal, du skrev ned. Hvis det er for højt, deler sporingen kantpixels med kantudglatning op i deres egne tynde farver, hvilket ses som en svag glorie omkring hver figur; hvis det er for lavt, slås to af mærkets farver sammen til én.

Det andet spørgsmål er, hvordan kanter skal behandles. Udglatning runder trappetrinene af, som pixels efterlader, og Detaljer afgør, hvor lille en plet må være og stadig blive til en figur. PNG-siden starter med Detaljer på 70 og Udglatning på 40, hvilket bevarer små hjørner i en ren eksport. Sænk Detaljer, hvis der dukker støv og forkerte prikker op, hæv Udglatning, hvis kurverne ser rystende ud, og sæt Kurver til Rette linjer for geometriske logoer bygget af rette kanter eller til Pixelkanter for pixelkunst, der skal forblive kantet.

Det tredje spørgsmål gælder kun sort-hvid sporing: hvor går grænsen mellem blæk og papir. Tærskel går fra 1 til 254 med 128 som standard. Pixels mørkere end tærsklen bliver sorte, lysere bliver tomme. For en underskrift skrevet med tynd blå kuglepen skal du hæve den mod 160–180, så svage streger overlever; for en kraftig tegning med tusch på let gråt papir skal du sænke den mod 100, så papirets struktur ikke bliver til pletter. Ændr én indstilling ad gangen og sammenlign, for effekterne påvirker hinanden.

Nøjes ikke med miniaturen. Åbn SVG-filen i en browser og zoom til 400–800 % på den mest krappe kurve, et bogstavs bue eller spidsen af et hjørne. En god sporing viser bløde buer og skarpe hjørner, hvor designet har hjørner; en svag viser rystelser, buler og afrundede spidser. Se derefter filen i et vektorprogram som Inkscape, Illustrator eller Figma og slå kontur- eller knudepunktsvisning til. Et enkelt logo i to farver kræver typisk nogle hundrede knudepunkter; hvis dit viser flere tusinde, har sporingen fulgt støj, og stierne bliver besværlige at redigere eller skære.

Filstørrelsen er et hurtigt fornuftstjek. En optimeret SVG af et fladt logo fylder typisk fra nogle få kilobytes til nogle få titals kilobytes, ofte mindre end den PNG, den kom fra. En sporet fil, der er flere gange større end kilde-PNG'en, tyder normalt på for mange farver, for mange detaljer eller et foto, der ikke burde være sporet. Lad Optimér SVG være slået til, da den afrunder koordinater og slår stier sammen uden synlig forskel, og skalér til sidst motivet op til plakatstørrelse og ned til favicon-størrelse for at sikre, at det fungerer i begge.

Den gratis skrivebordsløsning er Inkscape. Importér PNG'en, markér den og åbn Sti > Spor bitmap (Shift+Alt+B). Tilstande med enkelt scanning, som Lysstyrkegrænse, giver én sort sti, hvilket passer til stregtegninger; tilstande med flere scanninger sporer et bestemt antal farver eller gråtoner som stablede lag. Inkscapes sort-hvid sporing bygger på Potrace, et sporingsbibliotek, som Peter Selinger udgav i 2001. Potrace er selv et kommandolinjeprogram, der læser PBM, PGM, PPM eller BMP frem for PNG, kun håndterer billeder i to toner og skriver SVG, PDF, EPS eller DXF, hvilket gør det velegnet til at scripte store serier af scanninger.

I Adobe Illustrator afløste Image Trace den ældre Live Trace i Illustrator CS6. Placér PNG'en, åbn Vindue > Image Trace og start fra en forudindstilling som Sort-hvidt logo, 3 farver eller 16 farver, og justér derefter Stier, Hjørner og Støj i det avancerede afsnit. Sporingen forbliver live, til du klikker på Udvid, som gør den til almindelige redigerbare stier. Hvis du ikke har nogen af programmerne installeret, kører en konverter i browseren den samme proces: reducér farver, find kanter, tilpas kurver; billede til SVG-konverteren accepterer også JPG, WebP og HEIC og kan skrive EPS, PDF eller DXF i stedet for SVG.

På nettet har SVG været en W3C-anbefaling siden 2001, og alle nuværende browsere viser det i et <img>-tag, som CSS-baggrund eller inline i HTML, hvor farverne endda kan ændre sig ved hover. Et sporet logo erstatter som regel flere PNG-størrelser til retina-skærme med én lille fil. Til skæremaskiner er SVG det format, Cricut Design Space og Silhouette Studio forventer: hver sporet figur bliver til en skæresti, og en sporing i flere farver kommer som separate lag, du kan skære i forskellige farver vinyl. Laserskærere og CNC-software foretrækker normalt DXF, som PNG til DXF laver ud fra de samme sporingsindstillinger.

Trykkerier beder om vektorgrafik, fordi en trykpresse, en broderidigitaliserer eller en skæreplotter har brug for kanter, ikke pixels, og en sporet SVG opfylder ofte det til klistermærker, T-shirts eller et banner. Det er dog stadig en tilnærmelse: kurverne er tilpassede gæt, farverne er gennemsnit af pixels, og tekst er omdannet til konturer. Så før du sporer et firmalogo, så spørg den, der lavede det. En designer eller et bureau har næsten altid originalen som AI, EPS, PDF eller SVG med præcise kurver, navngivne farver og skrifttyper, og det tager dem et minut at sende. Sporing er det rette værktøj, når originalen er gået tabt, når logoet kun findes på et indscannet brevpapir, eller når motivet er din egen tegning.