# SVG vs PNG: vektor eller pixels til logoer og grafik [Canonical HTML page](https://gradiently.design/da/guide/svg-vs-png) En SVG er et sæt tegneinstruktioner. En PNG er et fast gitter af prikker. Den ene forskel afgør, hvilken fil der hører hjemme på din hjemmeside, din emballage og din Instagram. ## The short version - SVG er et vektorformat, der beskriver former med matematik, så det forbliver helt skarpt i alle størrelser. - PNG er et rasterformat bygget af et fast gitter af pixels, så det bliver uskarpt eller kantet, når det forstørres ud over sin størrelse. - Brug SVG til logoer, ikoner, enkle illustrationer og grafik til brugerflader på hjemmesider og i tryk. - Brug PNG til fotos, teksturer, komplekse værker og alt, der uploades til sociale platforme, som ikke accepterer SVG. - Et godt logosæt indeholder begge dele: en SVG-master og PNG-eksporter i de størrelser, hvert sted kræver. **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. ```html ``` Et komplet logomærke på få hundrede bytes. `viewBox` fastlægger tegningens koordinatsystem; den viste størrelse bestemmer siden. 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](https://developer.mozilla.org/en-US/docs/Web/SVG) dækker formatet fuldt ud. ## SVG og PNG side om side | Egenskab | SVG | PNG | | --- | --- | --- | | Type | Vektor: former og stier | Raster: et gitter af pixels | | Skalering | Skarp i alle størrelser | Skarp i sin egen størrelse, uskarp når den forstørres | | Gennemsigtighed | Ja | Ja, fuld alfakanal | | Fotos og tekstur | Dårlig: filerne bliver enorme eller umulige | Fremragende | | Kan redigeres med kode | Ja: farver, animation, CSS | Nej | | Upload til sociale medier | Accepteres ikke | Accepteres overalt | | Typisk størrelse, enkelt logo | 1 til 10 KB | 10 til 100 KB per størrelse | ## 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. | Hvor logoet skal bruges | Fil | Størrelse | | --- | --- | --- | | Header og footer på hjemmesiden | SVG | Skalerer, så det passer | | Favicon | SVG plus PNG som reserve | ICO i 32×32, PNG’er i 180×180, 192×192 og 512×512 | | Profilbillede på Instagram, LinkedIn eller X | PNG | 1080×1080 kvadrat, hold mærket inden for den midterste cirkel | | E-mailsignatur | PNG | Op til 600×200, eksporteret i dobbelt visningsstørrelse | | Trykkeri, skiltemager, merchandise | SVG eller PDF | Vektor, enhver størrelse | Én SVG-master, en håndfuld PNG-eksporter. [Logostørrelser](https://gradiently.design/da/guide/logo-sizes) og [logovarianter](https://gradiently.design/da/guide/logo-variations) går videre. Et kvadratisk profilbillede med et enkelt ordmærke centreret på en gradientbaggrund Profilbilleder er altid PNG eller JPG. Eksportér logoet stort, 1080×1080, så det forbliver skarpt på skærme med høj tæthed. ## 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. En kvadratisk grafik med teksten Vektor, der repræsenterer flade former egnet til SVG Flade former, rene kanter, få farver: ideelt SVG-terræn. En kvadratisk grafik med teksten Pixels på en tekstureret gradient, der repræsenterer værker egnet til PNG Korn, blødt lys og materialetekstur hører hjemme i en PNG. ## 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](https://gradiently.design/da/guide/webp-images) som regel et bedre valg end PNG på dine egne sider. ### Undgå - Et PNG-logo strakt ud til at fylde en bred header - Et foto vektoriseret til en enorm SVG - At uploade SVG-filer, du ikke selv har lavet, uden at rense dem - Ikoner som PNG’er, der kræver 1x-, 2x- og 3x-kopier ### Gør - SVG-logo med en bredde sat i CSS - Fotos som WebP eller JPG i den størrelse, de vises i - Behandl SVG uploadet af brugere som kode, fordi den kan indeholde scripts - SVG-ikoner med `fill: currentColor` > **SVG kan bære kode** Fordi SVG er markup, kan en fil fra en ukendt kilde indeholde scripts. Tillad kun SVG-uploads på dit site, hvis de renses, eller konvertér dem til PNG ved upload. ## Sådan konverterer du SVG til PNG 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. **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. **Behold gennemsigtigheden** Lad baggrunden være tom, så PNG’en får en alfakanal. Se [gennemsigtig baggrund](https://gradiently.design/da/guide/transparent-background) for at tjekke det. 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](https://gradiently.design/da/guide/export-svg-transparent-png) viser hvordan, og [PNG vs JPG](https://gradiently.design/da/guide/png-vs-jpeg) afgør det andet almindelige valg. ## FAQ ### Er SVG bedre end PNG til et logo? Til masterfilen, ja: et SVG-logo forbliver skarpt i alle størrelser og kan farves om. Eksportér PNG-kopier til sociale medier og e-mail, som ikke accepterer SVG. ### Kan jeg uploade en SVG til Instagram? Nej. Instagram og andre sociale platforme accepterer PNG, JPG og video. Eksportér en PNG i platformens størrelse, for eksempel 1080×1080 til et kvadratisk opslag. ### Er SVG mindre end PNG? Til enkle former som logoer og ikoner er en SVG som regel meget mindre. Til fotos og teksturerede billeder er en PNG eller JPG mindre og mere præcis. ### Understøtter SVG gennemsigtighed? Ja. Alt, der ikke er tegnet i en SVG, er gennemsigtigt, så den står rent på enhver baggrund. ### Kan jeg konvertere et PNG-logo til SVG? Kun ved at vektorisere eller tegne det om. Automatisk vektorisering virker til kraftige, flade logoer; detaljerede eller teksturerede logoer skal tegnes om i hånden som vektorer.