Hoe converteer je SVG naar PNG (En wanneer moet je dat doen)

SVG is perfect op het web, maar veel platforms accepteren het niet: sociale platforms, e-mailclients en veel printdiensten willen liever een rasterafbeelding. Het converteren van SVG naar PNG duurt een minuutje, en als je de juiste exportgrootte kiest, ziet het er net zo scherp uit als het origineel. Een kanttekening: PNG gaat niet terug naar SVG zonder kwaliteitsverlies, dus bewaar je oorspronkelijke bestand. Als je al weet wat je nodig hebt, ga dan direct naar de SVG naar PNG-converter; anders behandelt deze gids wanneer je moet converteren, welke pixelpositie je moet gebruiken voor web, retina en print, en hoe je je transparante achtergrond intact houdt.

SVG versus PNG in één minuut

SVG is een vectorformaat: een reeks tekeninstructies (paden en vormen) die bij elke grootte, van 16px tot 16.000px, scherp wordt weergegeven en een klein bestand blijft voor logo's, iconen en geometrische kunst. Het is bewerkbaar in een teksteditor en ondersteunt zelfs animatie.

PNG is een rasterformaat: een vaste raster van pixels. Scherp in de native grootte, wazig bij opschaal. Het excelleert in verlopen, schaduwen en fotografische details, en wordt overal voorspelbaar weergegeven.

Waar mensen vaak fout in gaan: bij het converteren van SVG naar PNG "verlies" je geen kwaliteit tijdens de export. De pixels worden gegenereerd uit de vectorwiskunde, dus een correct gesizeerde export is pixel-perfect. De echte kosten zijn dat de PNG voor altijd aan één resolutie gebonden is.

Gouden regel: houd SVG als je bron van waarheid, en exporteer een PNG wanneer een bestemming daar om vraagt.

Wanneer moet je SVG naar PNG converteren?

Je convergeert omdat de bestemming SVG niet kan verwerken, niet omdat PNG beter zou zijn. In de praktijk komen deze situaties constant voor:

• Sociale media. Instagram, X/Twitter, Facebook en LinkedIn accepteren geen SVG-uploads. Converteer naar PNG of JPG voordat je post.
• E-mail. De meeste e-mailclients hebben beperkte of geen SVG-ondersteuning. Gebruik PNG voor nieuwsbriefafbeeldingen en e-mailsignaturen.
• Favicons en app-iconen. Moderne browsers accepteren SVG-favicons, maar Apple touch icons en oudere browsers hebben nog steeds PNG-versies nodig. Onze gids over het maken van een favicon vanuit een logo loopt dit proces stap voor stap door.
• Printdiensten. Veel fotoprodukt-printers (stickers, visitekaartjes, merchandise) accepteren PNG, maar niet SVG.
• Verouderde software en sommige CMS'en. Oudere tools en documentworkflows kunnen SVG verkeerd of helemaal niet weergeven; een PNG is de veilige keuze. Sommige versies van Office en oudere documentworkflows behandelen SVG inconsistent.

En wanneer niet converteren: op websites. Daar blijft SVG scherp bij elke grootte, kan het met CSS worden gestyled en geanimeerd, en weegt het vaak minder dan een grote PNG. Als je enige bestemming je eigen site is, sla de conversie dan volledig over.

Bron voor de punten over platformondersteuning hierboven: ConverterUp.

Hoe converteer je SVG naar PNG in Tool Cloud (stap voor stap)

1. Open de pagina voor de SVG naar PNG-converter.
2. Upload je SVG. Je kunt meerdere bestanden tegelijk uploaden als je een set converteert.
3. Converteer en download de PNG. Voor een exacte pixelpositie stel je de velden voor breedte en hoogte in (of gebruik je de resolutieoptie, die loopt van 72 tot 1200) voordat je converteert; er is ook een toggle voor behoud van aspectverhouding. Geüploade bestanden worden automatisch verwijderd na verwerking.

