PNG naar SVG omzetten

PNG is lossless, dus er is niets uitgesmeerd voordat de tracer het ziet: de randen in het bestand zijn precies de randen die het ontwerpprogramma tekende, met alleen de bedoelde anti-aliasing erlangs. Dat is het verschil tussen deze pagina en elke andere bron in de tracing-matrix, en het is meteen zichtbaar in het resultaat.

Gemeten op een vlakke afbeelding van 480 bij 320 pixels: 7136 bytes PNG traceerde naar 2481 bytes SVG bij de standaard acht kleuren, in vijf paden. Kleiner dan het origineel en nu schaalbaar tot een winkelbord — precies waarvoor deze functie bestaat.

Vrijwel elke PNG die hier terechtkomt, is geëxporteerd uit iets. Het Figma-bestand, het Sketch-document, het Illustrator-artboard of het Canva-ontwerp dat hem produceerde is een echte SVG-bron in plaats van een reconstructie, en exporteert er een in een menu — schoon, met echte curven, echte tekst en benoemde lagen.

Vijf minuten zoeken is de moeite waard, want het verschil is permanent. Een getraceerd logo heeft omtrekken waar het origineel letters had, dus het woordmerk kan nooit meer in het merklettertype gezet worden. Traceer als het account gesloten is, het bureau weg is, of alleen de PNG van de oude website nog bestaat.

De tracer leest alle vier de kanalen, dus een uitgesneden logo op een transparante achtergrond komt niet terug op een wit vlak. De gebieden die transparant waren, worden als paden met opaciteit nul weggeschreven, en het zichtbare werk ligt daarbovenop.

Het mechanisme is de moeite van weten waard, want het is geen alfakanaal. SVG heeft geen alfakanaal te hebben; het heeft vormen met opaciteit. Halftransparante pixels — de zachte rand van een slagschaduw — worden gekwantiseerd tot een klein aantal opaciteitsstappen in plaats van een vloeiende overgang.

Schermafbeeldingen zijn de meest voorkomende PNG’s die bestaan en het minst geschikt om te traceren. Anti-aliased tekst is een cluster net iets andere grijstinten rond elke streek, en elk zo’n cluster wordt zijn eigen kleine pad.

Een gemeten voorbeeld: een PNG van 2608 bytes werd 166.255 bytes SVG in 871 paden bij acht kleuren — vierenzestig keer zo groot, voor een resultaat dat in elk opzicht slechter is, ook in leesbaarheid. Ging het om de woorden, gebruik dan PNG naar TXT met Tesseract.

Vier voor een enkelvoudig merk of een tweekleurig logo, acht voor een vlakke illustratie met een paar vullingen, zestien waar echt schaduw zit, tweeëndertig alleen als er bij zestien zichtbaar iets mist. Acht is de standaard en de juiste eerste poging.

De instelling gedraagt zich niet als een kwaliteitsschuif: gemeten resultaten waren 3900 bytes bij vier kleuren, 2481 bij acht, 10.263 bij zestien en 10.168 bij tweeëndertig. Meer kleuren leverde bij één stap een kléiner bestand op en bij de volgende een vervierdubbeling.

Elk ontwerpprogramma past anti-aliasing toe bij export, dus zelfs een logo met harde randen heeft een verloop van een of twee pixels tussenliggende kleur langs elke grens. De detailinstelling bepaalt of die specks overleven. Vloeiend verwijdert elke vorm onder de zestien pixels; scherp houdt vormen tot twee pixels.

Voor een logo is vloeiend meestal het juiste antwoord en het opgeruimdste startpunt. Scherp verdient zijn plaats bij een technische tekening. De tracer vervaagt het beeld nooit vooraf: de vervagingsstraal staat vast op nul.

Alles langer dan 1600 pixels op de langste zijde wordt vóór het traceren verkleind. Dat is een kostenplafond, geen kwaliteitsplafond — een logo getraceerd op 1600 pixels en hetzelfde logo op 4000 pixels renderen identiek op elke grootte.

De andere richting telt wel. Een favicon-export van 200 pixels heeft zo weinig pixels langs elke curve dat de gepaste omtrekken hoeken zichtbaar afronden. Kan iets nog exporteren, vraag dan om iets rond de 1600 pixels breed.

Wat terugkomt is een stapel gevulde paden met effen vullingen. Geen groepen, geen laagnamen, geen tekstelementen, geen verlopen, geen symbolen. Een woordmerk is omtrekken van letters, geen letters; een cirkel is een reeks gepaste curvesegmenten, geen cirkel.

Voor het meeste gebruik hier is dat prima, omdat de bestemming een snijmachine of grote afdruk is. Het is geen vervanging voor een master. Gaat het merk terug in een merksysteem, behandel de trace dan als sjabloon om over te tekenen, niet als teruggevonden origineel.

Is het bestand een foto, dan helpt geen enkele tracer, en zijn PNG naar JPG of PNG naar AVIF de juiste routes. Is het een schermafbeelding en is het doel een kleiner bestand, dan is PNG al bijna optimaal voor vlakke interfacekleuren.

Is het doel een favicon, dan is PNG naar ICO het paar dat het bestand oplevert dat een browser vraagt, zonder eerst vectoriseren. En was het doel een afdrukklaar bestand op vaste grootte, dan geeft PNG naar PDF of PNG naar TIFF de drukker meteen iets bruikbaars.

Decoderen, schalen en traceren gebeuren allemaal in je browser. Niets wordt geüpload, er is geen account en geen daglimiet — belangrijk op deze pagina, want het werk dat mensen proberen terug te vinden is bijna altijd een logo dat iemand bezit.

De tracer is imagetracerjs: 46 KB pure JavaScript onder de Unlicense. Niet de sterkste optie die bestaat, maar wel een met een heldere licentie. Op de vlakke exports waarvoor deze pagina geschreven is, is het verschil klein genoeg dat de licentie de doorslag gaf.