BMP naar SVG omzetten

Elke andere omzetting op deze site schrijft dezelfde afbeelding in een ander formaat. Dit kan hier niet, want een bitmap bevat geen vormen om over te dragen — alleen een raster kleurwaarden, zonder enige herinnering aan het logo of de letters die het produceerden.

De tracer moet dus raden. Hij zoekt grenzen tussen vlakken van gelijke kleur en tekent daar een pad omheen, en het resultaat is een nieuwe tekening die op het origineel lijkt. Vandaar dat deze pagina vooral gaat over welke afbeeldingen goed te raden zijn, niet over instellingen.

Vlakke gebieden met echte grenzen ertussen: een logo, een woordmerk, een icoon, een schema, een gescande lijntekening. Dat materiaal bestaat precies uit wat het algoritme zoekt, dus het resultaat is een kleine set schone paden die op elke grootte scherp blijven.

Een vlak logo van 6 KB PNG werd bijvoorbeeld 16 KB SVG die nu tot op een reclamebord schaalt — een bescheiden groei in bytes in ruil voor resolutieonafhankelijkheid. Is de uitvoer vele malen groter dan de invoer in plaats van een paar keer, dan werkte de trace niet.

Wat eruit komt is een lijst gevulde paden, dus Inkscape, Illustrator en Figma openen het probleemloos en laten je een vorm selecteren, herkleuren, verplaatsen of verwijderen. Voor een teruggevonden logo is dat meestal het hele werk.

Hoe prettig dat is, hangt af van het aantal vormen. Een schoon merk getraceerd op vier kleuren is een handvol paden. Een getraceerde foto is duizenden overlappende vlekken zonder structuur of naam, en dat bewerken is nauwelijks makkelijker dan opnieuw tekenen.

Het posteriseert hem. Een foto heeft geen vlakke gebieden — een lucht is een doorlopend verloop, een gezicht ook — dus de tracer verzint de randen die hij nodig heeft door het beeld eerst tot een handvol kleuren terug te brengen.

Gemeten resultaat: een foto kwam vier keer groter uit dan het gecomprimeerde origineel, en zichtbaar geposteriseerd. Wil je dat een foto schaalbaar wordt, dan bereikt niets dat hier — bewaar de pixels en gebruik de grootste versie die je hebt.

Een schermafbeelding met tekst leverde een SVG op veertig keer zo groot als de PNG. Elke anti-aliased letter is een cluster net iets andere grijstinten, en elk daarvan wordt een eigen klein pad.

Omdat schermafbeeldingen vaak als BMP binnenkomen, is dit het benoemen waard. Ging het om de woorden, gebruik dan BMP naar TXT. Ging het om een scherpe weergave van de interface, dan behoudt PNG elke pixel exact en is hij een fractie van de grootte van beide andere opties.

Vier kleuren voor een enkelvoudig merk of een simpel logo, acht voor een vlakke illustratie — de standaard en meestal het juiste startpunt. Zestien waar echt schaduw zit, tweeëndertig alleen als het resultaat zichtbaar iets mist.

De kosten van verhogen zijn niet evenredig: elke extra kleur is een complete extra set gebieden om te omlijnen, dus het aantal vormen en de bestandsgrootte lopen snel op terwijl de visuele verbetering afvlakt. Acht proberen en dan zestien kost twintig seconden en beantwoordt de vraag beter dan erover redeneren.

De detailinstelling bepaalt hoe strak de paden de pixels volgen. Vloeiend accepteert een losser resultaat en verwijdert elke vorm onder de zestien pixels, wat de puntjes van anti-aliasing weghaalt. Scherp houdt vormen tot twee pixels en volgt het raster op de voet. Gebalanceerd zit ertussenin en is de standaard.

Vloeiend is meestal juist voor een logo, scherp voor een technische tekening waar een dunne lijn ertoe doet. De instelling vervaagt het beeld nooit vooraf — dat zou juist de harde randen wegnemen die de enige reden waren om te traceren.

De kosten van traceren groeien met het aantal randen, niet met de bestandsgrootte, en een grote foto heeft bijna overal een rand. Ongewijzigd kan een bron van twaalf megapixel een SVG van meerdere megabytes opleveren en tientallen seconden kosten.

Verkleinen vooraf is hier geen verlies zoals bij een raster-omzetting: de uitvoer is resolutieonafhankelijk, dus een logo getraceerd op 1600 pixels breed en hetzelfde logo op 4000 pixels renderen identiek op elke grootte.

Na het traceren worden de twee bestandsgroottes vergeleken en getoond welke kant het op ging. Die vergelijking is de eerlijke kern van deze functie — geen enkele heuristiek voorspelt of een trace gaat werken, maar het antwoord is een moment later gratis beschikbaar.

Bij een bitmap-bron moet je die vergelijking corrigeren: tegenover drie ongecomprimeerde bytes per pixel lijkt bijna alles winst. Zet de bitmap ook om naar PNG en vergelijk daarmee — dat cijfer weerspiegelt wat traceren werkelijk heeft gekost.

Het traceren gebeurt met imagetracerjs: 46 KB, puur JavaScript, uitgegeven onder de Unlicense — niet de beste tracer die bestaat, maar wel een waarvan de licentie helder genoeg is om te gebruiken.

Dat levert een omzetting op die volledig in je browser draait. De bitmap wordt gedecodeerd, geschaald en getraceerd in het tabblad, er wordt niets geüpload, en er is geen account of daglimiet — belangrijk, want het werk dat mensen hiermee terugvinden is bijna altijd een logo dat iemand bezit.