Omdat de converter een expliciete breedte en hoogte gebruikt, hoef je niets te doen aan de viewport van je SVG of dingen te herschalen in een ontwerpbewerker: bedenk gewoon de uitvoergrootte (volgende sectie) en typ deze in.

SVG naar PNG converteren zonder online tool

Hiervoor heb je geen online converter nodig. Elk designprogramma exporteert direct naar PNG:

• Figma, Illustrator, Affinity, Inkscape: gebruik het exportdialoogvenster, kies PNG en stel de exportgrootte in pixels in (hier pas je de schaalfactor hieronder toe). Dit is de beste optie als je het brondossier hebt, omdat je tekst naar contouren kunt converteren en ongewenste achtergrondrechthoeken in dezelfde stap kunt verwijderen.
• Vanaf een website: klik met de rechtermuisknop op de SVG (of het SVG-bestand zelf zodra het in een browsertabblad is geopend) en gebruik "Afbeelding opslaan als" — meestal krijg je dan de SVG, dus exporteer of converteer vanaf daar.
• Laatste redmiddel, helemaal geen tools: open de SVG in een browser, zoom in tot het nog steeds scherp is en maak een screenshot. Je verliest transparantie tenzij je een capturetool gebruikt die dit ondersteunt, en de randen zullen niet zo schoon zijn als bij een echte export. Goed voor een snelle mockup, niet voor productie.

Welke pixelpositie moet je exporteren? (Gids voor schaalfactoren)

Kies je exportgrootte door de viewport-dimensies van de SVG te vermenigvuldigen met een schaalfactor: een SVG met een viewport van 200×200 geëxporteerd op 1x geeft een PNG van 200×200px, op 2x geeft 400×400px, en op 3x geeft 600×600px. In de converter wordt diezelfde wiskunde simpelweg de breedte en hoogte die je invoert. Stem de schaal vervolgens af op de bestemming:

Voor alledaagse webiconen en logo's is 2x de praktische sweet spot: één bestand op 2x dekt zowel standaard- als retinaschermen, omdat het soepel downscaalt op standaarddisplays. Als een specificatie letterlijk om één vaste grootte vraagt, is 1x van de overeenkomstige viewport het antwoord. Voor print ga je voor 3x–4x; dat geeft genoeg pixels voor kleine gedrukte items zoals stickers of visitekaartjes, terwijl grotere prints evenredig meer nodig hebben.

Er is geen kwaliteitsnadeel voor het exporteren van een groter formaat dan nodig, omdat de pixels afkomstig zijn uit vectorwiskunde, niet uit uitrekken. Het enige nadeel is de bestandsgrootte, die groeit met het kwadraat van de schaal: een PNG op 4x heeft zestien keer zoveel pixels als een op 1x. Kies dus je grootte op basis van waar het bestand heen gaat, niet omdat "groter veiliger is".

Transparantie behouden (en wanneer je een witte achtergrond moet gebruiken)

Het alpha-kanaal van PNG behoudt SVG-transparantie natief, wat precies is wat je wilt voor logo's en iconen die op verschillende achtergronden moeten staan. Exporteer op elke schaal en de transparantie wordt onaangetast overgenomen.

Er is echter een klassieke valkuil hier. Een SVG kan lijken alsof hij een witte achtergrond heeft in een browser, terwijl je eigenlijk de pagina erachter ziet. Test hem voor het converteren op een donkere achtergrond. Als de vorm nog steeds correct leesbaar is, heb je echte transparantie; als je een witte doos ziet, heeft je SVG een ingebakken achtergrondrechthoek.

Wanneer je een achtergrond moet invullen: sommige platforms en oudere tools gaan niet goed om met transparantie. Voor die uploads is een solide achtergrond (meestal wit) de veiligere keuze.

