JPG naar SVG: Raster naar Vector
uitgelegd

Raster vs Vector: het fundamentele verschil

Elke digitale afbeelding valt in één van twee categorieën: raster of vector. Het verschil begrijpen is essentieel om te weten wat vectorisatie wel en niet kan.

Een rasterafbeelding (JPG, PNG, BMP, TIFF) slaat een plaatje op als een rechthoekig raster van gekleurde pixels. Elke pixel is een klein vierkantje met één kleurwaarde. Het totale aantal pixels — de resolutie — bepaalt hoeveel detail de afbeelding kan bevatten. Een foto van 3000×2000 pixels bevat 6 miljoen afzonderlijke kleurwaarden. Als je inzoomt, zie je uiteindelijk de individuele vierkantjes. Als je de afbeelding vergroot boven de oorspronkelijke resolutie, moet de software nieuwe pixels verzinnen tussen de bestaande, wat een wazige, geïnterpoleerde uitkomst geeft.

Een vectorafbeelding (SVG, AI, EPS, PDF) slaat een plaatje op als een reeks wiskundige instructies. Een cirkel wordt beschreven als een middelpunt en een straal. Een curve is een Bézier-vergelijking met controlepunten. Een gevuld vlak is een gesloten pad met een vulkleur. Omdat de afbeelding door wiskunde wordt gedefinieerd in plaats van door pixels, kan ze worden weergegeven op elke resolutie — van een 16×16 favicon tot een reclamebord van 10 meter — met perfecte scherpte. De renderingengine berekent de krommen eenvoudig opnieuw voor de doelgrootte.

Dit fundamentele verschil betekent dat het omzetten van raster naar vector niet hetzelfde is als WAV naar MP3 of JPG naar PNG converteren. Dat zijn formaatwijzigingen binnen hetzelfde datamodel (pixels naar pixels, of samples naar samples). Raster-naar-vector-conversie is een reconstructie — de software moet de pixeldata interpreteren en een volledig nieuwe wiskundige representatie van de afbeelding opbouwen.

Hoe auto-vectorisatie werkt

Wanneer je een JPG-afbeelding uploadt naar CleverUtils en deze converteert naar SVG, doorloopt het bestand een meerstapspipeline. Het begrijpen van elke stap helpt verklaren waarom bepaalde afbeeldingen prachtig vectoriseren terwijl andere onverwachte resultaten opleveren.

Stap 1: Bitmapconversie

De invoerafbeelding (JPG, PNG of elk ondersteund rasterformaat) wordt eerst geconverteerd naar een raw bitmap met behulp van ImageMagick. Deze stap decodeert de gecomprimeerde afbeelding naar een ongecomprimeerd pixelraster dat het traceeralgoritme kan verwerken. Formaatspecifieke kenmerken (JPEG-compressieartefacten, PNG-alfakanalen, EXIF-metadata) worden weggegooid, zodat er een schone bitmap overblijft.

Stap 2: Drempelwaarde (grijsschaal naar binair)

Potrace, de traceerengine, werkt met tweetonige (binaire) afbeeldingen — elke pixel is zwart of wit. De grijsschaalbitmap wordt met een helderheidsdrempel omgezet naar binair. De helderheid van elke pixel wordt vergeleken met de drempelwaarde (0,0 tot 1,0, standaard 0,5):

• Pixels die donkerder zijn dan de drempelwaarde worden zwart (voorgrond)
• Pixels die lichter zijn dan de drempelwaarde worden wit (achtergrond)

Dit is de meest kritieke stap in de pipeline. De drempelwaarde bepaalt hoeveel van de oorspronkelijke afbeelding als voorgrond wordt vastgelegd. Een drempelwaarde van 0,3 legt alleen de donkerste elementen vast; 0,7 legt een groot deel van de afbeelding vast en produceert zwaarder uitvoer.

Stap 3: Randtracering

Potrace scant de binaire bitmap en identificeert grenzen tussen zwarte en witte gebieden. Het volgt deze grenzen pixel voor pixel en bouwt zo een onbewerkt contour van elke vorm. Het algoritme verwerkt geneste vormen (een wit gebied binnen een zwart gebied binnen een ander wit gebied) door de hiërarchie van binnen/buiten-relaties bij te houden.

