Ruwe randen in een geconverteerde SVG komen bijna altijd uit het origineel, niet uit de conversiestap. Vectoriseren beschrijft de contouren die al in de bitmap zitten opnieuw als paden: alleen bij een schoon origineel is er een schone basis voor de paden; zit er door compressie een rand van vlekken omheen, is een boog nog maar twee of drie pixels breed of ligt er een groot schaduwvlak overheen, dan worden die gebreken trouw in het resultaat overgenomen. Bepaal eerst tot welke categorie bronprobleem de ruwheid behoort en orden daarna de invoer stap voor stap vóór je opnieuw converteert — dat werkt veel beter dan herhaaldelijk op 'opnieuw' klikken.
Open afbeelding naar vector en wissel nog niet haastig van tool: doorloop met dezelfde afbeelding de onderstaande checklist en zie hoe de meeste randproblemen al verschuiven zodra de invoer verandert. De volledige stappen van uploaden, converteren en downloaden staan in 'PNG en JPG naar SVG: complete tutorial voor het vectoriseren van afbeeldingen'; hier beginnen we direct bij het randprobleem zelf.
Kernpunten
- Compressieruis, vage contouren en complexe schaduwen worden alle drie trouw in de SVG-paden overgenomen; een conversie vult geen informatie aan die niet in het origineel zit.
- Onderscheid eerst 'informatie die het origineel mist' en 'traceerfouten in de paden': het eerste vraagt een scherper origineel, het tweede los je op met een opgeschoonde invoer of het opschonen van punten.
- Verander bij elke nieuwe poging één variabele: ander origineel, achtergrond weg, kleuren vereenvoudigen — apart uitvoeren, zodat de verbetering aan één actie is toe te schrijven.
- De tool accepteert PNG, JPG en WebP met een breedte en hoogte van minimaal 256 pixels; gebruik de 1×-, 2×- en 4×-weergave in het resultaatspaneel om dezelfde rand telkens te vergelijken.
Bepaal eerst of het probleem in het origineel of de conversie zit
Open de SVG in het resultaatspaneel op 4×, zoek de ruwste rand op en vergroot daarna hetzelfde detail in het origineel op een vergelijkbare factor om te vergelijken. Drie typische gebreken hebben elk een eigen plek:
Compressieruis. Het origineel is meerdere keren opgeslagen of via een chatapp doorgestuurd en rond de contour van het onderwerp zit een rand van vlekken. Na conversie hangen er fijne kleine paden en rafels aan de rand, met de gebreken geconcentreerd in de ring buiten de contour.
Vage contouren. De resolutie van het origineel is laag, zodat bogen en hoeken op weinig pixels rekenen. Na conversie vertonen bogen trapjes en worden hoeken stomp, met de gebreken bij de krommingsovergangen.
Complexe schaduwen. Het origineel bevat zachte gradiënten of slagschaduwen zonder harde grens in het overgangsgebied. Na conversie valt dat uiteen in meerdere lagen bijna-gelijke kleurvlakken, met de gebreken bij de schaduwovergangen — en de kleuren matchen bovendien niet met de merkkleuren.
Breng na de vergelijking het probleem onder in één categorie, want die bepaalt de route: is de rand in het vergrote origineel zelf al rafelig, gebroken of ruisig, dan ontbreekt informatie, en alleen een opgeschoonde invoer of een scherpere versie helpt; is de rand in het origineel schoon maar vertoont de SVG extra punten, trapjes of brokkelige paden, dan is er een traceerfout in de paden, die een nieuwe poging of nadien punten opschonen kan verhelpen. Sla je deze stap over en converteer je steeds opnieuw, dan lopen de twee problemen door elkaar.
Verwijder achtergronden die de contouren verstoren
De achtergrond is de vaakst voorkomende bron van overbodige paden. Converteer pas nadat het onderwerp van de achtergrond is gescheiden: zowel het aantal paden als de netheid van de randen verbetert merkbaar.
Een effen achtergrond pak je het simpelst aan: knip eerst de overtollige witruimte rondom weg zodat het onderwerp het beeld vult, verwijder daarna de achtergrondkleur en sla op als PNG met transparante achtergrond. Die knipbeurt is de goedkoopste invoerverbetering: binnen hetzelfde beeld krijgt de contour van het onderwerp meer pixels. Let wel dat breedte en hoogte na het bijsnijden minimaal 256 pixels blijven, anders komt de upload niet door de controle.
Een complexe achtergrond (patroon, gradiënt, echte foto) vereist eerst scheiding van het onderwerp, anders wordt het patroon mee tot pad getraceerd en zit de rand vol achtergrondfragmenten. Voor automatische scheiding gebruik je eerst de tool achtergrond uit je logo verwijderen en upload je de transparante uitvoer daarna voor conversie; de volledige kniphandelingen staan in de tutorial over achtergronden verwijderen en worden hier niet herhaald.
Nog één ding om te weten over achtergronden verwijderen: de scheidingstool levert een bitmap en doet niets anders dan het onderwerp uit de achtergrond halen — de scherpte van het onderwerp zelf verbetert niet. Was het onderwerp in het origineel al wazig, dan blijft het dat na verwijdering; ga terug naar de vorige sectie om te bepalen of er informatie ontbreekt.
Pak kleine tekst, dunne lijnen en gradiënten aan
Deze drie elementen vervormen het makkelijkst bij conversie; de volgorde staat vast: zoek eerst een scherpere versie, splits daarna tekst en beeld, en vereenvoudig tot slot de schaduwen.
Zoek eerst een scherpere versie. In een origineel met lage resolutie groeien de streken van kleine letters in elkaar samen en resteert van de tegenspatiëring (het holle deel van een O bijvoorbeeld) nog maar één of twee pixels; geen enkele conversie tovert die details terug. In de header van de website, op visitekaartjes, in promotiemateriaal en het merkenhandboek zit vaak een grotere versie — gebruik die zodra je haar vindt. Dunne lijnen gaan net zo: een haarlijn die in de lage resolutie breekt, komt eruit als een gebroken pad.
Splits tekst en beeld. Zitten letters en beeld samen in één kleine afbeelding, knip dan het tekstgebied en het beeldgebied afzonderlijk uit, converteer ze apart en zet ze in ontwerpsoftware uitgelijnd weer samen. Elk deel profiteert van een groter aandeel van het beeld — betrouwbaarder dan het hele kleine bestand in één keer forceren.
Vereenvoudig schaduwen. Zachte gradiënten en slagschaduwen vallen uit elkaar in meerdere lagen kleurvlakpaden. Staat het merkenhandboek het toe, verwijder dan eerst de slagschaduw en vervang de gradiënt door een effen vlak in de hoofdkleur vóór de conversie; is de gradiënt zelf deel van de merkidentiteit, accepteer dan de bloksgewijze benadering of laat dat detail een bitmap blijven.
Over tekst geldt één harde waarheid: de tekst in de conversie-uitvoer bestaat uit contourpaden, niet uit bewerkbaar lettertypemateriaal, en de conversie zet die niet terug naar het oorspronkelijke lettertype. Zonder origineel fontbestand herstelt geen enkele conversie de oorspronkelijke lettervormen; raad ook geen lookalike-lettertype aan de hand van contouren en gebruik dat als merkleletter. Wil je de tekst wijzigen, zet de inhoud dan opnieuw uit in ontwerpsoftware met het geverifieerde lettertype.
Herprobeer met één variabele per keer
Heb je meerdere invoerversies voorbereid, zet ze dan niet allemaal tegelijk in: verander per keer één variabele, pas dan is een verbetering aan een actie toe te schrijven.
Houd drie dingen vast in de uitvoering:
- Invoer per ronde. Ronde één: het origineel direct converteren als uitgangspunt; ronde twee: uitsluitend de versie met verwijderde achtergrond; ronde drie: uitsluitend de versie met vereenvoudigde kleuren of de scherpere versie. Verwissel je de invoer, klik dan op de verwijderknop rechtsboven in de voorvertoning en upload het nieuwe bestand vóór de conversie.
- Vaste controlemethode. Bekijk elke ronde dezelfde ruwste rand onder dezelfde vergroting; de 1×-, 2×- en 4×-standen in het resultaatspaneel vormen een kant-en-klaar uniform ijkpunt.
- Resultaten bewaren. Sla de drie SVG's onder eigen namen op, bijvoorbeeld logo-origineel.svg, logo-zonder-achtergrond.svg en logo-vereenvoudigd.svg, en vergelijk de randverschillen naast elkaar.
Tonen twee rondes geen zichtbaar verschil, dan ligt het probleem niet in deze invoer en ga je terug naar de eerste sectie voor een nieuwe indeling; is er wél verschil, vervolg dan die richting in plaats van alle wijzigingen tegelijk erop te stapelen. Wil je dezelfde invoer nog een keer proberen, klik dan onder het resultaat op 'opnieuw vectoriseren' om het huidige resultaat te wissen en opnieuw in te dienen.
Beslis: de conversie houden of handmatig overtekennen
Na een paar rondes rest één beslissing: is deze SVG goed genoeg, of is handmatig overtekenen de moeite waard?
Kies voor behoud van de conversie wanneer het beeld vooral uit kleurvlakken bestaat met regelmatige krommingen, er weinig kleine tekst en dunne lijnen zijn en het gebruik web, interface-iconen of materiaal op middelgroot formaat betreft. Zijn bij 4× de randen schoon, de uitsparingen compleet en de kleinste letters leesbaar, dan kun je stoppen; het minimum aan paden nastreven hoeft niet.
Kies voor handmatig overtekennen wanneer er veel kleine tekst is, haarlijnen dicht op elkaar zitten, de gradiënt de kern van de merkidentiteit vormt, of het gebruik grootformaatdruk en gevelborden betreft, waar elk trapje of elke breuk tot op het oog wordt vergroot. De sleutelcontouren in vectorsoftware over het origineel nabij tekenen kost dan doorgaans minder tijd dan oneindig herproberen.
Is de conversie al bijna bruikbaar en resteren alleen wat losse rafels, importeer de SVG dan in vectorsoftware voor puntenopschoning: overtollige punten verwijderen, brokkelige paden samenvoegen en afrondingen gelijktrekken. Dat is de afwerkingsstap ná het herproberen; het gebeurt in externe software, want de tool afbeelding-naar-vector biedt zelf geen puntenbewerking.
Het criterium volgt altijd het gebruik: hoe kleiner de werkelijke weergavegrootte, hoe hoger de tolerantie voor padprecisie; hoe groter de vergroting, hoe meer het loont om vooraf het best mogelijke origineel te zoeken.
Veelgestelde vragen
Helpt het om de afbeelding eerst te vergroten en dan naar SVG te gaan?
Beperkt. Vergroten voegt pixels toe, maar de geïnterpoleerde pixels rekken de bestaande contour alleen breder; er komt geen randinformatie bij en de ruis wordt mee vergroot. Handig is het om kleine afbeeldingen onder de drempel van 256 pixels toch te laten voldoen aan de inzendings-eisen; voor echt schone randen zoek je liever een origineel met hogere resolutie.
Waarom zitten foto-achtige logo's vol paden?
Foto's en doorlopende gradiënten hebben geen scherpe kleurvlakgrenzen, zodat het traceren de overgangen alleen met een massa kleine vlakken kan benaderen; het aantal paden explodeert met elk detail en het bestand wordt groot en lastig te bewerken. Voor dit soort materiaal is een bitmap met hoge resolutie meestal de betere keuze; heb je echt een vectorversie nodig, vereenvoudig dan eerst naar een vlakkleurige versie of vectoriseer alleen het iconische beeldmerk. Welk materiaal de conversie waard is en wat beter bitmap blijft, staat met een keuzetabel per scenario in 'PNG of SVG voor je logo: kiezen voor website, poster en drukwerk'.
Wanneer is de conversie goed genoeg voor de taak?
Toets op de uiteindelijke gebruiksgrootte. Zet het resultaatspaneel op 4× en bekijk vier plekken — krommingen, uitsparingen, dunne lijnen en kleine tekst — en zoom daarna terug naar 1× om te oordelen of de kleurblokken acceptabel zijn. Voor web en interfaces meet je aan de scherpte op de werkelijke weergavegrootte; grootformaatdruk en gevelborden vergroten elk gebrek en vragen dus een hogere lat. Is dezelfde rand tussen twee rondes zichtbaar verbeterd, dan volstaat deze ronde.
Schoon het origineel op en converteer opnieuw
Begin bij de ruwste rand: breng het probleem onder in een categorie, maak met de bijbehorende methode een nieuwe invoer en open afbeelding naar vector om met het nieuwe bestand opnieuw te converteren. Ga daarna terug naar dezelfde rand onder dezelfde vergroting; is de verbetering zichtbaar, pak dan de volgende rand aan.
