Afbeelding naar SVG vectoriseren

Zo zet je een afbeelding om naar SVG

1. Sleep een PNG-, JPG-, WebP- of GIF-afbeelding naar het uploadvlak, of klik erop om er een te kiezen. Het origineel verschijnt links.
2. Kies een Voorinstelling: - Logo (egale kleuren, strakke vormen) voor logo’s, pictogrammen, stempels en vlakke illustraties; - Gedetailleerd (meer kleuren en paden) voor tekeningen met schaduwen of veel kleuren; - Posterized (4 afgevlakte kleuren) voor een gestileerd, posterachtig resultaat van een foto.
3. Pas zo nodig Aantal kleuren (2 tot 64) en Stipjes negeren kleiner dan (px) aan. De voorinstelling vult voor beide zinnige waarden in.
4. Kies een Werkformaat (langste zijde). De afbeelding wordt op dat formaat getraceerd; de SVG zelf behoudt de oorspronkelijke afmetingen.
5. Klik op Omzetten naar SVG. Het resultaat verschijnt rechts, met de bestandsgrootte, het aantal paden en kleuren en hoe lang het traceren duurde.
6. Klik op SVG downloaden, of op SVG-code kopiëren om de code in je HTML of ontwerpprogramma te plakken.

Hoe traceren werkt

Deze tool gebruikt imagetracerjs, een opensource-tracer, in drie stappen:

1. Kleurkwantisatie: de afbeelding wordt teruggebracht tot het aantal kleuren dat je hebt gekozen. Elke pixel krijgt de dichtstbijzijnde paletkleur, en het palet wordt in meerdere rondes verfijnd.
2. Randdetectie: voor elke kleur worden de omtrekken van alle vlakken in die kleur gevolgd, inclusief gaten (zoals de binnenkant van een “O”).
3. Paden passen: de omtrekken worden vereenvoudigd tot rechte lijnen en kwadratische curven, die <path>-elementen in de SVG worden.

Vlakken kleiner dan de drempel Stipjes negeren kleiner dan (px) vallen weg, wat ruis en JPG-artefacten verwijdert. Een waarde van 0 behoudt alles; 8 tot 20 is goed voor logo’s; hogere waarden geven een schonere maar eenvoudigere tekening. Volledig transparante delen worden verwijderd, dus een logo op een transparante achtergrond blijft transparant.

Wat geeft een goed resultaat?

Traceren werkt het best bij eenvoudige logo’s en tekeningen: weinig egale kleuren, duidelijke randen, geen kleurverlopen. Een ingescande schets, een zwart-witte handtekening of een pixelart-pictogram laat zich met 2 tot 8 kleuren heel goed traceren.

Bij foto’s ligt dat anders. Een foto bevat duizenden subtiele tinten, dus een getrouwe vectorversie heeft veel kleuren en tienduizenden paden nodig, en de SVG wordt veel zwaarder dan de JPG. Gebruik in dat geval Posterized (4 afgevlakte kleuren) voor een artistiek effect, en verwacht geen fotografisch resultaat. Wordt de SVG erg groot, dan waarschuwt de tool je.

Tips voor een schoner logo:

• begin met de grootste en scherpste versie van de afbeelding die je hebt;
• zet Aantal kleuren op het werkelijke aantal kleuren in het logo (inclusief de achtergrond);
• verhoog de drempel voor stipjes als je kleine puntjes langs de randen ziet.

Privacy en veilig voorbeeld

De afbeelding wordt in je browser getraceerd en nooit geüpload. Het SVG-voorbeeld wordt als gewone afbeelding getoond vanaf een privé blob-adres en nooit in de pagina ingevoegd, dus zelfs een ongewoon bestand kan geen code uitvoeren.