PNG mot SVG: Hvilket format bør du bruke?

1. Kjernen i forskjellen: pikselrutenett mot matematiske baner

En PNG er en bitmap: bildet kuttes i enkeltpiksler, og fargen på hver pikel registreres. Å forstørre en PNG strekker ganske enkelt disse pikslene, og derfor oppstår tagget kant og uskarphet. En SVG er et vektorbilde: det beskriver former med matematiske instruksjoner som koordinater og Bézierkurver, og nettleseren tegner illustrasjonen på nytt i den nye størrelsen, slik at den forblir skarp i alle skalaer. Dette ene faktum er opphavet til nesten alle forskjeller mellom de to formatene.

Når det gjelder transparens støtter PNG en alfakanal og kan lagre en gjennomsiktig bakgrunn. SVG er gjennomsiktig av natur – så lenge du ikke tegner en bakgrunn, forblir alt utenfor illustrasjonen gjennomsiktig. Som en parentes har JPG ingen transparens i det hele tatt: den hvite bakgrunnen er en ekte farge som er malt inn i bildet.

2. Filstørrelse og innlastingsytelse

For enkel grafikk som ikoner og logoer er en SVG ofte bare noen kB, og én fil passer til alle skjermtettheter. PNG trenger derimot vanligvis @2x- og @3x-versjoner for å forbli skarp på Retina-skjermer, noe som multiplerer filstørrelsen. For foto blir forholdet omvendt: rike fargeoverganger gir et enormt antall baner ved vektorisering, så SVG-filen blir langt større enn en JPG eller WEBP – ikke verdt det.

Årsaken ligger i hvordan hvert format komprimerer. PNG registrerer piksler med tapsfri komprimering, så jo mer komplekst bildet er, desto større blir filen. SVG er ren tekst, der gjentatte banekommandoer og koordinater komprimerer utrolig godt. Det er derfor to formater som begge kalles tapsfrie kan oppføre seg så forskjellig når det gjelder størrelse.

Bruksområde	Anbefalt format	Hvorfor
Ikoner / logoer på nett	SVG	Én fil for alle oppløsninger, og CSS kan farge den
Foto	JPG / WEBP	Små filer med fotografisk gjengivelse
Skjermbilder	PNG	Pikselnøyaktige og tapsfritt komprimert
Datadiagrammer	SVG	Skarpe ved skalering og enkle å gjøre interaktive
Avatarer i sosiale medier	PNG / JPG	De fleste plattformer godtar bare raster

3. Når bør du bruke PNG

• Foto, komplekst lys og delikate gradienter;
• Skjermbilder og grensesnittopptak som må være pikselnøyaktige;
• Steder der plattformen bare godtar raster, for eksempel opplasting av avatar i noen dashbord;
• Som kompatibilitetsreserve for svært gamle miljøer som ikke støtter SVG.

4. Når bør du bruke SVG

• Ikoner og logoer på nettsteder: én fil for alle oppløsninger, fortsatt skarp på Retina-skjermer;
• Grafikk som trenger farging med CSS eller JavaScript og strekeanimering;
• Datadiagrammer: visualiseringsbiblioteker som ECharts lager SVG som standard;
• Trykk, lasergravyr og vinylskjæring, der enheten leser vektorbaner.

5. Kan PNG og SVG konverteres til hverandre?

Ja. PNG til SVG: bruk PolySVG-verktøyet PNG til SVG eller verktøyet Bilde til SVG, last opp filen og klikk generer for å vektorisere den – resultatet blir utmerket for ikoner og logoer, mens foto får en illustrasjonsaktig stil. Konverteringen er gratis, og en gjennomsiktig PNG beholder den gjennomsiktige bakgrunnen. Den resulterende SVG-filen kan fortsatt åpnes i editoren for farging og bakgrunnsfjerning, noe som fullfører arbeidsflyten. SVG til PNG: åpne filen i SVG-editoren på nett og eksporter en PNG i den oppløsningen du trenger – perfekt for dokumenter eller forhåndsvisninger.

Én ting å huske på: PNG til SVG er ikke et enkelt «lagre som», det er en vektorisering som tegner om konturene. Grafiske ressurser blir rene baner, mens foto krympes til fargeblokker. Forhåndsvis resultatet i verktøyet og kontroller at stilen er som du forventer før du laster ned.

Regel på én linje: ikoner, logoer og diagrammer tar SVG; foto og skjermbilder tar PNG/JPG/WEBP. Er du i tvil, velg SVG for alt som er grafikk. For å gå dypere, les Hva er SVG og Tre måter å konvertere et bilde til SVG.