Slik konverterer du PNG til SVG: logoer, ikoner og strek

En PNG er et rasterbilde: et fast rutenett av piksler, hver med en farge og eventuelt en gjennomsiktighetsverdi. En logo på 500 × 500 px består av nøyaktig 250 000 slike ruter og ingenting annet, så hvis du forstørrer den til plakatstørrelse, kan hver rute bare bli større, eller så blir overgangene mellom dem uskarpe. En SVG er et vektorbilde, en tekstfil som lister former som <path>, <circle> og <rect> med koordinater og fyllfarger. En nettleser eller en skjæremaskin tegner formene på nytt i den størrelsen den trenger, og derfor er en vektorlogo skarp både på en mobilskjerm og på et messebanner.

Å gå fra vektor til raster er enkelt, fordi programmet bare maler formene ut i piksler. SVG til PNG gjør akkurat det på et sekund. Den andre veien finnes det ingen tapsfri snarvei, for pikselrutenettet inneholder ingen opplysninger om formene som skapte det. Noe må se på pikslene og gjette hvor hver form begynner og slutter. Dette gjettetrinnet kalles sporing eller vektorisering, og hver ærlige PNG til SVG-konverter, fra Illustrator til et kommandolinjeprogram, er en sporer under panseret.

Noen konvertere hopper over den vanskelige delen. De skriver en gyldig SVG-fil med ett <image>-element der den opprinnelige PNG-en er lagt inn som base64-tekst, noe som også gjør filen omtrent en tredjedel større enn PNG-en. Resultatet åpnes som en SVG og består en filtypesjekk, men det er fortsatt et pikselbilde i et vektorskall: zoomer du inn, ser du de samme hakkete kantene, og en skjæremaskin finner ingen baner å følge. Åpne en vilkårlig SVG i et tekstredigeringsprogram og søk etter data:image/png. Finnes den teksten, er ingenting vektorisert.

Sporing fungerer best for bilder som opprinnelig ble tegnet som former. En logo eksportert fra et designprogram, et flatt ikon, en tegneserie med svarte konturer, en skannet signatur eller en sjablong består alle av en håndfull ensfargede flater adskilt av tydelige kanter. Sporeren grupperer hver farge i områder, følger grensene deres og tilpasser glatte kurver langs dem, så SVG-en havner nær formene designeren opprinnelig tegnet. Fet tekst i en ordmerkelogo lar seg også spore godt, for en stor bokstav er bare en fylt form til, og hver bokstav blir en kontur du kan farge om eller endre størrelsen på, men ikke lenger skrive om.

Fotografier er det motsatte tilfellet. Et portrett eller et produktbilde har tusenvis av subtilt forskjellige toner som glir over i hverandre, og et vektorformat har ingen effektiv måte å beskrive det på. Ber du sporeren om 16 farger, får du en posterisert illustrasjon med synlige striper. Ber du om 64, får du titusenvis av bittesmå former i en fil som er mye større enn PNG-en, og som likevel ikke ligner på et foto. Myke overganger, skygger og glød blir til stabler av tynne striper på samme måte. Liten tekst er et tredje problemområde: ved 10–12 px blander kantutjevningen hver bokstav inn i bakgrunnen, og sporeren kan ikke skille en «e» fra en «o».

Oppløsningen betyr mer enn noen innstilling. Sporeren tilpasser hver kurve til trappetrinnene av piksler langs en kant, og jo finere trappen er, desto sannere blir kurven. Hvis du eksporterte PNG-en selv fra Figma, Canva, Photoshop eller en presentasjon, eksporterer du den på nytt i to til tre ganger visningsstørrelsen. En logo som er 1500–2000 px bred, gir sporeren mye å jobbe med. Ikke skaler opp en liten PNG med en KI-forstørrer først, med mindre resultatet ser rent ut ved 100 % zoom, for oppdiktet kanttekstur spores like trofast som ekte kanter.

Gjør deretter bakgrunnen enkel. PNG støtter full gjennomsiktighet, og en gjennomsiktig bakgrunn er det enkleste tilfellet: hver helt gjennomsiktig piksel behandles som tomt rom, så SVG-en får ingen hvit boks bak motivet. Hvis PNG-en har en ensfarget bakgrunn, beskjærer du tett rundt motivet først. Guiden vår om hvordan du beskjærer et bilde til et sideforhold viser nøyaktig utsnitt. En travel bakgrunn, for eksempel en logo fotografert på en T-skjorte, bør fjernes eller males over med én flat farge før sporing.

Til slutt reduserer du antall farger før sporeren gjør det for deg. Skjul skygger, glød og gradientoverlegg i kildefilen, og bytt ut en gradientfyll med mellomfargen hvis vektorversjonen ikke trenger den. Tell de ensfargede flatene som er igjen, inkludert konturfargen, og skriv ned tallet. Det er det mest nyttige tallet du skal oppgi i neste trinn. Hvis du kan velge mellom en JPEG og en PNG av samme logo, velger du PNG, siden JPEG-komprimering legger støy rundt hver kant, som forklart i JPG vs JPEG vs PNG.

Hver sporer stiller de samme tre spørsmålene, selv om navnene varierer. Det første er hvor mange farger som skal beholdes. I PNG til SVG-konverteren velger Fargemodus mellom Farge, Gråtoner og Svart-hvitt, og Antall farger bestemmer hvor mange grupper pikslene sorteres i, fra 2 til 64. Tilpass det til tallet du skrev ned. Settes det for høyt, deler sporeren kantpiksler med kantutjevning opp i egne tynne farger, noe som viser seg som en svak glorie rundt hver form. Settes det for lavt, slås to merkefarger sammen til én.

