Een afbeelding vectoriseren in 3 stappen
- Upload de afbeelding (PNG, JPG, WebP, BMP of TIFF) in de converter hierboven.
- Converteer. vtracer trekt haar in volle kleur over; afbeeldingen breder dan 1.200 px worden eerst verkleind tot 1.200 px.
- Download de SVG en werk hem bij in Inkscape, Illustrator of Figma: verwijder losse vlekjes, voeg vormen samen, pas kleuren aan.
Dit werkt ook op een telefoon: open de pagina in je mobiele browser en upload de afbeelding.
Wat is vectorisatie?
Vectorisatie (ook wel tracing genoemd) is het proces van het omzetten van een rasterafbeelding — een raster van gekleurde pixels — naar een vectorafbeelding — een set wiskundige curves en vormen. De twee representaties zijn fundamenteel anders:
- Raster (PNG, JPG, BMP): Elke pixel slaat een kleurwaarde op. De afbeelding heeft een vaste resolutie. Vergroten voorbij die resolutie levert wazige, geïnterpoleerde resultaten op.
- Vector (SVG, AI, EPS): Vormen worden gedefinieerd door wiskundige vergelijkingen — Béziercurves, lijnen, bogen. De render-engine herberekent de wiskunde op elke doelgrootte, wat perfecte scherpte geeft van een 16-pixel favicon tot een billboard van 10 meter.
Vectorisatie is geen eenvoudige formaatconversie zoals PNG naar JPEG. Het is een reconstructie: de software analyseert pixelgrenzen, detecteert randen en bouwt een geheel nieuwe wiskundige representatie die de originele afbeelding benadert. De kwaliteit van deze benadering hangt sterk af van de kenmerken van de bronafbeelding.
Onze conversiepipeline
Wanneer je een PNG (of JPG, BMP, WebP, TIFF) uploadt naar CleverUtils en naar SVG converteert, doorloopt het bestand een pipeline met meerdere stappen. Inzicht in elke stap verklaart waarom bepaalde afbeeldingen prachtig worden gevectoriseerd en andere onverwachte resultaten opleveren.
Stap 1: Decoderen en verkleinen (ImageMagick)
ImageMagick decodeert de upload (JPG, PNG, WebP, TIFF, PSD en andere formaten) en corrigeert de EXIF-rotatie. Afbeeldingen breder dan 1.200 px worden verkleind tot 1.200 px breed, zodat het overtrekken snel blijft. Vector- of gelaagde invoer zoals PDF, EPS of PSD wordt eerst op een witte achtergrond afgevlakt.
Stap 2: Kleurclustering
De tracer, vtracer, groepeert aangrenzende pixels met een vergelijkbare kleur tot regio's. Onze instellingen houden 6 bits precisie per kleurkanaal aan, dus tinten die heel dicht bij elkaar liggen, smelten samen tot één effen kleur. Daarom veranderen kleurverlopen in banden van effen kleur.
Vlekjes kleiner dan 4 pixels worden als ruis weggelaten.
Stap 3: Randtracing
vtracer volgt de omtrek van elke kleurregio. De regio's worden gestapeld: grotere vormen liggen onderop en kleinere erbovenop, zodat er geen gaten tussen aangrenzende kleuren ontstaan.
Stap 4: Polygonen aanpassen
Onze converter draait vtracer in polygoonmodus: elke omtrek wordt een reeks rechte lijnsegmenten, geen Béziercurves. Bochten scherper dan 60° blijven behouden als hoeken. Polygonen houden logo's en letters strak; ronde vormen zien er bij sterk inzoomen licht facetachtig uit.
Stap 5: SVG-uitvoer
Elke regio wordt weggeschreven als een SVG-<path> met een effen vulkleur. Het bestand opent in elke browser en in Inkscape, Illustrator, Figma en Cricut Design Space.
Opdracht: vtracer --input in.png --output out.svg --colormode color --hierarchical stacked --mode polygon --filter_speckle 4 --color_precision 6 --corner_threshold 60 --segment_length 3.5
Als vtracer een bestand niet kan verwerken, valt de converter terug op potrace, dat een zwart-wit SVG oplevert.
Wat vectoriseert goed
Overtrekken werkt het best als een afbeelding uit een paar effen kleuren met duidelijke randen bestaat. Elke effen kleur wordt één schone vorm.
| Brontype | Kwaliteit | Waarom het werkt |
|---|---|---|
| Logo's op witte achtergrond | Uitstekend | Hoog contrast, schone randen, effen vulkleuren |
| Lijnkunst en schetsen | Uitstekend | Sterke inkt-/potloodlijnen op wit papier |
| Iconen (plat ontwerp) | Uitstekend | Geometrische vormen, uniforme kleuren, schone grenzen |
| Tekst en typografie | Uitstekend | Scherpe randen, uniform zwart op wit |
| Silhouetten | Uitstekend | Puur zwart/wit, schone contouren, geen intern detail |
| Stempels en zegels | Zeer goed | Hoog contrast, maar kan drempelaanpassing vereisen voor vervaagde gebieden |
| Technische diagrammen | Zeer goed | Schone lijnen, maar zeer dunne lijnen kunnen lagere drempel vereisen |
| Handgetekende ontwerpen | Goed | Sterke inktlijnen werken goed; lichte potloodstrepen kunnen wegvallen |
De rode draad: hoog contrast, duidelijke randen, beperkt toonbereik. Als de afbeelding herkenbaar blijft wanneer je hem reduceert tot puur zwart-wit, vectoriseert hij goed.
Wat vectoriseert slecht
Kleurclustering faalt bij afbeeldingen met continue toonvariatie. Vloeiende kleurverlopen vallen uiteen in veel banden van effen kleur, wat er geposteriseerd uitziet en de SVG groot maakt.
- Foto's: Portretten, landschappen en productfoto's bevatten vloeiende kleurverlopen in huid, lucht, gebladerte en stof. Overtrekken maakt van alles honderden vlakjes in effen kleuren, wat een geposteriseerd uiterlijk geeft. Het SVG-bestand kan ook enorm worden — duizenden kleine paden die vloeiende toonvariatie proberen te benaderen.
- Zachte kleurverlopen: Zonsondergangen, kleurovergangen, vigneteffecten en schaduwen worden opgehakt in afzonderlijke banden van effen kleur met kartelige grenzen.
- Complexe texturen: Stofweefsel, houtnerf, vacht, papiertextuur — deze genereren grote aantallen kleine vectorpaden die er rommelig uitzien en geen praktisch doel dienen.
- Bronnen met lage resolutie: Een thumbnail van 100×100 pixels biedt zo weinig datapunten dat de curve-aanpassing ruwe, blokkige paden oplevert. De uitvoer ziet er hoekig en grof uit, ongeacht de broninhoud.
- Sterk gecomprimeerde JPEG's: JPEG-compressie veroorzaakt blokkige artefacten van 8×8 pixels rond randen. De tracer volgt deze compressieartefacten in plaats van de werkelijke beeldranden, wat rommelige, kartelige vectorpaden oplevert.
Vuistregel: Als de afbeelding nog goed leesbaar is wanneer je haar terugbrengt tot een handvol effen kleuren, laat ze zich goed vectoriseren. Als ze afhankelijk is van subtiele tonen of fotografisch detail, is vectorisatie de verkeerde aanpak.
Tips voor kwaliteitsoptimalisatie
De grootste verbeteringen komen voort uit het voorbereiden van de bronafbeelding vóór het uploaden, niet uit het aanpassen van potrace-parameters. Deze stappen werken in elke afbeeldingseditor.
Gebruik de hoogst beschikbare resolutie
Meer pixels geven de tracer meer randinformatie en vloeiendere omtrekken, tot op zekere hoogte: de converter op deze pagina verkleint afbeeldingen breder dan 1.200 px tot 1.200 px voordat hij ze overtrekt. Een scherpe bron van ongeveer die breedte geeft het beste resultaat; een thumbnail van 100 px geeft ruwe, blokkige paden.
Maak de bron schoon
Verwijder bij gescande afbeeldingen achtergrondruis en artefacten vóór het uploaden. Gebruik een Niveaus- of Curven-aanpassing om de achtergrond richting puur wit en de voorgrond richting puur zwart te duwen. Verwijder stofvlekken, papiertextuur en scanartefacten met een lichte vervaging of een ontspikkelfilter. Snijd strak bij om schaduwen aan de randen weg te werken.
Verhoog het contrast
Zet de contrastschuifregelaar omhoog. Sterker contrast betekent een groter verschil tussen de helderheid van voor- en achtergrond, wat de drempel een schonere scheiding geeft. Voor zwart-witafbeeldingen bestaat de ideale invoer uit slechts twee tinten: puur zwart en puur wit, zonder iets daartussenin.
Gebruik PNG, niet JPEG
JPEG-compressie veroorzaakt zichtbare blokartefacten rond scherpe randen — precies de gebieden die potrace analyseert bij het overtrekken. Deze artefacten leveren kartelige, rommelige vectorpaden op die compressiegrenzen volgen in plaats van werkelijke beeldranden. Heb je de keuze, gebruik dan altijd PNG. Is alleen JPEG beschikbaar, gebruik dan de versie met de hoogste kwaliteit (minst gecomprimeerd).
Pas de drempelwaarde aan
De converter op deze pagina trekt in kleur over en heeft geen drempelwaarde. Trek je in zwart-wit over met potrace of Inkscape, begin dan bij 0.5; verhoog naar 0.6–0.7 voor vervaagde of lichte bronnen, of verlaag naar 0.3–0.4 als de achtergrond ruis oppikt.
Potrace-instellingen uitgelegd
Als je met potrace in zwart-wit overtrekt (rechtstreeks of via Inkscape), bepalen deze parameters de uitvoer. De converter op deze pagina draait in plaats daarvan vtracer met vaste instellingen.
| Parameter | Vlag | Bereik | Standaard | Effect |
|---|---|---|---|---|
| Drempelwaarde | -k |
0.0–1.0 | 0.5 | Helderheidsgrens voor binaire conversie. Lager = lichtere uitvoer, hoger = zwaardere uitvoer |
| Hoekafvlakking | -a |
0–1.334 | 1 | 0 = alle hoeken scherp. 1.334 = maximale afvlakking. Bepaalt curve of hoek bij knikpunten. |
| Optimalisatie | -O |
0 en hoger | 0.2 | Tolerantie voor curve-optimalisatie. Hoger = minder segmenten, kleiner bestand, minder nauwkeurig |
| Ruisverwijdering | -t |
0–100+ | 2 | Maximaal pixeloppervlak van losse regio's die worden weggelaten. Hoger = verwijdert grotere vlekken |
Aanbevolen instellingen per brontype
| Bronafbeelding | Drempel | Hoeken | Turdsize | Opmerkingen |
|---|---|---|---|---|
| Schoon zwart-wit logo | 0.5 | 1 (vloeiend) | 2 | Standaardinstellingen werken perfect voor hoog-contrastlogo's |
| Potloodschets | 0.35–0.45 | 1.334 (max) | 0 | Lagere drempel vermijdt papiertextuur; maximale afvlakking voor vloeiende lijnen |
| Inktstempel / zegel | 0.55–0.65 | 1 (vloeiend) | 10–20 | Hogere drempel vangt volledige stempel; hoge turdsize verwijdert spatters |
| Gescand document | 0.5–0.6 | 0 (scherp) | 5–15 | Scherpe hoeken voor tekst; matige ruisverwijdering voor papierstof |
| Vervaagde / lichte bron | 0.65–0.8 | 1 (vloeiend) | 2–5 | Hogere drempel vangt inhoud die bij 0.5 verloren gaat |
| Pixelkunst / QR-code | 0.5 | 0 (scherp) | 0 | Scherpe hoeken bewaren geometrie; geen ruisverwijdering |
Meerkleurige vectorisatie
Potrace produceert uitsluitend zwart-wituitvoer: één binaire laag, overgetrokken langs de grens. De converter op deze pagina omzeilt die beperking met vtracer, dat kleuren clustert en elke kleurregio in één ronde overtrekt.
Voor meerkleurige vectorisatie bestaan alternatieve benaderingen:
- Multi-pass tracing: Voer potrace meerdere keren uit op verschillende drempelniveaus, waarbij elke run een ander helderheidsband vastlegt. Stapel de resulterende SVG-lagen met verschillende vulkleuren. Inkscape's "Bitmap Traceren" biedt dit als "Meerdere scans: Helderheidsstappen."
- Kleurkwantisering + laagscheiding: Reduceer de afbeelding tot een beperkt kleurenpalet (4–16 kleuren), scheid elke kleur in een binair masker en traceer elk masker afzonderlijk. Tools zoals Inkscape's "Meerdere scans: Kleuren" automatiseren dit.
- Adobe Illustrator Image Trace: AI-ondersteunde tracing die meerdere kleuren, kleurverloopjes en complexe vormen aankan. Produceert schonere meerkleurige uitvoer dan laagstapeling, maar vereist een betaald abonnement.
- AI-gestuurde diensten: Tools zoals Vectorizer.AI gebruiken machine learning om vormen te identificeren, kleuren te scheiden en schone meerkleurige SVG te genereren. Betere resultaten dan algoritmische methoden voor complexe afbeeldingen, maar doorgaans betaald per afbeelding.
Voor de meest voorkomende vectorisatietoepassingen — logoconversie, lijnkunsttracing, snijbestandsvoorbereiding — is de zwart-wituitvoer van potrace precies wat nodig is, en het werkt direct en gratis.
Praktische toepassingen
Logo's vergroten
De meest voorkomende reden om te vectoriseren: je logo bestaat alleen als kleine PNG of JPEG en je hebt het nodig op veel grotere formaten voor drukwerk, bewegwijzering of merchandise. Vectoriseren converteert het raster met vaste resolutie naar een oneindig schaalbare SVG. De SVG-versie kan worden afgedrukt op een billboard, geborduurd op een pet of weergegeven als favicon — allemaal vanuit hetzelfde bestand.
SVG-iconen voor het web
Als je een iconenset hebt als PNG-bestanden, biedt vectorisatie naar SVG resolutie-onafhankelijkheid (scherp op alle schermen), CSS-styling (kleur wijzigen bij hover of donkere modus), kleinere bestandsgroottes en de mogelijkheid ze inline in HTML op te nemen voor nul extra HTTP-verzoeken.
Snijmachines (Cricut, Silhouette, Laser)
Cricut, Silhouette en lasersnijders vereisen vectorinvoerbestanden om snijpaden te genereren. De machine volgt de vectorpaden exact — de snijder of laser traceert de wiskundige curves. Als je ontwerp alleen als PNG bestaat, is vectorisatie de brug tussen het rasterontwerp en de fysieke snijoperatie. Schone bronafbeeldingen met hoog contrast leveren de beste snijpaden op.
Borduurwerk
Borduurrnachienes hebben vectorcontouren nodig om steekpaden te genereren. De vectorvormen bepalen steekrichting, dichtheid en vulpatronen. Een logo-PNG naar SVG vectoriseren is doorgaans de eerste stap bij het aanmaken van een borduurbestand (.PES, .DST, .EXP). Eenvoudige vormen met duidelijke grenzen leveren de schoonste steekuitvoer op.
Webprestatieoptimalisatie
Het vervangen van PNG-iconen en -logo's door SVG op een website vermindert het paginagewicht (één SVG vervangt meerdere resolutiespecifieke PNG's), verbetert de scherpte op Retina-schermen en maakt CSS-gebaseerde thema's mogelijk. Een typische website met 20 iconen kan 200–400 KB besparen door over te schakelen van PNG naar SVG, wat Core Web Vitals-scores direct verbetert.
Grootformaatdrukwerk
Beursbanners, voertuigbelettering, gebouwborden en tentoonstellingsdisplays vereisen alle artwork dat scherp weergeeft op fysieke maten in meters. Rasterafbeeldingen die er goed uitzagen op het scherm worden zichtbaar wazig op grote drukformaten. Vectoriseren van het ontwerp garandeert wiskundige scherpte op elk uitvoerformaat dat de drukker nodig heeft.
Een afbeelding vectoriseren in Inkscape en Illustrator
Inkscape (gratis)
- Importeer de afbeelding (Bestand → Importeren) en selecteer haar.
- Open Paden → Bitmap overtrekken (Shift+Alt+B).
- Kies Helderheidsgrens voor één kleur of Meerdere scans → Kleuren voor meerdere, en klik op Toepassen.
- Schuif de tracering opzij, verwijder de bitmap en sla op als Normale SVG.
Adobe Illustrator
- Selecteer de geplaatste afbeelding en open Venster → Afbeelding overtrekken.
- Kies een voorinstelling (Zwart-witlogo, 6 kleuren, Foto met hoge betrouwbaarheid) en pas Drempel of Kleuren aan.
- Klik op Uitvouwen voor bewerkbare paden en exporteer via Bestand → Exporteren → Exporteren als → SVG.
Automatisch overtrekken is gratis. Een ontwerper inhuren om een logo met de hand na te tekenen kost meer, maar geeft het schoonste resultaat bij complexe bronnen of bronnen van lage kwaliteit.