# SVG of PNG: vector of pixels voor logo’s en graphics [Canonical HTML page](https://gradiently.design/nl/guide/svg-vs-png) Een SVG is een set tekeninstructies. Een PNG is een vast raster van puntjes. Dat ene verschil bepaalt welk bestand op je website, je verpakking en je Instagram hoort. ## The short version - SVG is een vectorformaat dat vormen met wiskunde beschrijft, dus het blijft op elk formaat perfect scherp. - PNG is een rasterformaat van een vast raster pixels, dus het wordt zacht of blokkerig als je het groter maakt dan het formaat. - Gebruik SVG voor logo’s, iconen, eenvoudige illustraties en interfacegraphics op websites en in print. - Gebruik PNG voor foto’s, texturen, complex beeldmateriaal en alles wat je uploadt naar socialmediaplatforms, die geen SVG accepteren. - Een goede logokit bevat allebei: een SVG-master en PNG-exports op de formaten die elke plek nodig heeft. **SVG vs PNG** is eigenlijk vector tegenover pixels. Een SVG-bestand slaat vormen op als instructies (teken hier een cirkel, vul hem met deze kleur), dus een browser of printer tekent het op elk formaat scherp opnieuw, van een favicon van 16 pixels tot een winkelbord. Een PNG slaat een vast raster van gekleurde pixels op, dus het ziet er op zijn eigen formaat perfect uit en zacht als je het vergroot. Gebruik SVG voor logo’s, iconen en eenvoudige graphics op het web en in print. Gebruik PNG voor foto’s, getextureerd beeldmateriaal en alles wat je naar social media uploadt. ## Wat een SVG-bestand echt is SVG staat voor Scalable Vector Graphics en het is gewone tekst. Open er een in een code-editor en je ziet leesbare opmaak, geen ruis. Daarom zijn SVG’s piepklein voor eenvoudige vormen, kun je hun kleur met css veranderen en kunnen zoekmachines en schermlezers de tekst erin lezen. ```html ``` Een compleet logoteken in een paar honderd bytes. De `viewBox` bepaalt het coördinatenstelsel van de tekening; het formaat waarop hij wordt getoond, is aan de pagina. Een PNG van hetzelfde teken heeft voor elk formaat waarop je het scherp wilt hebben een apart bestand nodig, en geen ervan kan van kleur veranderen zonder opnieuw te exporteren. De [MDN SVG-documentatie](https://developer.mozilla.org/en-US/docs/Web/SVG) behandelt het formaat volledig. ## SVG en PNG naast elkaar | Eigenschap | SVG | PNG | | --- | --- | --- | | Type | Vector: vormen en paden | Raster: een raster van pixels | | Schalen | Scherp op elk formaat | Scherp op zijn eigen formaat, zacht als vergroot | | Transparantie | Ja | Ja, volledig alfakanaal | | Foto’s en textuur | Slecht: bestanden worden enorm of onmogelijk | Uitstekend | | Bewerkbaar met code | Ja: kleuren, animatie, css | Nee | | Upload naar social media | Niet geaccepteerd | Overal geaccepteerd | | Gebruikelijke grootte, eenvoudig logo | 1 tot 10 KB | 10 tot 100 KB per formaat | ## SVG of PNG voor een logo Bewaar het logo-master als SVG. Het is het enige bestand dat elk toekomstig gebruik dient: een websiteheader, een banner van 4 meter, borduurwerk, een briefhoofd, een favicon. Exporteer er dan PNG’s van voor de plekken die geen vectoren aankunnen, vooral socialmediaplatforms, e-mailhandtekeningen en sommige presentatieprogramma’s. | Waar het logo komt | Bestand | Formaat | | --- | --- | --- | | Header en voettekst van de website | SVG | Schaalt mee | | Favicon | SVG plus PNG-terugvallen | ICO op 32×32, PNG’s op 180×180, 192×192 en 512×512 | | Profielfoto op Instagram, LinkedIn of X | PNG | Vierkant 1080×1080, houd het teken binnen de middelste cirkel | | E-mailhandtekening | PNG | Tot 600×200, geëxporteerd op tweemaal het weergaveformaat | | Drukker, bordenmaker, merchandise | SVG of PDF | Vector, elk formaat | Eén SVG-master, een handvol PNG-exports. [Logoformaten](https://gradiently.design/nl/guide/logo-sizes) en [logovarianten](https://gradiently.design/nl/guide/logo-variations) gaan verder. Een vierkante profielfoto met een eenvoudig woordmerk gecentreerd op een kleurverloopachtergrond Profielfoto’s zijn altijd PNG of JPG. Exporteer het logo groot, 1080×1080, zodat het scherp blijft op schermen met hoge dichtheid. ## Wanneer PNG de juiste keuze is Vector werkt alleen als het beeld als vormen te beschrijven is. Zodra een beeld fotografisch detail, zacht licht, korrel of duizenden subtiele kleurveranderingen heeft, is een PNG kleiner en getrouwer. Een foto traceren naar een SVG levert een bestand op dat zwaarder en slechter is. - Foto’s en fotocollages. - Getextureerd beeldmateriaal: korrel, papier, penseelstreken, filmeffecten. - Socialposts, stories en carrousels, omdat platforms alleen pixels accepteren. - Screenshots en alles wat van een scherm is vastgelegd. - Rijke achtergronden met gelaagd licht en ruis. Een vierkante graphic met het label Vector, die vlakke vormen voorstelt die bij SVG passen Vlakke vormen, schone randen, een paar kleuren: ideaal SVG-terrein. Een vierkante graphic met het label Pixels op een getextureerd kleurverloop, die beeldmateriaal voorstelt dat bij PNG past Korrel, zacht licht en materiaaltextuur horen in een PNG. ## SVG of PNG voor een website Gebruik op een site inline SVG of een SVG-bestand voor logo’s, iconen en illustraties, en moderne formaten voor foto’s. SVG-iconen schalen mee met tekst, kunnen `currentColor` aannemen zodat ze je thema volgen en hebben geen aparte bestanden nodig voor schermen met hoge dichtheid. Voor rasterafbeeldingen is [WebP](https://gradiently.design/nl/guide/webp-images) op je eigen pagina’s meestal een betere keuze dan PNG. ### Vermijden - Een PNG-logo uitgerekt om een brede header te vullen - Een foto getraceerd tot een enorme SVG - SVG-bestanden uploaden die je niet zelf hebt gemaakt zonder ze te saneren - Iconen als PNG’s die 1x-, 2x- en 3x-kopieën nodig hebben ### Doen - SVG-logo met een breedte ingesteld in css - Foto’s als WebP of JPG op het formaat waarop ze worden getoond - Behandel door gebruikers geüploade SVG als code, omdat het scripts kan bevatten - SVG-iconen met `fill: currentColor` > **SVG kan code bevatten** Omdat SVG opmaak is, kan een bestand uit een onbekende bron scripts bevatten. Sta SVG-uploads op je site alleen toe als ze zijn gesaneerd, of zet ze bij het uploaden om naar PNG. ## Zo zet je SVG om naar PNG 1. **Bepaal het grootste formaat dat je nodig hebt** Een profielfoto van 1080×1080 of een e-mailhandtekening van 1200×400 (tweemaal het weergaveformaat van 600×200). Exporteer één keer op dat formaat in plaats van later te vergroten. 2. **Exporteer vanuit de bron** Exporteer in Figma, Illustrator of Inkscape het frame als PNG op het gekozen formaat. Exporteren vanuit de vector houdt elke rand scherp. 3. **Houd transparantie aan** Laat de achtergrond leeg, zodat de PNG een alfakanaal heeft. Zie [transparante achtergrond](https://gradiently.design/nl/guide/transparent-background) om het te controleren. 4. **Controleer op 100%** Bekijk dunne lijnen en kleine letters op werkelijke grootte. Als ze uiteenvallen, vereenvoudig dan het logo voor kleine toepassingen in plaats van een modderig bestand te leveren. De andere kant op, van PNG naar SVG, is geen conversie maar een hertekening. Automatisch traceren werkt voor een gedurfd, vlak logo en faalt bij alles met textuur of zachte randen. Als je logo alleen als PNG bestaat, laat het dan één keer als vector hertekenen; elk later bestand wordt er beter van. De exports van Gradiently Pro dekken beide kanten: een ontwerp kan uit hetzelfde bestand als SVG voor web en print, of als transparante PNG voor platforms. [SVG en transparante PNG exporteren](https://gradiently.design/nl/guide/export-svg-transparent-png) laat zien hoe, en [PNG vs JPG](https://gradiently.design/nl/guide/png-vs-jpeg) beslecht de andere veelvoorkomende keuze. ## FAQ ### Is SVG beter dan PNG voor een logo? Voor het masterbestand wel: een SVG-logo blijft op elk formaat scherp en kan van kleur veranderen. Exporteer PNG-kopieën voor social media en e-mail, die geen SVG accepteren. ### Kan ik een SVG uploaden naar Instagram? Nee. Instagram en andere socialmediaplatforms accepteren PNG, JPG en video. Exporteer een PNG op het formaat van het platform, zoals 1080×1080 voor een vierkante post. ### Is SVG kleiner dan PNG? Voor eenvoudige vormen zoals logo’s en iconen is een SVG meestal veel kleiner. Voor foto’s en getextureerde beelden is een PNG of JPG kleiner en nauwkeuriger. ### Ondersteunt SVG transparantie? Ja. Alles wat niet in een SVG is getekend is transparant, dus het staat netjes op elke achtergrond. ### Kan ik een PNG-logo omzetten naar SVG? Alleen door te traceren of te hertekenen. Automatisch traceren werkt voor gedurfde vlakke logo’s; gedetailleerde of getextureerde logo’s moeten met de hand als vectoren worden hertekend.