PNG jämfört med SVG.

Raster jämfört med vektor.

Den kanske största skillnaden mellan PNG och SVG är att det ena är ett rasterformat och det andra ett vektorformat.

En PNG är ett rasterbaserat – det vill säga pixelbaserat – bildformat. Om du skalar upp en rasterbild för mycket blir den brusig och pixelerad. Och om du förminskar den för mycket blir den suddig. PNG-filer kan hantera mycket höga upplösningar men de går inte att expandera hur mycket som helst.

SVG-filer är å andra sidan vektorbaserade – uppbyggda av ett komplext matematiskt nätverk av linjer, punkter, former och algoritmer. De kan expanderas till valfri storlek utan att tappa i upplösning.

Läs mer om raster jämfört med vektor

Filstorlekar.

PNG-filer är ofta tillräckligt stora för att hantera höga upplösningar. Storleken innebär att det kan ta längre tid att bearbeta, dela, spara och öppna dem. Det kan också tynga ned laddningen av webbsidor – det är därför JPEG är ett vanligare format för onlinefoton. Det finns dock en mindre 8-bitars PNG-variant, men den klarar bara 256 färger.

SVG-filer är mycket mindre än PNG och tynger troligen inte ned din dator eller webbplats. (Mycket detaljrika designer kan dock tynga ned en SVG.) Eftersom de är i vektorformat kan du skaländra SVG:er utan att tappa i kvalitet.

Komprimering.

SVG-filer har lossless-komprimering – det innebär att de kan komprimeras till mindre filstorlek utan att det påverkar definition, detaljer eller kvalitet.

PNG-filer har också en lossless-komprimering på 5–20 %, vilket delvis kan kompensera för filstorleken. Men de är trots det troligen större än motsvarande SVG.

Foto.

PNG-filer är inte något vanligt alternativ för webbfoton, vilket tas upp ovan. De kan dock hantera mycket detaljrika, högkvalitativa digitala foton för tryck, redigering och andra syften. Det är ett vanligt filformat i Adobe Photoshop.

SVG-filer använder å andra sidan inte pixlar – så de får jobba hårt för att visa foton i hög kvalitet.

Webbanvändning.

Både PNG och SVG kan visa intrikata detaljnivåer av webbgrafik, illustrationer, logotyper, infografik och tabeller.

SVG har dock en viktig fördel tack vare XML-språket. Det innebär att alla SVG-filer som visas är skrivna i text snarare än kod. Därför kan skärmläsare och sökmotorer analysera dem – de är alltså bra med tanke på tillgänglighet och för SEO-syften.

SVG-filer är också vanligen mindre, vilket gör att de laddas snabbare på en webbsida. Sidladdningstider är ett annat viktigt element för sökmotorrankningen.

PNG har också stöd för en del textbaserad grafik – men inte i samma utsträckning.

Kompatibilitet och komplexitet.

SVG-filer betraktas som en mer avancerad filtyp än PNG, men de är inte kompatibla med alla webbläsare och operativsystem. Programmeringsspråket och den vektorbaserade kompositionen kan dessutom kännas obekant och obekväm för nya användare.

PNG-filer är å andra sidan ett vanligt onlineformat med brett stöd hos webbläsare och operativsystem.

Animeringar.

PNG-filer har inte stöd för animeringar – till skillnad från en liknande rasterbaserad bildfil: GIF.

SVG-filer har stöd för animeringar, men inte lika bra som andra filtyper som det inbyggda AI-formatet i Adobe Illustrator.

Läs mer om AI-filer

Transparens.

PNG och SVG har stöd för genomskinlighet – de är båda utmärkta alternativ för logotyper och grafik online.

Det är värt att notera att PNG är ett av de bästa alternativen för rasterbaserade genomskinliga filer. Om du arbetar med pixlar och genomskinlighet är PNG ett bättre val än SVG.

1. Öppna Adobe Illustrator.
2. Klicka på Arkiv > Öppna och välj den bild du vill konvertera.
3. Klicka på Öppna.
4. Klicka på Bildkalkering på den övre menyn och välj Bildkalkering.
5. Gör inställningarna för din konvertering – det kan innefatta att ändra färger.
6. Efter att processen är slutförd markerar du kalkeringsbilden och klickar på Dela upp. Då separeras färgformerna.
7. Klicka på Arkiv > Exportera.
8. Spara filen som SVG.

1. Öppna Adobe Photoshop.
2. Klicka på Arkiv > Öppna.
3. Välj den SVG-fil du vill konvertera.
4. Klicka på Exportera > Exportera som > PNG.
5. Spara filen som PNG.