En als je SVG wel een achtergrondrechthoek bevat die je niet wilt, verwijder deze dan in je ontwerpbestand voordat je exporteert. Dat is een fix in het ontwerpbestand, geen instelling voor de conversie.

Valkuilen die SVG-exporten breken

De meeste conversies van SVG naar PNG gaan prima. Diegene die mislukken, doen dat meestal op een van deze drie manieren:

• Lettertypes. SVG-tekst wordt weergegeven met lettertypes die beschikbaar zijn voor het apparaat dat de rastering uitvoert, volgens de SVG 1.1-specificatie. Als de rasterizer je lettertype niet heeft, krijg je tekstsubstitutie of een gebroken lay-out. De oplossing is simpel: converteer tekst naar paden/contouren in je ontwerptool voordat je de SVG exporteert. Dit is de meest voorkomende oorzaak van de vraag "waarom ziet mijn logo er verkeerd uit in de PNG?"
• Bijsnijden. Sommige converters knippen de uitvoer af op het door de SVG opgegeven viewport, en SVG-inhoud kan daarbuiten reiken, waardoor alles buiten het zichtbare gebied verloren gaat. Controleer daarom of niets belangrijks buiten het canvas staat voordat je exporteert.
• Geavanceerde filters. De weergave van SVG-filters en -verlopen kan verschillen tussen renderers. Server-side rasterizers verwerken ze anders dan browsers; bijvoorbeeld ImageMagick schakelt over op librsvg als die beschikbaar is, en valt anders terug op een zwakkere interne renderer. Verlopen zelf rasteren op elke schaal netjes (MDN), maar complexe filterketens kunnen er anders uitzien dan je browservoorbeeld. Als dat gebeurt, vereenvoudig dan de effecten of voer de rastering vooraf uit in je ontwerptool.

Een pictogramset bulksgewijs converteren

Pictogramsets leven of sterven op basis van consistentie. Een mix van maten, of sommige pictogrammen met transparante achtergronden en anderen met een witte, ziet er kapot uit in een product- of app-UI, zelfs als elk individueel bestand op zich goed is.

Dus bepaal twee dingen van tevoren:

1. Eén schaal. 2x voor web is de gebruikelijke keuze.
2. Eén achtergrondbeleid. Meestal transparant, tenzij de bestemming geen alpha kan verwerken.

Pas beide vervolgens toe op elk bestand. De praktische aanpak: upload meerdere SVG's tegelijk in de converter en exporteer de hele batch op dezelfde breedte en hoogte, in plaats van bestanden één voor één te converteren en hierdoor af te wijken.

Als je daarna meerdere maten uit één bron-SVG nodig hebt (zeg maar 16, 32 en 512px), exporteer dan opnieuw vanuit de SVG bij elke maat, of laat de PNG via een afbeeldingsresizer resizen — maak een kleine PNG niet groter, want dat maakt hem alleen maar wazig.

Veelgestelde vragen, beantwoord op één plek

Gaat kwaliteit verloren bij het converteren van SVG naar PNG?

Nee, niet als je exporteert op de juiste grootte. De pixels van de PNG worden gegenereerd uit de vectorwiskunde, dus het resultaat is precies zo scherp als de SVG bij die resolutie. Het enige echte verlies is flexibiliteit: de PNG is voor altijd vastgelegd op één pixelafmeting.

Kan ik PNG terugconverteren naar SVG?

Niet netjes. Tracing benadert het pixelpatroon in plaats van de oorspronkelijke paden te herstellen, dus het is nooit verliesvrij — platgekleurde logo's worden redelijk goed getraceerd, terwijl foto's en verlopen slecht worden getraceerd. Houd je originele SVG als masterbestand en dan heb je tracing helemaal niet nodig.

Welke achtergrond moet ik gebruiken?

Transparant voor alles wat op wisselende achtergronden komt, wat het alpha-kanaal van PNG natief aankan. Vul alleen een vaste achtergrond (meestal wit) als de bestemming geen transparantie ondersteunt.