# SVG eller PNG: vektorer eller piksler til logo og grafikk [Canonical HTML page](https://gradiently.design/nb/guide/svg-vs-png) En SVG er et sett tegneinstruksjoner. En PNG er et fast rutenett av punkter. Den forskjellen avgjør hvilken fil som passer på nettstedet, emballasjen og Instagram. ## The short version - SVG er et vektorformat som beskriver former matematisk, og derfor holder seg helt skarpt i alle størrelser. - PNG er et rasterformat bygget av et fast rutenett av piksler. Det blir derfor uskarpt eller pikselert når det forstørres utover sin egen størrelse. - Bruk SVG til logoer, ikoner, enkle illustrasjoner og grensesnittgrafikk på nettsteder og i trykk. - Bruk PNG til fotografier, teksturer, komplekse illustrasjoner og alt som lastes opp til sosiale plattformer, som ikke godtar SVG. - Et godt logosett inneholder begge deler: en SVG-original og PNG-eksporter i størrelsene hvert sted trenger. **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. ```html ``` Et komplett logosymbol på noen hundre byte. `viewBox` angir tegningens koordinatsystem. Siden bestemmer hvilken størrelse det vises i. 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](https://developer.mozilla.org/en-US/docs/Web/SVG) dekker formatet i sin helhet. ## SVG og PNG side om side | Egenskap | SVG | PNG | | --- | --- | --- | | Type | Vektor: former og baner | Raster: et rutenett av piksler | | Skalering | Skarp i alle størrelser | Skarp i egen størrelse, uskarp ved forstørring | | Gjennomsiktighet | Ja | Ja, full alfakanal | | Bilder og tekstur | Dårlig: filene blir enorme eller umulige | Utmerket | | Kan redigeres med kode | Ja: farger, animasjon, CSS | Nei | | Opplasting til sosiale medier | Godtas ikke | Godtas overalt | | Typisk størrelse, enkel logo | 1 til 10 KB | 10 til 100 KB per størrelse | ## 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. | Hvor logoen skal brukes | Fil | Størrelse | | --- | --- | --- | | Nettstedets topp og bunn | SVG | Skaleres etter plassen | | Nettstedsikon | SVG med PNG-reservefiler | ICO på 32×32, PNG-filer på 180×180, 192×192 og 512×512 | | Profilbilde på Instagram, LinkedIn eller X | PNG | Kvadrat på 1080×1080, hold symbolet innenfor sirkelen i midten | | E-postsignatur | PNG | Opptil 600×200, eksportert i dobbelt visningsstørrelse | | Trykkeri, skiltmaker, profilprodukter | SVG eller PDF | Vektor, valgfri størrelse | Én SVG-original, en håndfull PNG-eksporter. [Logostørrelser](https://gradiently.design/nb/guide/logo-sizes) og [logovarianter](https://gradiently.design/nb/guide/logo-variations) går videre. Et kvadratisk profilbilde med en enkel navnelogo midtstilt på en gradientbakgrunn Profilbilder er alltid PNG eller JPG. Eksporter logoen stor, 1080×1080, slik at den holder seg skarp på skjermer med høy pikseltetthet. ## 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. En kvadratisk grafikk merket Vektor, som representerer flate former egnet for SVG Flate former, rene kanter og få farger: ideelt for SVG. En kvadratisk grafikk merket Piksler på en teksturert gradient, som representerer grafikk egnet for PNG Korn, mykt lys og materialtekstur hører hjemme i en PNG. ## 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](https://gradiently.design/nb/guide/webp-images) vanligvis et bedre valg enn PNG på dine egne sider. ### Unngå - En PNG-logo strukket ut over en bred nettstedtopp - Et fotografi vektorisert til en enorm SVG - Å laste opp SVG-filer du ikke har laget, uten å rense dem - Ikoner som PNG med nødvendige kopier i 1x, 2x og 3x ### Gjør dette - SVG-logo med bredde angitt i CSS - Fotografier som WebP eller JPG i størrelsen de vises i - Behandle brukeropplastet SVG som kode, fordi den kan inneholde skript - SVG-ikoner med `fill: currentColor` > **SVG kan inneholde kode** Fordi SVG er oppmerking, kan en fil fra en ukjent kilde inneholde skript. Tillat bare SVG-opplasting på nettstedet hvis filene renses, eller konverter dem til PNG ved opplasting. ## Slik konverterer du SVG til PNG 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. **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. **Behold gjennomsiktigheten** La bakgrunnen være tom slik at PNG-filen får en alfakanal. Se [gjennomsiktig bakgrunn](https://gradiently.design/nb/guide/transparent-background) for hvordan du sjekker den. 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](https://gradiently.design/nb/guide/export-svg-transparent-png) viser hvordan, og [PNG eller JPG](https://gradiently.design/nb/guide/png-vs-jpeg) avklarer det andre vanlige valget. ## FAQ ### Er SVG bedre enn PNG til en logo? For originalfilen, ja. En SVG-logo holder seg skarp i alle størrelser og kan få ny farge. Eksporter PNG-kopier til sosiale medier og e-post, som ikke godtar SVG. ### Kan jeg laste opp en SVG til Instagram? Nei. Instagram og andre sosiale plattformer godtar PNG, JPG og video. Eksporter en PNG i plattformens størrelse, for eksempel 1080×1080 til et kvadratisk innlegg. ### Er SVG mindre enn PNG? For enkle former som logoer og ikoner er en SVG vanligvis mye mindre. For fotografier og teksturerte bilder er en PNG eller JPG mindre og mer nøyaktig. ### Støtter SVG gjennomsiktighet? Ja. Alt som ikke er tegnet i en SVG, er gjennomsiktig, så den passer rent på enhver bakgrunn. ### Kan jeg konvertere en PNG-logo til SVG? Bare ved å vektorisere eller tegne den om. Automatisk vektorisering fungerer for tydelige, flate logoer. Detaljerte logoer eller logoer med tekstur må tegnes om for hånd som vektorer.