PNG mot SVG: vilket format ska du använda?
PNG mot SVG förklarat: hur respektive format fungerar, transparens, filstorlek, skalning och bästa tillämpning, plus hur du konverterar mellan PNG och SVG.
1. Kärnskillnaden: pixlrutnät mot matematiska sökvägar
En PNG är en bitmap: bilden delas upp i enskilda pixlar och färgen på varje pixel registreras. Att förstora en PNG innebär bara att sträcka de pixlarna, och därför uppstår taggiga kanter och suddighet. En SVG är en vektorbild: den beskriver former med matematiska instruktioner som koordinater och Bézierkurvor, och webbläsaren ritar om bilden i den nya storleken, så den förblir skarp i alla skalor. Det enskilda faktumet är roten till nästan alla skillnader mellan de två formaten.
När det gäller transparens stöder PNG en alfa-kanal och kan lagra en transparent bakgrund. SVG är transparent av natur — så länge du inte ritar en bakgrundsrektangel förblir allt utanför bilden transparent. Som en parentes har JPG ingen transparens alls: dess vita bakgrund är en riktig färg som målats in i bilden.
2. Filstorlek och inläsning
För enkel grafik som ikoner och logotyper är en SVG ofta bara några kB, och en enda fil passar alla skärmdensiteter. PNG behöver däremot vanligtvis @2x- och @3x-versioner för att förbli skarp på Retina-skärmar, vilket multiplicerar filstorleken. För foton blir förhållandet omvänt: rika färgövergångar ger ett enormt antal sökvägar vid vektorisering, så SVG-filen blir långt större än en JPG eller WEBP — det lönar sig inte.
Orsaken ligger i hur respektive format komprimerar. PNG registrerar pixlar med förlustfri komprimering, så ju mer komplex bilden är desto större blir filen. SVG är ren text, där upprepade sökvägskommandon och koordinater komprimerar extremt väl. Det är därför två format som båda kallas förlustfria kan bete sig så olikt när det gäller storlek.
| Användningsfall | Rekommenderat format | Varför |
|---|---|---|
| Ikoner / logotyper på webben | SVG | En fil för alla upplösningar och CSS kan färga om den |
| Foton | JPG / WEBP | Små filer med fotografisk exakthet |
| Skärmbilder | PNG | Pixelexakta och förlustfritt komprimerade |
| Datadiagram | SVG | Skarpa vid skalning och lätta att göra interaktiva |
| Avatarier i sociala medier | PNG / JPG | De flesta plattformar tar bara emot raster |
3. När ska du använda PNG
- Foton, komplex belysning och subtila gradienter;
- Skärmbilder och gränssnittsinspelningar som måste vara pixelexakta;
- Plats där plattformen bara tar emot raster, till exempel avataruppladdningar i vissa paneler;
- Som kompatibilitetsalternativ för mycket gamla miljöer som inte stöder SVG.
4. När ska du använda SVG
- Ikoner och logotyper på webben: en fil för alla upplösningar, fortfarande skarp på Retina-skärmar;
- Grafik som behöver färgas om med CSS eller JavaScript och animeras med streckritning;
- Datadiagram: visualiseringsbibliotek som ECharts genererar SVG som standard;
- Tryck, lasergravyr och vinylskärning, där enheten läser vektorsökvägar.
5. Kan PNG och SVG konverteras till varandra?
Ja. PNG till SVG: använd PolySVG-verktyget PNG till SVG eller verktyget Bild till SVG, ladda upp filen och klicka generera för att vektorisera den — resultatet blir utmärkt för ikoner och logotyper, medan foton får en illustrationston. Konverteringen är gratis och en transparent PNG behåller sin transparenta bakgrund. Den resulterande SVG-filen kan sedan öppnas i editorn för ommålning och borttagning av bakgrund, vilket fullbordar arbetsflödet. SVG till PNG: öppna filen i online-SVG-editorn och exportera en PNG i den upplösning du behöver — perfekt för dokument eller förhandsvisningar.
En sak är värd att hålla i minnet: PNG till SVG är inte ett enkelt ”spara som”, det är en vektorisering som ritar om konturerna. Grafiska resurser blir rena sökvägar medan foton komprimeras till färgblock. Förhandsgranska resultatet i verktyget och kontrollera att stilen är som du förväntar dig innan du laddar ner det.
En tumregel: ikoner, logotyper och diagram tar SVG; foton och skärmbilder tar PNG/JPG/WEBP. Är du osäker, välj SVG för allt som är grafik. Läs vidare i Vad är SVG och Tre sätt att konvertera en bild till SVG.
Vanliga frågor
Ska ikoner på webbplatser vara PNG eller SVG?
Föredra SVG: en fil passar alla skärmdensiteter, den är liten och CSS kan färga om den. Använd PNG endast som alternativ när en plattform inte stöder SVG.
Förblir en transparent PNG transparent efter konvertering till SVG?
Ja. När du konverterar med PolySVG-verktyget PNG till SVG bevaras de transparenta områdena fullständigt och ingen vit bakgrund hittas på.
Är foton lämpliga att konvertera till SVG?
Inte om du behöver fotografisk exakthet. Vektorisering komprimerar en foto till färgblock och ger en illustrationston; foton är bättre betjänade av JPG / WEBP.