Stap 4: Bézier-curveaanpassing

De onbewerkte pixelcontouren van stap 3 zijn kartelige trapvormige figuren. Potrace past vloeiende Bézier-krommen aan op deze contouren, waarbij trapvormige randen worden vervangen door schone wiskundige krommen. Het curveaanpassingsalgoritme minimaliseert de fout tussen de oorspronkelijke pixelgrens en de aangepaste curve, terwijl de padbeschrijving compact blijft.

Twee parameters sturen dit proces:

• Hoekafronden (-a): Bepaalt of hoeken worden weergegeven als scherpe hoeken of vloeiende krommen. Een waarde van 0 behoudt alle hoeken; 1,334 rondt alles af.
• Optimalisatie (-O): Bepaalt hoe agressief potrace de krommen vereenvoudigt. Hogere waarden produceren eenvoudigere paden met minder controlepunten, maar mogelijk minder nauwkeurige tracering.

Stap 5: SVG-uitvoer

De aangepaste Bézier-krommen worden geschreven als SVG-padelementen — standaard XML dat elke browser, ontwerptool of snijmachine kan weergeven. De volledige commandopipeline ziet er als volgt uit:

Wat goed vectoriseert

De binaire drempelwaardestap is de sleutel tot het begrijpen welke afbeeldingen uitstekende SVG-uitvoer produceren. Afbeeldingen die van nature worden verdeeld in duidelijke lichte en donkere gebieden — met sterke randen en minimale gradatie — passen perfect bij het zwart/wit binair dat potrace verwerkt.

De rode draad: hoog contrast, duidelijke randen, beperkt toonbereik. Als je de afbeelding met samengeknepen ogen nog steeds kunt herkennen, vectoriseert ze goed.

Wat NIET goed vectoriseert

Hetzelfde drempelwaardeproces dat prachtig werkt voor logo's en lijntekeningen faalt voor afbeeldingen met continue toonvariatie. Wanneer een afbeelding miljoenen subtiele kleur- en helderheidstransities bevat, vernietigt het forceren van elke pixel naar zwart of wit de visuele informatie die de afbeelding betekenisvol maakt.

• Foto's: Een portret of landschap bevat vloeiende verlopen over huid, lucht, gebladerte en stof. Drempelwaarde-toepassing zet dit alles om in opvallende zwart-witgebieden, wat een abstract of geposteriseerd uiterlijk geeft. Het SVG-bestand kan ook enorm zijn — duizenden kleine paden die proberen te representeren wat oorspronkelijk vloeiende toonvariatie was.
• Complexe scènes: Drukke afbeeldingen met veel overlappende elementen, variërende dieptes en complexe achtergronden produceren ruis-achtige, rommelige vectoruitvoer met te veel paden om nuttig te zijn.
• Zachte verlopen: Een zonsondergangslucht, een kleurovergang of een vignet-effect kan niet worden weergegeven als binair zwart/wit. Het verloop wordt opgehakt in afzonderlijke banden met kartelige grenzen.
• Gedetailleerde texturen: Stofweefsel, houtnerf, huidporiën, vacht — deze fijndetailtexturen genereren enorme aantallen kleine vectorpaden die er niet goed uitzien en geen praktisch doel dienen.
• Afbeeldingen met lage resolutie: Een miniatuur van 100×100 pixels geeft de tracer zo weinig pixels om mee te werken dat de krommen ruw en hoekig worden. Hogere invoerresolutie produceert altijd vloeiendere uitvoer.
• Sterk gecomprimeerde JPG's: JPEG-compressieartefacten (blokpatronen rond randen) verwarren de randdetectie en produceren ruis-achtige vectorpaden die de compressieartefacten traceren in plaats van de werkelijke afbeeldingsinhoud.

Onze Potrace-pipeline

CleverUtils gebruikt potrace (Polygon Tracer), gemaakt door Peter Selinger, voor raster-naar-vector-conversie. Potrace is dezelfde engine die wordt gebruikt door de functie "Trace Bitmap" van Inkscape en wordt algemeen beschouwd als de beste open-source auto-tracer die beschikbaar is.

De conversiepipeline bestaat uit drie componenten:

1. ImageMagick convert — Decodeert het invoerbestand (JPG, PNG, WebP, TIFF, PSD, enz.) en converteert het naar een raw BMP-bitmap die potrace kan verwerken
2. Pipe (|) — De BMP-data wordt rechtstreeks naar potrace gestreamd zonder een tijdelijk bestand te schrijven, waardoor het proces snel en geheugenefficiënt blijft
3. potrace — Traceert de bitmapcontouren en genereert een SVG-bestand met schone Bézier-krommen

Het volledige commando:

convert input.jpg BMP:- | potrace -s --opaque -o output.svg

Deze standaardconfiguratie gebruikt een drempelwaarde van 0,5, gematigde hoekafrondingsmogelijkheden en standaardoptimalisatie. Voor de meeste logo's, lijntekeningen en eenvoudige afbeeldingen produceren de standaardinstellingen uitstekende uitvoer zonder parameterafstemming.

Vectorisatie-instellingen uitgelegd

Potrace biedt verschillende parameters die de kwaliteit en het karakter van de vectoruitvoer bepalen. Als je deze instellingen begrijpt, haal je het beste resultaat uit verschillende soorten bronafbeeldingen.

Drempelwaarde (-k)

De belangrijkste parameter. Bepaalt de helderheidsgrens tussen zwart (voorgrond) en wit (achtergrond) in de binaire conversiestap. Bereik: 0,0 tot 1,0, standaard 0,5.

Hoekafronden (-a)

Bepaalt of de tracer scherpe hoeken behoudt of ze afrondt tot krommen. Bereik: 0 tot 1,334, standaard 1.

• -a 0 — Alle hoeken zijn scherp. Goed voor geometrische vormen, pixelkunst en technische diagrammen waarbij je precieze hoeken wilt.
• -a 1 (standaard) — Gematigde afronding. Hoeken die dicht bij 90 graden liggen, blijven scherp; andere worden afgerond.
• -a 1,334 — Maximale afronding. Alle hoeken worden krommen. Produceert de vloeiendste uitvoer, goed voor organische vormen en handschrift.

Ruisverwijdering (-t turdsize)

Verwijdert kleine geïsoleerde vlekjes uit de binaire afbeelding voor het traceren. De waarde geeft de maximale grootte (in pixels) aan van gebieden die worden verwijderd. Standaard: 2.

• -t 0 — Alles bewaren, inclusief enkelpixelruis. Gebruik dit alleen voor zeer schone bronafbeeldingen.
• -t 2 (standaard) — Verwijdert kleine vlekjes (1-2 pixelgebieden). Werkt voor de meeste afbeeldingen.
• -t 10-50 — Verwijdert agressief kleine elementen. Handig voor gescande documenten met stof, papiertextuur of compressieartefacten.

Optimalisatie (-O)

Bepaalt hoeveel Bézier-curvegementen potrace gebruikt om elk contour te benaderen. Hogere optimalisatie produceert eenvoudigere paden (minder SVG-bytes) maar mogelijk minder nauwkeurige tracering. Het standaard optimalisatieniveau is een goede balans tussen getrouwheid en bestandsgrootte voor de meeste afbeeldingen.

Wanneer vectoriseren

Vectorisatie is geen universele verbetering — het is het juiste hulpmiddel voor specifieke gebruikssituaties waarbij de eigenschappen van vectorafbeeldingen een duidelijk voordeel bieden ten opzichte van rasterafbeeldingen.

Grootformaat drukwerk

Spandoeken, beursstandschermen, voertuigfolies en gebouwreclame vereisen allemaal artwork dat kan worden opgeschaald naar meters zonder kwaliteitsverlies. Een logo dat is ontworpen op 300×200 pixels wordt een wazige massa op een spandoek van 3 meter. Het omzetten naar SVG geeft de drukker een resolutie-onafhankelijk bestand dat op elke schaal scherp wordt weergegeven.

Schaalbare iconen en UI-elementen

Websites en applicaties tonen iconen op vele grootten: 16px in menu's, 32px in werkbalken, 64px in functiekaarten, 128px in hero-secties. Voor elke grootte een aparte PNG serveren is verspillend. Eén SVG-icoon wordt perfect weergegeven op elke grootte, reageert op CSS-styling (kleur veranderen bij hover) en weegt doorgaans minder dan één enkele PNG-weergave.

