SVG eller PNG: vektorer eller piksler til logo og grafikk

SVG eller PNG handler egentlig om vektorer eller piksler. En SVG-fil lagrer former som instruksjoner: tegn en sirkel her, fyll den med denne fargen. En nettleser eller skriver tegner den derfor skarpt på nytt i alle størrelser, fra et nettstedsikon på 16 piksler til et butikkskilt. En PNG lagrer et fast rutenett av fargede piksler, så den ser perfekt ut i sin egen størrelse og uskarp ut når du forstørrer den. Bruk SVG til logoer, ikoner og enkel grafikk på nett og i trykk. Bruk PNG til bilder, grafikk med tekstur og alt du laster opp til sosiale medier.

Hva en SVG-fil faktisk er

SVG står for Scalable Vector Graphics, og er ren tekst. Åpner du en i en kodeeditor, ser du lesbar oppmerking. Derfor er SVG-filer små for enkle former, derfor kan du endre fargen med CSS, og derfor kan søkemotorer og skjermlesere lese 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 av samme symbol trenger en egen fil for hver størrelse du vil ha skarp, og ingen av dem kan få ny farge uten å eksporteres på nytt. MDNs SVG-dokumentasjon dekker formatet i sin helhet.

SVG og PNG side om side

SVG eller PNG til en logo

Behold logoens original som SVG. Det er den eneste filen som dekker alle fremtidige bruksområder: en nettstedtopp, et banner på 4 meter, broderi, brevpapir eller et nettstedsikon. Eksporter deretter PNG-filer til stedene som ikke tar imot vektorer, først og fremst sosiale plattformer, e-postsignaturer og enkelte presentasjonsverktøy.

Når PNG er det riktige valget

Vektorer fungerer bare når bildet kan beskrives som former. Så snart et bilde har fotografiske detaljer, mykt lys, korn eller tusenvis av små fargeendringer, er en PNG mindre og mer tro mot originalen. Å vektorisere et fotografi til SVG gir en fil som både er tyngre og dårligere.

• Fotografier og fotokollasjer.
• Grafikk med tekstur: korn, papir, penselstrøk, filmeffekter.
• Innlegg, stories og karuseller i sosiale medier, siden plattformene bare godtar piksler.
• Skjermbilder og alt som er fanget fra en skjerm.
• Rike bakgrunner med lys og støy i flere lag.

SVG eller PNG på et nettsted

På et nettsted bruker du innebygd SVG eller en SVG-fil til logoer, ikoner og illustrasjoner, og moderne formater til fotografier. SVG-ikoner skaleres med teksten, kan bruke currentColor slik at de følger temaet ditt, og trenger ingen egne filer for skjermer med høy pikseltetthet. For rasterbilder er WebP vanligvis et bedre valg enn PNG på dine egne sider.

Slik konverterer du SVG til PNG

1. 1

   Bestem den største størrelsen du trenger

   Et profilbilde på 1080×1080 eller en e-postsignatur på 1200×400, dobbelt av visningsstørrelsen på 600×200. Eksporter én gang i den størrelsen fremfor å forstørre senere.

2. 2

   Eksporter fra originalen

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

3. 3

   Behold gjennomsiktigheten

   La bakgrunnen være tom slik at PNG-filen får en alfakanal. Se gjennomsiktig bakgrunn for hvordan du sjekker den.

4. 4

   Sjekk ved 100 %

   Se på tynne streker og liten tekst i faktisk størrelse. Hvis de brytes opp, forenkler du logoen for små bruksområder fremfor å levere en utydelig fil.

Den motsatte veien, fra PNG til SVG, er en omtegning. Automatisk vektorisering fungerer for en tydelig, flat logo og mislykkes med alt som har tekstur eller myke kanter. Hvis logoen bare finnes som PNG, får du den tegnet om én gang til vektor. Alle senere filer blir bedre av det.

Pro-eksportene i Gradiently dekker begge deler: samme design kan eksporteres som SVG til nett og trykk, eller som gjennomsiktig PNG til plattformer. Eksporter SVG og gjennomsiktig PNG viser hvordan, og PNG eller JPG avklarer det andre vanlige valget.