Afbeelding naar SVG

Over het omzetten van een afbeelding naar SVG

Een PNG is een raster van pixels. Vergroot u het, dan krijgt u grotere pixels. Een SVG is een verzameling vormen die met wiskunde is beschreven, en blijft daarom op elk formaat scherp — op een visitekaartje, op een reclamebord, op een scherm dat nog niet bestaat.

Het probleem is dat u de SVG zelden hebt. U hebt een logo dat iemand als PNG van 400 px heeft gemaild, en nu moet het op een bord.

Deze tool trekt de afbeelding over tot vormen. Hij zoekt de randen tussen kleuren en tekent daar echte vectorpaden langs, zodat u er een volwaardige SVG uit krijgt die u kunt schalen, verkleuren en in elk ontwerpprogramma kunt openen.

Wat overtrekken wel en niet kan

Overtrekken herstelt niet het oorspronkelijke bestand. Het tekent om wat het kan zien, en het resultaat hangt volledig af van wat u erin stopt.

Het werkt goed bij:

• Logo's en woordmerken met vlakke kleuren
• Pictogrammen, symbolen en beeldmerken
• Lijntekeningen, schetsen en inkttekeningen
• Diagrammen, kaarten en plattegronden
• Sjablonen, silhouetten en stempels

Bij foto's werkt het niet. Een foto heeft geen schone randen tussen kleuren — hij heeft er miljoenen geleidelijke. Overtrekken maakt daar duizenden kleine gekleurde vlekken van: technisch een SVG, meestal *groter* dan de foto waar hij vandaan kwam, en nergens goed voor. De tool herkent een waarschijnlijke foto en zegt dat, in plaats van u een bestand van 12 MB te geven dat op gemorste verf lijkt.

De instellingen

Geef eerst aan wat de afbeelding is — Logo of pictogram, Lijntekening of Gedetailleerde tekening. Dat zet alleen de drie schuifjes op een verstandig beginpunt; daarna kunt u bijstellen.

• Aantal kleuren is het belangrijkste. Overtrekken werkt door het beeld tot een klein palet terug te brengen en om elk gebied heen te tekenen. Een logo met twee kleuren dat met 8 kleuren wordt overgetrokken, pikt de anti-aliasingrand op als extra vormen; met 2 komt het schoon uit. Minder kleuren is bijna altijd beter dan meer.
• Gladheid strijkt het gerommel glad dat anti-aliasing langs een rand achterlaat. Verhoog het als de omtrekken rafelig ogen; verlaag het als echt detail wordt afgerond.
• Detail bepaalt hoe klein een vorm mag zijn voordat hij wordt weggelaten. Verlaag het om spikkels en ruis weg te gooien; verhoog het om fijne trekjes in een ingewikkelde tekening te behouden.

Overtrekken, het resultaat rechts bekijken, bijstellen, opnieuw overtrekken. Het kost seconden.

De achtergrond weglaten

De achtergrond weglaten gooit de grote egale vorm achter de tekening weg, zodat de SVG een transparante achtergrond heeft in plaats van een witte rechthoek.

Gebruik het voor een logo dat op iemand anders' pagina of op een gekleurde kop moet staan. Laat het uit als de achtergrond echt bij het ontwerp hoort.

Controleer de randen voordat u het gebruikt

Zoom in op het overgetrokken vlak rechts. Hoeken die scherp horen te zijn, bochten die vloeiend horen te zijn en kleine tekst zijn de plekken waar overtrekken zijn grenzen laat zien.

Is het resultaat bijna goed maar rommelig, probeer dan eerst minder kleuren. Is het origineel heel klein, dan kan overtrekken alleen gissen naar detail dat er nooit was — een favicon van 64 px wordt geen scherp logo.

Er wordt niets geüpload

De afbeelding wordt in uw browser gelezen en overgetrokken. Hij bereikt nooit een server, wat telt als het bestand een nog niet uitgebracht logo is, het merk van een klant of werk onder geheimhouding.

Het betekent ook: geen groottelimiet en geen wachten. Heel grote afbeeldingen worden vóór het overtrekken verkleind, want voorbij een bepaald punt leveren de extra pixels alleen ruis op, geen detail.

Waarvoor mensen het gebruiken

• Een logo dat alleen als PNG bestaat en nu op bebording of naar de drukker moet
• Een pictogram dat in code verkleurd of geschaald moet worden
• Een schets of lijntekening die wordt voorbereid voor snijden, graveren of borduren
• Een sjabloon of silhouet voor een snijplotter of laser
• Een diagram omzetten in iets bewerkbaars
• Een SVG voor een website, waar het op elk scherm scherp blijft

Goed om te weten

• De SVG heeft een nette viewBox, dus hij schaalt goed als u in CSS of HTML een breedte instelt
• SVG-code kopiëren zet de opmaak op uw klembord, klaar om rechtstreeks in een pagina of component te plakken
• Het resultaat opent in Illustrator, Inkscape, Figma en Affinity, waar de paden met de hand te bewerken zijn
• Duizenden vormen betekent dat de instellingen voor deze afbeelding verkeerd staan, niet dat de tool faalde — verminder het aantal kleuren
• Voor de andere richting gebruikt u SVG naar PNG of SVG naar JPG
• Om in plaats daarvan de achtergrond van een foto te halen, gebruikt u Achtergrond verwijderen

Zo gebruikt u het

• Klik op Klik om te uploaden, of sleep uw logo of tekening op het vak
• Kies wat het is: Logo of pictogram, Lijntekening of Gedetailleerde tekening
• Druk op Overtrekken en bekijk het resultaat rechts
• Zijn de randen rommelig, pas dan eerst het aantal kleuren aan en trek opnieuw over
• Vink De achtergrond weglaten aan als u transparantie nodig hebt
• Druk op SVG downloaden, of op SVG-code kopiëren om hem direct in een pagina te plakken

Verwante tools

• SVG naar PNG — de andere richting
• SVG naar JPG — een SVG als platte afbeelding
• Achtergrond verwijderen — een onderwerp uit een foto knippen
• Afbeelding vergroten — een kleine bitmap groter maken zonder overtrekken
• Favicon maken — van het resultaat een site-pictogram maken
• Afbeelding comprimeren — als een bitmap toch het juiste antwoord blijkt