Gescande lijntekeningen

Architecten, ingenieurs en kunstenaars scannen vaak met de hand getekende schetsen, plattegronden of technische diagrammen. De gescande JPG is een rasteropname van iets dat oorspronkelijk is getekend met lijnen en krommen — precies wat vectorformaat van nature vertegenwoordigt. Het vectoriseren van de scan reconstrueert de oorspronkelijke bedoeling en produceert schone, bewerkbare vectorpaden uit de gescande pixeldata.

Snijmachines en CNC

Cricut, Silhouette, lasersnijders en CNC-routers vereisen allemaal vectorinvoer om gereedschapspaden te genereren. Als je ontwerp alleen bestaat als JPG of PNG, is vectorisatie de brug tussen het rasterontwerp en de fysieke snijbewerking. De vectorpaden worden de exacte lijnen die de machine volgt.

Borduurwerk en zeefdruk

Borduurmachines hebben vectoromtrekken nodig om steekpaden te genereren. Zeefdruk vereist schone vectorscheidingen voor elke kleurlaag. In beide gevallen is het vectoriseren van een rasterlogo of -ontwerp de eerste stap in de productieworkflow.

AI-aangedreven alternatieven

Potrace is een traditionele algoritmische tracer — het detecteert randen en past krommen aan met behulp van wiskundige optimalisatie. Het blinkt uit in zwart-wit uitvoer van bronnen met hoog contrast, en het is snel, gratis en deterministisch (dezelfde invoer produceert altijd dezelfde uitvoer).

Voor gebruikssituaties die potrace niet goed aankan, bieden AI-aangedreven vectorisatoren een andere aanpak:

Tools zoals Vectorizer.AI en Recraft gebruiken machine learning om vormen te identificeren, kleurlagen te scheiden en schone meerkleurige SVG-uitvoer te genereren uit complexe afbeeldingen. Ze kunnen volledige kleurenlogo's, illustraties met verlopen en zelfs bepaalde fotografische inhoud aan die potrace niet kan verwerken.

Voor de meest voorkomende vectorisatiegebruikssituaties echter — een Z&W-logo converteren, een lijntekening traceren, SVG-snijbestanden maken voor Cricut of gescande tekst vectoriseren — produceert potrace uitstekende resultaten onmiddellijk en gratis. Het blijft de engine achter Trace Bitmap van Inkscape, een van de meest gebruikte vectorisatietools ter wereld.

Voorverwerkingstips voor betere resultaten

De kwaliteit van je SVG-uitvoer hangt sterk af van de kwaliteit van je invoerbestand. Een paar minuten voorbereiding voor het uploaden kan het vectorisatieresultaat dramatisch verbeteren.

• Vergroot het contrast: Open de afbeelding in een editor (zelfs de ingebouwde editor van een telefoon) en zet de contrastschuif omhoog. Sterker contrast betekent duidelijkere randen voor de tracer om te volgen.
• Bijsnijden: Verwijder onnodige achtergrond. Minder irrelevante pixels betekent schonere uitvoer en kleinere SVG-bestanden.
• Gebruik de hoogste beschikbare resolutie: Een afbeelding van 2000×2000 pixels geeft de tracer 4x meer randdata dan een versie van 1000×1000. Meer pixels betekent vloeiendere krommen.
• Gebruik bij voorkeur PNG boven JPG: JPEG-compressie maakt blokkige artefacten rond randen. Deze artefacten verwarren de tracer en produceren ruis-achtige vectorpaden. Als je beide formaten hebt, gebruik dan de PNG.
• Converteer eerst naar grijsschaal: Als de afbeelding van nature Z&W is (zoals een schets of logo), elimineert het expliciet omzetten naar grijsschaal voor het uploaden eventuele kleuruis die de drempelwaardetoepassing kan beïnvloeden.
• Verwijder achtergrondgekruis: Gebruik voor gescande documenten een "levels"- of "curves"-aanpassing om het papier wit te maken en de inkt zwart. Dit elimineert papiertextuur en scanartefacten.