Det andre spørsmålet er hvordan kantene skal behandles. Utjevning runder av trappetrinnene som pikslene etterlater, og Detaljnivå avgjør hvor liten en flekk kan være og likevel bli en form. PNG-siden starter på Detaljnivå 70 og Utjevning 40, noe som beholder små hjørner i en ren eksport. Senk Detaljnivå hvis det dukker opp støv og tilfeldige prikker, øk Utjevning hvis kurvene ser ustø ut, og sett Kurver til Rette linjer for geometriske logoer bygd av rette kanter, eller til Pikselkanter for pikselkunst som skal forbli kantete.

Det tredje spørsmålet gjelder bare svart-hvitt-sporing: hvor skillet mellom blekk og papir skal gå. Terskel går fra 1 til 254 med 128 som standard. Piksler mørkere enn terskelen blir svarte, lysere blir tomme. For en signatur skrevet med tynn blå kulepenn øker du den mot 160–180 slik at svake streker overlever. For en fet tusjtegning på litt grått papir senker du den mot 100 slik at papirteksturen ikke blir til flekker. Endre én innstilling om gangen og sammenlign, for effektene påvirker hverandre.

Ikke stopp ved miniatyrbildet. Åpne SVG-en i en nettleser og zoom til 400–800 % på den trangeste kurven, en bokstavbue eller tuppen av en spiss. En god sporing viser glatte buer og skarpe hjørner der designet har hjørner. En svak sporing viser bølger, buler og avrundede spisser. Se deretter på filen i et vektorprogram som Inkscape, Illustrator eller Figma og slå på kontur- eller nodevisning. En enkel tofarget logo trenger typisk noen hundre noder. Viser din flere tusen, har sporeren fulgt støy, og banene blir tunge å redigere eller skjære.

Filstørrelsen er en rask sunnhetssjekk. En optimalisert SVG av en flat logo er typisk noen få kilobyte til noen titalls kilobyte, ofte mindre enn PNG-en den kom fra. En sporet fil som er flere ganger større enn kilde-PNG-en, betyr vanligvis for mange farger, for mye detaljer, eller et foto som ikke burde vært sporet. La Optimaliser SVG stå på, siden den runder av koordinater og slår sammen baner uten synlig endring, og skaler til slutt motivet opp til plakatstørrelse og ned til favorittikonstørrelse for å bekrefte at det fungerer godt i begge.

Det gratis skrivebordsalternativet er Inkscape. Importer PNG-en, merk den og åpne Path > Trace Bitmap (Shift+Alt+B). Enkeltskanning-moduser som Brightness cutoff gir én svart bane, noe som passer for strektegninger. Flerskanning-moduser sporer et valgt antall farger eller gråtoner som stablede lag. Inkscapes svart-hvitt-sporing bygger på Potrace, et sporingsbibliotek Peter Selinger ga ut i 2001. Potrace i seg selv er et kommandolinjeprogram som leser PBM, PGM, PPM eller BMP i stedet for PNG, bare håndterer tofargede bilder, og skriver SVG, PDF, EPS eller DXF, noe som gjør det til et godt valg for å skripte store mengder skanninger.

I Adobe Illustrator erstattet Image Trace det eldre Live Trace i Illustrator CS6. Plasser PNG-en, åpne Window > Image Trace og start med en forhåndsinnstilling som Black and White Logo, 3 Colors eller 16 Colors, og juster deretter Paths, Corners og Noise i den avanserte delen. Sporingen forblir levende til du klikker Expand, som gjør den om til vanlige redigerbare baner. Har du ingen av programmene installert, kjører en nettleserkonverter den samme prosessen: reduser farger, finn kanter, tilpass kurver. Bilde til SVG-konverteren godtar også JPG, WebP og HEIC og kan skrive EPS, PDF eller DXF i stedet for SVG.

På nettet har SVG vært en W3C-anbefaling siden 2001, og alle moderne nettlesere viser den i en <img>-tagg, som CSS-bakgrunn eller inline i HTML, der fargene til og med kan endres ved hover. En sporet logo erstatter vanligvis flere PNG-størrelser for retina-skjermer med én liten fil. For skjæremaskiner er SVG formatet Cricut Design Space og Silhouette Studio forventer: hver sporede form blir en skjærebane, og en flerfarget sporing kommer som separate lag du kan skjære fra ulike vinylfarger. Laserskjærere og CNC-programvare foretrekker vanligvis DXF, som PNG til DXF lager med de samme sporingsinnstillingene.

Trykkerier ber om vektorgrafikk fordi en trykkpresse, en brodérdigitaliserer eller en skiltskjærer trenger kanter, ikke piksler, og en sporet SVG er ofte nok til klistremerker, T-skjorter eller et banner. Det er likevel en tilnærming: kurvene er tilpassede gjetninger, fargene er gjennomsnitt av piksler, og tekst er gjort om til konturer. Før du sporer en bedriftslogo, bør du derfor spørre den som lagde den. En designer eller et byrå har nesten alltid originalen som AI, EPS, PDF eller SVG med nøyaktige kurver, navngitte farger og skrifter, og det tar dem et minutt å sende den. Sporing er riktig verktøy når originalen er borte, når logoen bare finnes på et skannet brevhode, eller når motivet er din egen tegning.