SVG vs PNG: vektor eller pixels til logoer og grafik

SVG vs PNG handler i virkeligheden om vektor mod pixels. En SVG-fil gemmer former som instruktioner (tegn en cirkel her, fyld den med denne farve), så en browser eller printer tegner den skarpt i enhver størrelse, fra et favicon på 16 pixels til et butiksskilt. En PNG gemmer et fast gitter af farvede pixels, så den ser perfekt ud i sin egen størrelse og uskarp ud, når du forstørrer den. Brug SVG til logoer, ikoner og enkel grafik på nettet og i tryk. Brug PNG til fotos, teksturerede værker og alt, du uploader til sociale medier.

Hvad en SVG-fil egentlig er

SVG står for Scalable Vector Graphics, og det er ren tekst. Åbn en i en kodeeditor, og du ser læsbar markup, ikke støj. Derfor er SVG’er små ved enkle former, derfor kan du ændre deres farve med CSS, og derfor kan søgemaskiner og skærmlæsere læse teksten 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 af det samme mærke kræver en separat fil for hver størrelse, du vil have den skarp i, og ingen af dem kan farves om uden at eksportere igen. MDN’s SVG-dokumentation dækker formatet fuldt ud.

SVG og PNG side om side

SVG eller PNG til et logo

Behold masterlogoet som SVG. Det er den eneste fil, der dækker al fremtidig brug: en header på hjemmesiden, et banner på 4 meter, broderi, brevpapir, et favicon. Eksportér derefter PNG’er fra den til de steder, der ikke kan tage vektorer, mest sociale platforme, e-mailsignaturer og visse præsentationsværktøjer.

Hvornår PNG er det rigtige valg

Vektor virker kun, når billedet kan beskrives som former. Så snart et billede har fotografiske detaljer, blødt lys, korn eller tusindvis af fine farveskift, er en PNG mindre og mere tro mod originalen. At vektorisere et foto til en SVG giver en fil, der både er tungere og dårligere.

• Fotos og fotocollager.
• Teksturerede værker: korn, papir, penselstrøg, filmeffekter.
• Opslag, stories og karruseller på sociale medier, fordi platformene kun accepterer pixels.
• Skærmbilleder og alt, der er optaget fra en skærm.
• Fyldige baggrunde med lag af lys og støj.

SVG vs PNG til en hjemmeside

På et site bruger du inline SVG eller en SVG-fil til logoer, ikoner og illustrationer og moderne formater til fotos. SVG-ikoner skalerer med teksten, kan bruge currentColor, så de følger dit tema, og kræver ingen separate filer til skærme med høj tæthed. Til rasterbilleder er WebP som regel et bedre valg end PNG på dine egne sider.

Sådan konverterer du SVG til PNG

1. 1

   Beslut den største størrelse, du har brug for

   Et profilbillede i 1080×1080 eller en e-mailsignatur i 1200×400 (det dobbelte af visningsstørrelsen på 600×200). Eksportér én gang i den størrelse i stedet for at forstørre senere.

2. 2

   Eksportér fra kilden

   I Figma, Illustrator eller Inkscape eksporterer du rammen som PNG i den valgte størrelse. Eksport fra vektoren holder alle kanter skarpe.

3. 3

   Behold gennemsigtigheden

   Lad baggrunden være tom, så PNG’en får en alfakanal. Se gennemsigtig baggrund for at tjekke det.

4. 4

   Tjek ved 100 %

   Se på tynde streger og lille tekst i faktisk størrelse. Hvis de falder fra hinanden, så forenkl logoet til små anvendelser i stedet for at levere en mudret fil.

Den anden vej, fra PNG til SVG, er ikke en konvertering, men en gentegning. Automatisk vektorisering virker til et kraftigt, fladt logo og fejler for alt med tekstur eller bløde kanter. Findes dit logo kun som PNG, så få det tegnet om én gang som vektor; alle senere filer bliver bedre af det.

Pro-eksporter fra Gradiently dækker begge sider: et design kan sendes ud som SVG til nettet og tryk eller som gennemsigtig PNG til platforme, fra den samme fil. Eksportér SVG og gennemsigtig PNG viser hvordan, og PNG vs JPG afgør det andet almindelige valg.