PNG naar SVG converteren: logo's, iconen en lijnwerk

Een PNG is een rasterafbeelding: een vast raster van pixels, elk met een kleur en eventueel een dekkingswaarde. Een logo van 500 × 500 px bevat precies 250.000 van die vierkantjes en niets anders, dus als je het tot posterformaat vergroot, wordt elk vierkantje alleen groter of worden de overgangen ertussen onscherp. Een SVG is een vectorafbeelding, een tekstbestand met een lijst vormen zoals <path>, <circle> en <rect> met coördinaten en vulkleuren. Een browser of snijmachine tekent die vormen opnieuw op elk gewenst formaat, daarom blijft een vectorlogo scherp op een telefoonscherm én op een beursbanner.

Van vector naar raster is makkelijk, omdat de renderer de vormen gewoon in pixels schildert; SVG naar PNG doet precies dat in een seconde. De andere kant op bestaat er geen verliesvrije route, omdat het pixelraster niets vastlegt over de vormen waaruit het is ontstaan. Iets moet naar de pixels kijken en raden waar elke vorm begint en eindigt. Die stap heet tracen of vectoriseren, en elke eerlijke PNG-naar-SVG-converter, van Illustrator tot een opdrachtregelprogramma, is onderin een tracer.

Sommige converters slaan het moeilijke deel over. Ze schrijven een geldig SVG-bestand met één <image>-element waarin de originele PNG als base64-tekst is ingebed, waardoor het bestand ook ongeveer een derde groter wordt dan de PNG. Het resultaat opent als SVG en slaagt voor een bestandstypecontrole, maar blijft een pixelafbeelding in een vectorverpakking: zoom in en je ziet dezelfde hoekige randen, en een snijmachine vindt geen paden om te volgen. Open een SVG in een teksteditor en zoek naar data:image/png; staat die tekst erin, dan is er niets gevectoriseerd.

Tracen werkt het best bij afbeeldingen die oorspronkelijk als vormen zijn getekend. Een logo uit een ontwerpprogramma, een plat icoon, een cartoon met zwarte contouren, een gescande handtekening of een sjabloon bestaan allemaal uit een handvol egale kleuren met duidelijke randen. De tracer groepeert elke kleur in vlakken, volgt de randen en legt er vloeiende curven langs, zodat de SVG dicht bij de vormen komt die de ontwerper oorspronkelijk tekende. Vette letters in een woordmerk tracen ook goed, want een grote letter is gewoon nog een gevulde vorm. Elke letter wordt een contour die je kunt herkleuren of schalen, maar niet meer kunt aanpassen als tekst.

Foto's zijn het tegenovergestelde geval. Een portret of productfoto heeft duizenden subtiel verschillende tinten die in elkaar overlopen, en een vectorformaat kan dat niet efficiënt beschrijven. Vraag je een tracer om 16 kleuren, dan krijg je een geposteriseerde illustratie met zichtbare banden; vraag je er 64, dan krijg je tienduizenden kleine vormen in een bestand dat veel groter is dan de PNG en nog steeds niet op een foto lijkt. Zachte verlopen, slagschaduwen en gloed worden op dezelfde manier stapels dunne banden. Kleine tekst is een derde probleem: bij 10–12 px laat anti-aliasing elke letter in de achtergrond opgaan en kan de tracer een "e" niet van een "o" onderscheiden.

Resolutie weegt zwaarder dan welke instelling ook. De tracer past elke curve aan op het trapje van pixels langs een rand, en hoe fijner dat trapje, hoe getrouwer de curve. Heb je de PNG zelf geëxporteerd uit Figma, Canva, Photoshop of een presentatie, exporteer hem dan opnieuw op twee à drie keer het weergaveformaat; een logo van 1500–2000 px breed geeft een tracer genoeg om mee te werken. Schaal een kleine PNG niet eerst op met een AI-vergroter, tenzij het resultaat bij 100 % zoom schoon oogt, want verzonnen randtextuur wordt net zo trouw getraced als echte randen.

Maak vervolgens de achtergrond eenvoudig. PNG ondersteunt volledige transparantie en een transparante achtergrond is het makkelijkste geval: elke volledig transparante pixel geldt als lege ruimte, dus de SVG heeft geen wit vlak achter het beeld. Heeft de PNG een effen achtergrond, snijd dan eerst strak om het beeld heen bij; onze gids over een afbeelding bijsnijden naar een verhouding behandelt het exacte kader. Een drukke achtergrond, zoals een logo gefotografeerd op een T-shirt, moet je vóór het tracen verwijderen of overschilderen met één vlakke kleur.

Verlaag ten slotte zelf het aantal kleuren voordat de tracer het voor je doet. Verberg schaduwen, gloed en verlooplagen in het bronbestand en vervang een verloopvulling door de middelste kleur als de vectorversie die niet nodig heeft. Tel de resterende egale kleuren, inclusief de contourkleur, en noteer het getal; het is het nuttigste getal dat je in de volgende stap invoert. Kies je tussen een JPEG en een PNG van hetzelfde logo, neem dan de PNG, want JPEG-compressie voegt ruis toe rond elke rand, zoals uitgelegd in JPG vs JPEG vs PNG.

Elke tracer stelt dezelfde drie vragen, ook als de labels verschillen. De eerste is hoeveel kleuren je houdt. In de PNG naar SVG-converter kies je met Kleurmodus tussen Kleur, Grijstinten en Zwart-wit, en Aantal kleuren bepaalt in hoeveel clusters de pixels worden verdeeld, van 2 tot 64. Stem het af op het aantal dat je hebt genoteerd. Te hoog ingesteld splitst de tracer anti-aliased randpixels af in eigen dunne kleuren, wat zichtbaar wordt als een zwakke halo rond elke vorm; te laag voegt twee merkkleuren samen tot één.

