SVG of PNG: vector of pixels voor logo’s en graphics

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.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Studio Nine">
  <defs>
    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#4f46e5"/>
      <stop offset="1" stop-color="#db2777"/>
    </linearGradient>
  </defs>
  <circle cx="32" cy="32" r="28" fill="url(#g)"/>
  <path d="M22 40 L32 20 L42 40 Z" fill="#ffffff"/>
</svg>

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 behandelt het formaat volledig.

SVG en PNG naast elkaar

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.

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.

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 op je eigen pagina’s meestal een betere keuze dan PNG.

Zo zet je SVG om naar PNG

1. 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. 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. 3

   Houd transparantie aan

   Laat de achtergrond leeg, zodat de PNG een alfakanaal heeft. Zie transparante achtergrond om het te controleren.

4. 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 laat zien hoe, en PNG vs JPG beslecht de andere veelvoorkomende keuze.