HEIC naar SVG omzetten

Traceren zoekt de grens tussen gebieden van verschillende kleur en tekent daar een gesloten pad omheen. Een potloodlijn heeft twee van zulke grenzen, één aan elke kant, dus wat eruit komt is een lange smalle lus rond de lijn in plaats van een lijn. Gevuld met zwart ziet dat er op een scherm precies goed uit.

Het houdt op een compleet antwoord te zijn zodra een machine de paden volgt. Een penplotter tekent de ene kant van elke streek en dan de andere terug. Een snijmachine snijdt de streek uit als vorm. Wil je een middellijnpad, dan heet dat centreline tracing of skeletonisatie, en dat is een ander algoritme dan wat hier draait.

Het algoritme zoekt vlakke gebieden, en een whiteboard gefotografeerd met een telefoon heeft er minder dan je zou denken. Het bord is lichter bij het raam en grijzer in de hoek, de stift glimt waar het plafondlicht valt, de laatste veeg liet een vage smeer achter, en de foto is scheef genomen vanaf een stoel.

Elk van die dingen wordt geometrie. Het lichtverloop wordt banden net iets ander wit; de glans wordt een eilandje midden in een streep; de vage veeg wordt bleke vormen verspreid over de tekening. Geen daarvan is een fout van de tracer, die gewoon reproduceert wat op de foto staat.

Recht van voren, niet schuin, met de telefoon evenwijdig aan het papier of bord. Gelijkmatig licht, geen schaduw van je eigen lichaam en geen weerkaatsing van een lamp. Vul het kader met de tekening en niets anders. Ligt de tekening op papier, dan verbetert de documentscanner in de Notities-app op iOS het perspectief al voor je.

Verhoog daarna het contrast voor het omzetten. In de Foto’s-app verhoogt meer contrast en zwartpunt, en iets minder helderheid, het papier richting wit en de inkt richting zwart, wat precies de lichtvariatie wegwerkt die anders vormen zou worden.

De kleureninstelling telt het meest, en voor lijnwerk is het antwoord het laagste getal, 4. Een tekening heeft twee kleuren: inkt en papier. Alles boven twee gaat naar het beschrijven van belichting en zachte randen, en elk extra niveau betekent meer paden en een groter bestand.

De standaard van 8 is bedoeld voor vlakke illustraties — een logo met een paar egale kleuren, een icoon. Zestien en tweeëndertig zijn voor beelden met echte schaduw, en die kiezen voor een schets levert een veel groter SVG-bestand op zonder dat je lijnen preciezer worden. Probeer eerst 4 en verhoog alleen als iets wat je nodig had verdween.

De detailinstelling bepaalt twee dingen: hoe los een rechte lijn of curve mag worden gepast op een reeks randpixels, en hoe klein een vorm moet zijn voor hij verwijderd wordt. Vloeiend verwijdert alles onder 16 pixels, gebalanceerd onder 8, scherp onder 2.

Die drempel is waar je bij een telefoonfoto aan moet denken, want een camerarand is nooit schoon — sensorruis en anti-aliasing laten een waas van tussenliggende pixels langs elke streek achter. Vloeiend is meestal juist voor een gefotografeerde tekening: het gooit de waas weg en rondt hoeken licht af.

Vervagen voor het traceren zou de spikkels onderdrukken, en elke tracer biedt dat aan. Hier staat het vast op nul, want het verwijdert ze door precies de scherpe randen te verzachten die de hele reden waren om te traceren.

De verwijderdrempel doet hetzelfde werk zonder die kosten: hij haalt vormen onder een bepaalde grootte weg in plaats van alles boven een grens te vervagen. Zit je trace vol spikkels, verhoog dan de detailinstelling richting vloeiend of maak het bronbeeld schoon.

Ongeacht de invoer wordt het beeld geschaald tot de langste zijde hoogstens 1600 pixels is voor het traceren begint. Een iPhone-frame van 12 megapixel is 4032 pixels breed, dus het wordt met ruwweg een factor tweeënhalf verkleind.

Dat kost niets wezenlijks. De uitvoer is resolutieonafhankelijk — paden getraceerd op 1600 pixels en op 4032 pixels renderen identiek op elke grootte. Wat je ervoor terugkrijgt is een omzetting die in seconden klaar is in plaats van tientallen seconden.

Het betrouwbaarste signaal of een trace goed ging, is geen voorbeeld, maar rekenkunde. Is de SVG kleiner dan of vergelijkbaar met de bron, dan had het beeld echte vlakke gebieden en heeft de tracer ze gevonden. Is hij vele malen groter, dan vocht de tracer tegen de afbeelding.

Beide getallen worden na de omzetting getoond. Een gemeten geval: een schermafbeelding met tekst traceerde naar een SVG veertig keer zo groot als de PNG, omdat elke anti-aliased letter een eigen hoopje paden werd. Handschrift op een whiteboard doet hetzelfde.

Ga ervan uit dat de SVG een startpunt is, geen afgewerkte tekening. Open hem in Inkscape, Illustrator of Figma en verwacht drie dingen te moeten doen: het achtergrondvlak verwijderen als er een is getraceerd, de overgebleven spikkels weghalen, en paden samenvoegen waar de tracer één streek in meerdere stukken splitste.

Voor een plattegrond of technische tekening komt er een vierde bij: niets in de trace weet iets van schaal, rechtheid of hoeken van negentig graden. Lijnen die evenwijdig hoorden te zijn, zijn dat niet. Tellen metingen, dan is de trace een sjabloon om over te tekenen, geen tekening om te meten.

Alles draait op de pagina: libheif decodeert de HEIC, een canvas schaalt hem, en imagetracerjs — 46 KB pure JavaScript — doet het traceren. Geen verzoek draagt de afbeelding mee, wat je kunt bevestigen in het netwerktabblad of door de machine eerst van het internet los te koppelen.

Dat is hier geen abstract voordeel. Wat mensen fotograferen en willen vectoriseren zijn vergaderwhiteboards, productschetsen en plattegronden — kortom, ongepubliceerd werk. Vier instellingen kunnen proberen zonder dat iets de laptop verlaat, is het verschil tussen dit hulpmiddel gebruiken en het laten liggen.