PNG jämfört med SVG.

Om du arbetar med högkvalitativa digitala logotyper och grafik kanske du väljer mellan att spara filerna som PNG eller SVG. Båda formaten är mångsidiga och ger hög upplösning också i stor skala. Läs om de största skillnaderna mellan PNG och SVG, liksom hur du bör använda respektive filtyp.

PNG jämfört med SVG marquee image

Ur innehållet.

 

  • Vad är en PNG-fil?
  • Vad är en SVG-fil?
  • Vad är skillnaden mellan PNG- och SVG-filer?
  • PNG jämfört med SVG: vanliga frågor

 

 

Vad är en PNG-fil?

PNG (Portable Network Graphics) är rasterbaserade filer. De ger hög upplösning, lossless-komprimering, hanterar genomskinlighet och upp till 16 miljoner färger. Det gör dem till ett utmärkt val för grafik, logotyper, diagram och illustrationer – liksom mycket detaljrika foton. På grund av de stora filer som PNG ofta ger är de inte idealiska för onlinefoton.

 

Läs mer om PNG-filer

 

 

Vad är en SVG-fil?

SVG (Scalable Vector Graphics) fungerar bra för logotyper och grafik eftersom det går att skaländra dem för olika syften. De är också populära alternativ inom webbdesign eftersom sökmotorer som Google kan läsa det XML-språk de är programmerade i. Det är till hjälp för SEO- och webbplatsrankningar.

 

Till skillnad från PNG är SVG ett vektorbaserat format. Det innebär att matematiska algoritmer används för att visa bilder, och du kan därför skaländra dessa filer till valfri storlek utan att det påverkar kvaliteten negativt.

 

Läs mer om SVG-filer

 

 

Vad är skillnaden mellan PNG- och SVG-filer?

Det finns många likheter mellan PNG och SVG. Se vad som skiljer dem åt.

 

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.

 

 

PNG jämfört med SVG: vanliga frågor.

Hur konverterar jag en rasterbild till SVG?

Följ dessa enkla steg om du vill konvertera en vanlig rasterbild som en JPEG eller PNG till en vektorbaserad 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.

 

Hur konverterar jag SVG till PNG?

Följ dessa enkla steg för att konvertera SVG-filen till PNG med Adobe Photoshop:

 

  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.

 

Vilket är det bästa vektorformatet för tryck?

Det finns flera utmärkta vektorformat för tryck, valet beror på vilket dokument du har. PDF:er är det mest mångsidiga vektorformatet för vanliga utskrifter. För storskaliga utskriftsjobb kanske du vill använda SVG eller AI.

 

Bör jag använda PNG eller JPEG?

JPEG:s lossy-komprimering och 24-bitars färg ger formatet en särställning för webbfoton. Men JPEG är inte lika detaljrika som PNG när det gäller tryck. JPEG har inte heller samma skalbarhet eller definition – så de är inte det bästa valet för logotyper och grafik.

 

Vad är skillnaden mellan PNG och GIF?

Båda är vanliga rasterformat på webben men PNG är i praktiken nästa generation av GIF. Det finns ändå flera skillnader mellan dem. PNG har till exempel inte stöd för animeringar.

 

Finns det storleksbegränsningar för PNG och SVG?

PNG-filer har en begränsning på 2 500 megapixlar. Det finns ingen begränsning vad gäller storleken på vektorfiler, inklusive SVG.

Jämföra PNG- och SVG-filer med andra filtyper.

EPS jämfört med SVG

EPS jämfört med SVG

Se vad som skiljer det äldre filformatet EPS från SVG.

JPEG jämfört med PNG

JPEG jämfört med PNG

Hitta rätt alternativ bland dessa vanliga rasterbildfiler.

PNG jämfört med TIFF

PNG jämfört med TIFF

Se hur dessa format hanterar högupplösta, storskaliga bilder. 

GIF jämfört med PNG

GIF jämfört med PNG

Läs om varför PNG är nästa generations GIF – och om det passar för ditt nästa projekt.

Skaffa Adobe Illustrator

Skapa vackra vektorbilder och illustrationer.

7 dagar utan kostnad, sedan 240,00 SEK/mån.