De tweede vraag is hoe randen worden behandeld. Afvlakking rondt de trapjes af die pixels achterlaten en Detail bepaalt hoe klein een vlekje mag zijn om nog een vorm te worden. De PNG-pagina begint op Detail 70 en Afvlakking 40, waarmee kleine hoeken behouden blijven bij een schone export. Verlaag Detail als er stof en losse stippen verschijnen, verhoog Afvlakking als curven wiebelig ogen, en zet Curven op Rechte lijnen voor geometrische logo's met rechte randen of op Pixelranden voor pixelart die blokkerig moet blijven.

De derde vraag geldt alleen voor zwart-wit tracen: waar leg je de grens tussen inkt en papier. Drempelwaarde loopt van 1 tot 254 met 128 als standaard. Pixels donkerder dan de drempel worden zwart, lichtere worden leeg. Verhoog de waarde naar 160–180 voor een handtekening met dunne blauwe balpen, zodat vage streken behouden blijven; verlaag haar naar 100 voor een dikke stifttekening op licht grijs papier, zodat de papiertextuur niet in vlekjes verandert. Wijzig telkens één instelling en vergelijk, want de effecten beïnvloeden elkaar.

Stop niet bij het miniatuur. Open de SVG in een browser en zoom naar 400–800 % op de strakste curve, de ronding van een letter of de punt van een punt. Een goede trace toont vloeiende bogen en scherpe hoeken waar het ontwerp hoeken heeft; een zwakke toont wiebels, deuken en afgeronde punten. Bekijk het bestand daarna in een vectoreditor zoals Inkscape, Illustrator of Figma met de contour- of knooppuntweergave aan. Een eenvoudig logo in twee kleuren heeft doorgaans een paar honderd knooppunten nodig; toont het jouwe er enkele duizenden, dan volgde de tracer ruis en worden de paden lastig te bewerken of te snijden.

De bestandsgrootte is een snelle controle. Een geoptimaliseerde SVG van een vlak logo is doorgaans een paar kilobyte tot enkele tientallen kilobytes, vaak kleiner dan de PNG waaruit hij komt. Een getraced bestand dat meerdere keren groter is dan de bron-PNG wijst meestal op te veel kleuren, te veel detail of een foto die je niet had moeten tracen. Laat SVG optimaliseren ingeschakeld, want het rondt coördinaten af en voegt paden samen zonder zichtbaar verschil. Schaal het beeld ten slotte op tot posterformaat en af tot favicongrootte om te zien of het op beide goed leesbaar is.

De gratis desktopoptie is Inkscape. Importeer de PNG, selecteer hem en open Pad > Bitmap overtrekken (Shift+Alt+B). Modi met één scan, zoals Helderheidsgrens, leveren één zwart pad op, wat past bij lijntekeningen; modi met meerdere scans tracen een vast aantal kleuren of grijstinten als gestapelde lagen. Het zwart-wittracen van Inkscape is gebouwd op Potrace, een traceerbibliotheek die Peter Selinger in 2001 uitbracht. Potrace zelf is een opdrachtregelprogramma dat PBM, PGM, PPM of BMP leest in plaats van PNG, alleen tweekleurige afbeeldingen aankan en SVG, PDF, EPS of DXF schrijft, wat het een goede keuze maakt om grote reeksen scans te scripten.

In Adobe Illustrator verving Image Trace het oudere Live Trace in Illustrator CS6. Plaats de PNG, open Venster > Image Trace en begin met een preset zoals Black and White Logo, 3 Colors of 16 Colors. Pas daarna Paths, Corners en Noise aan in het uitgebreide gedeelte. De trace blijft live tot je op Expand klikt, waarna hij gewone bewerkbare paden wordt. Heb je geen van beide programma's geïnstalleerd, dan doorloopt een browserconverter hetzelfde proces van kleuren verminderen, randen zoeken en curven passen; de afbeelding naar SVG-converter accepteert ook JPG, WebP en HEIC en kan EPS, PDF of DXF schrijven in plaats van SVG.

Op het web is SVG sinds 2001 een W3C-aanbeveling en elke actuele browser toont het in een <img>-tag, als CSS-achtergrond of inline in de HTML, waar de kleuren zelfs bij hover kunnen veranderen. Een getraced logo vervangt meestal meerdere PNG-formaten voor retinaschermen door één klein bestand. Voor snijmachines is SVG het formaat dat Cricut Design Space en Silhouette Studio verwachten: elke getrace vorm wordt een snijpad en een trace in meerdere kleuren komt binnen als aparte lagen die je uit verschillende vinylkleuren kunt snijden. Lasersnijders en CNC-software geven meestal de voorkeur aan DXF, dat PNG naar DXF met dezelfde traceerinstellingen maakt.

Drukkerijen vragen om vectorbestanden omdat een pers, een borduurdigitizer of een snijplotter randen nodig heeft, geen pixels, en een getrace SVG daar bij stickers, T-shirts of een banner vaak aan voldoet. Het blijft een benadering: de curven zijn geraden pasvormen, de kleuren zijn gemiddeld uit pixels en tekst is omgezet naar contouren. Vraag het dus eerst aan wie het bedrijfslogo heeft gemaakt. Een ontwerper of bureau heeft vrijwel altijd het originele AI-, EPS-, PDF- of SVG-bestand met exacte curven, benoemde kleuren en lettertypen, en versturen kost hem een minuut. Tracen is het juiste gereedschap als dat origineel kwijt is, als het logo alleen nog op een gescand briefhoofd bestaat of als het beeld je eigen tekening is.