Datzelfde logo is in de navigatie van een website misschien maar 24 pixels hoog, maar op een beursbanner moet het tot twee meter breed worden opgeschaald. Of je PNG of SVG kiest, hangt af van waar het terechtkomt: op het web en in productinterfaces heeft SVG de voorkeur — het logo is als paden vastgelegd en software tekent het op elke maat opnieuw; uploadingangen die alleen bitmap accepteren (socialavatars, sommige documenten) krijgen een transparante PNG; posters, gevelborden en drukwerk gebruiken SVG of een daaruit geëxporteerd vectorbestand, zonder onscherp te worden bij vergroting. Heb je nu alleen een PNG, dan hoef je niet opnieuw te beginnen: bepaal eerst welk formaat de situatie vraagt en vul later aan wat ontbreekt.
Kernpunten
- SVG voor het web, interfaces en situaties met herhaald schalen en herkleuren: het beeld is als paden vastgelegd, wordt bij vergroting hertekend en de randen blijven scherp.
- Ingangen die alleen bitmaps accepteren (socialavatars, sommige kantoorsoftware) krijgen een transparante PNG; je hoeft niet aan te dringen op SVG-steun van het platform.
- Een grafisch logo en woordbeeld verdienen een SVG-hoofdbestand; fotorealistische mascottes en merkimago's met complexe texturen houd je als PNG met hoge resolutie.
- SVG is niet per definitie kleiner dan PNG: de bestandsgrootte hangt af van de complexiteit van het beeld; kies op gebruik, niet op omvang.
Begin de keuze bij drie gebruiksscenario's
De drie meest voorkomende levertaken dekken vrijwel alle bestemmingen van logobestanden af.
Navigatielogo op het web. Het logo in de navigatiebalk, de footer en mobiele interfaces verschijnt op verschillende schermdichtheden in allerlei maten. SVG past hier het best: de browser tekent de paden realtime en alles blijft scherp, van de breedte van een klein pictogram tot een grote footerbanner; wil je herkleuren, dan doe je dat direct in het bestand of in de code, en hetzelfde bestand kan ongewijzigd naar een ontwerper voor verdere bewerking.
Socialavatar op klein formaat. Avataruploads accepteren doorgaans alleen JPG en PNG, dus één PNG met transparante achtergrond volstaat: als het platform de avatar bijsnijdt tot cirkel of vierkant, blijft er geen wit blok rond het logo achter. De weergavemaat is beperkt, dus de scherpte van een bitmap is ruim voldoende — SVG is hier niet nodig.
Posters en drukwerk op groot formaat. Posters, roll-up banners en gevelborden vergroten het logo tientallen keren. SVG lost het schaalprobleem bij de bron op: paden zijn onafhankelijk van resolutie en hoe groot de uitvoer wordt, bepaalt de gebruikssituatie. Heb je alleen een kleine PNG, dan wordt direct vergroten wazig met kartelranden — pas in dit scenario is een vectorbestand werkelijk nodig.
Waar de verschillen tussen PNG en SVG zichtbaar worden
Het fundamentele verschil zit in hoe de formaten een beeld vastleggen. PNG gebruikt een pixelraster: elk punt bevat één kleur en hoe groot het bestand ook is, het aantal pixels staat vast; bij vergroting voorbij de oorspronkelijke pixels kan software alleen bestaande pixels uitrekken, waarna randen wazig worden en kartelranden ontstaan. SVG beschrijft het beeld met paden en vormen: waar een lijn begint, hoe een curve buigt, welke kleur een vlak krijgt; bij vergroten tekent de software het volgens die beschrijvingen opnieuw en de randen blijven altijd glad.
Een transparante achtergrond ondersteunen beide, maar op verschillende wijze. PNG gebruikt een transparant pixelkanaal voor de uitsparingen rond het logo; SVG heeft van nature geen “ondergrond” — het beeld ís een verzameling paden. Het grotere scheidingspunt is verdere bewerking: een SVG open je en wissel je in één keer van kleur, verschuif je ankerpunten en splits of combineer je onderdelen; een PNG is alleen per pixel bewerkbaar en één kleurvlak aanpassen betekent in bitmapsoftware vlakken retoucheren.
De bestandsgrootte wordt vaak verkeerd begrepen. Bij een eenvoudig beeld noteert SVG slechts enkele paden en is doorgaans klein; een bitmap met rijke verlopen en duidelijke korrel wordt na omzetting naar SVG opgesplitst in een hoop fragmentpaden en kan daardoor veel groter worden dan de oorspronkelijke PNG. “SVG is kleiner” klopt niet; wat klopt is “de SVG van een eenvoudig beeld is klein”.
Een keuzetabel van scenario en formaat
Het type materiaal bepaalt de keuze meer dan formaatparameters. Advies voor drie gangbare soorten merkbeelden:
| Type materiaal | Beeldkenmerk | Advies | Reden |
|---|---|---|---|
| Grafisch logo, woordbeeld | Scherpe randen, beperkt aantal kleurvlakken | SVG-hoofdbestand aanhouden plus een transparante PNG | Schone, bewerkbare paden; SVG dient het schalen, PNG vangt de gevallen zonder SVG-steun op |
| Fotorealistische mascotte | Doorlopende verlopen, rijke schaduwen | PNG met hoge resolutie behouden | Vectorisatie splijt het beeld in veel fragmentpaden, moeilijk bewerkbaar, en het voordeel van schalen met weinig paden verdwijnt |
| Merkimago met complexe textuur | Veel detail, uitgesproken korrel | Primair bitmap, locaal vectoriseren waar nodig | Volledige omzetting levert zelden wat op; voor grotere maten eerst een bitmap met hogere resolutie opnieuw exporteren |
Eén vuistregel volstaat: hoe scherper de randen en hoe minder kleurvlakken, hoe meer vectoriseren loont; hoe dichter het beeld bij een foto staat, hoe beter het in bitmapformaat blijft.
Zo vul je een SVG aan als je alleen een PNG hebt
Zodra vaststaat dat je SVG nodig hebt, is de omzetting zelf maar een klein deel van het werk. Upload de PNG via afbeelding naar vector: de tool accepteert PNG, JPG en WebP met breedte en hoogte van minimaal 256 pixels, zet ingelogd per keer één afbeelding om en daarna download je het SVG-bestand. Interface-schermafbeeldingen van uploaden, controleren en downloaden staan in de tutorial “PNG en JPG naar SVG converteren” uit dezelfde serie; hier niet opnieuw uitgewerkt.
Na de omzetting moet het resultaat nog naar gebruik worden opgeruimd. Het resultaatpaneel biedt 1×-, 2×- en 4×-vergroting; let bij het leveren vooral op schone curven, uitsparingen en dunne lijnen. Twee dingen moet je vooraf accepteren: tekst wordt omgezet in contourpaden en keert niet terug als bewerkbaar origineel lettertype — copy aanpassen betekent opnieuw typen in een ontwerpgereedschap; en de randkwaliteit wordt bepaald door de bronafbeelding, dus een zwaar gecomprimeerde PNG levert ruwe randen op — vervang eerst door een scherpere bron voordat je omzet. Methoden om zulke bronafbeeldingen op te schonen komen apart aan bod in “Ruwe randen na het vectoriseren van je logo”.
Zo stel je een merkbibliotheek samen
Zodra de formaten vaststaan, organiseer je het logo als een reeks genoemde bestanden, zodat geen enkele partij later nog moet vragen. Een minimaal bruikbare levering ziet er zo uit:
| Bestand | Gebruik | Naamvoorbeeld |
|---|---|---|
| SVG-hoofdbestand | De enige bron voor web, materiaal, vergroten en verdere bewerking | acme-logo.svg |
| PNG met transparante achtergrond | Socialavatars, documenten en andere situaties die alleen bitmap aannemen | acme-logo-transparent.png |
| Voorvertoning op donkere ondergrond | De leesbaarheid van het logo op een donkere achtergrond controleren | acme-logo-preview-dark.png |
| Voorvertoning op lichte ondergrond | De uitstraling van het logo op een lichte achtergrond controleren | acme-logo-preview-light.png |
Gebruik een vast voorvoegsel met een doel-achtervoegsel en werk bij een nieuwe versie het versienummer bij; maak geen nieuwe namen door te kopiëren, anders duiken in de levering vroeg of laat logo-final-2.png en logo-ultieme-versie.png naast elkaar op. Zet de voorvertoningen op donkere en lichte ondergrond bij voorkeur in dezelfde map, zodat de ontvanger in één oogopslag ziet of het logo op beide achtergronden bruikbaar is.
Drukwerkbestanden behandel je apart. Vraagt de drukker om een vector-PDF, een specifieke kleurmodus of afloopmaten, dan worden die productiebestanden in de bijbehorende ontwerpflow gemaakt: vanuit de SVG als bron zet je in de ontwerpsoftware om en exporteer je, en de kleurnormen stem je punt voor punt met de drukker af. De tool afbeelding naar vector levert een SVG-bestand en maakt geen directe drukproductiebestanden.
Veelgestelde vragen
Is SVG altijd kleiner dan PNG?
Nee, de bestandsgrootte hangt af van de complexiteit van de inhoud. De SVG van een eenvoudig beeld noteert slechts enkele paden en is doorgaans klein; een bitmap vol verlopen, schaduwen en korrel wordt na omzetting een lading fragmentpaden en kan juist groter uitvallen. Kies het formaat op gebruik en schaalbehoefte, niet op omvang.
Een PNG wordt wazig bij vergroten — is vectoriseren verplicht?
Kijk naar wat het logo hierna moet doen. Voor een incidentele eenmalige vergroting volstaat een opnieuw geëxporteerde PNG met hogere resolutie; pas bij herhaald schalen, volledige herkleuring, drukwerk of als duurzaam merk-hoofdbestand loont een SVG. Een fotorealistisch logo levert ook na omzetting moeilijk bewerkbare fragmentpaden op; een bitmap met hoge resolutie aanhouden is praktischer.
Wat als de drukker om een PDF vraagt?
Volg de concrete eisen van de drukker in de bijbehorende ontwerpflow: zet het SVG-hoofdbestand in de ontwerpsoftware, exporteer naar het door de drukker gevraagde PDF-type en bevestig kleurmodus, afloop en andere parameters punt voor punt. De tool afbeelding naar vector levert een SVG-bestand; de PDF voor drukproductie ontstaat in de ontwerpstap.
Alleen een PNG? Vul dan eerst een SVG aan
Begin met wat er in de levering ontbreekt: heb je alleen een PNG-versie, vul dan eerst met afbeelding naar vector een SVG aan, controleer die in de voorvertoningen op donkere en lichte ondergrond en beslis daarna of hij als hoofdbestand kan dienen. Is deze stap klaar, dan hebben het web, de avatars en de posters alle drie een bestand in het passende formaat.
