SVG eller PNG: vektor eller pixlar för logotyper och grafik

SVG eller PNG handlar egentligen om vektor mot pixlar. En SVG-fil lagrar former som instruktioner (rita en cirkel här, fyll den med den här färgen), så en webbläsare eller skrivare ritar upp den skarpt i vilken storlek som helst, från en favicon på 16 pixlar till en butiksskylt. En PNG lagrar ett fast rutnät av färgade pixlar, så den ser perfekt ut i sin egen storlek och mjuk när du förstorar den. Använd SVG för logotyper, ikoner och enkel grafik på webben och i tryck. Använd PNG för foton, texturerad bildkonst och allt du laddar upp till sociala medier.

Vad en SVG-fil egentligen är

SVG står för Scalable Vector Graphics och är vanlig text. Öppna en i en kodredigerare så ser du läsbar uppmärkning, inte brus. Därför är SVG-filer pyttesmå för enkla former, därför kan du ändra deras färg med CSS och därför kan sökmotorer och skärmläsare läsa texten i dem.

<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>

En PNG av samma logotyp behöver en separat fil för varje storlek där den ska vara skarp, och ingen av dem går att färga om utan att exporteras på nytt. MDN:s SVG-dokumentation går igenom formatet i sin helhet.

SVG och PNG sida vid sida

SVG eller PNG för en logotyp

Behåll originallogotypen som SVG. Det är den enda filen som räcker för varje framtida användning: ett webbplatshuvud, en banderoll på 4 meter, broderi, ett brevhuvud, en favicon. Exportera sedan PNG-filer från den till de ställen som inte kan ta emot vektorer, främst sociala plattformar, mejlsignaturer och vissa presentationsverktyg.

När PNG är rätt val

Vektor fungerar bara när bilden kan beskrivas som former. Så fort en bild har fotografiska detaljer, mjukt ljus, korn eller tusentals subtila färgförändringar är en PNG mindre och mer trogen. Att spåra ett foto till en SVG ger en fil som är både tyngre och sämre.

• Fotografier och fotokollage.
• Texturerad bildkonst: korn, papper, penseldrag, filmeffekter.
• Inlägg, stories och karuseller i sociala medier, eftersom plattformarna bara tar emot pixlar.
• Skärmbilder och allt som fångats från en skärm.
• Rika bakgrunder med lager av ljus och brus.

SVG eller PNG för en webbplats

På en webbplats använder du inbäddad SVG eller en SVG-fil för logotyper, ikoner och illustrationer, och moderna format för foton. SVG-ikoner skalas med texten, kan ta currentColor så att de följer ditt tema och behöver inga separata filer för skärmar med hög täthet. För rasterbilder är WebP oftast ett bättre val än PNG på dina egna sidor.

Så konverterar du SVG till PNG

1. 1

   Bestäm den största storleken du behöver

   En profilbild i 1080×1080 eller en mejlsignatur i 1200×400 (dubbelt så stor som visningsstorleken 600×200). Exportera en gång i den storleken i stället för att förstora senare.

2. 2

   Exportera från källan

   I Figma, Illustrator eller Inkscape exporterar du ramen som PNG i den valda storleken. Export från vektorn håller varje kant skarp.

3. 3

   Behåll transparensen

   Lämna bakgrunden tom så att PNG-filen får en alfakanal. Se transparent bakgrund för hur du kontrollerar den.

4. 4

   Kontrollera i 100 %

   Titta på tunna streck och liten text i verklig storlek. Om de går sönder ska du förenkla logotypen för små användningar i stället för att leverera en grumlig fil.

Att gå åt andra hållet, från PNG till SVG, är inte en konvertering utan en omritning. Automatisk spårning fungerar för en kraftig, platt logotyp och misslyckas för allt med textur eller mjuka kanter. Om din logotyp bara finns som PNG bör du låta rita om den en gång som vektor, eftersom varje senare fil blir bättre av det.

Gradiently Pros exporter täcker båda sidor av detta: en design kan gå ut som SVG för webben och tryck, eller som transparent PNG för plattformar, från samma fil. Exportera SVG och transparent PNG visar hur, och PNG eller JPG avgör det andra vanliga valet.