# SVG eller PNG: vektor eller pixlar för logotyper och grafik [Canonical HTML page](https://gradiently.design/sv/guide/svg-vs-png) En SVG är en samling ritinstruktioner. En PNG är ett fast rutnät av punkter. Den enda skillnaden avgör vilken fil som hör hemma på din webbplats, på dina förpackningar och på din Instagram. ## The short version - SVG är ett vektorformat som beskriver former med matematik, så det förblir helt skarpt i alla storlekar. - PNG är ett rasterformat som består av ett fast rutnät av pixlar, så det blir suddigt eller blockigt när det förstoras över sin egen storlek. - Använd SVG för logotyper, ikoner, enkla illustrationer och gränssnittsgrafik på webbplatser och i tryck. - Använd PNG för fotografier, texturer, komplex bildkonst och allt som laddas upp till sociala plattformar, som inte tar emot SVG. - Ett bra logotypkit innehåller båda: en SVG-original och PNG-exporter i de storlekar som varje ställe behöver. **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. ```html ``` En komplett logotyp på några hundra byte. `viewBox` anger ritningens koordinatsystem, och vilken storlek den visas i bestämmer sidan. 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](https://developer.mozilla.org/en-US/docs/Web/SVG) går igenom formatet i sin helhet. ## SVG och PNG sida vid sida | Egenskap | SVG | PNG | | --- | --- | --- | | Typ | Vektor: former och banor | Raster: ett rutnät av pixlar | | Skalning | Skarp i alla storlekar | Skarp i sin egen storlek, mjuk när den förstoras | | Transparens | Ja | Ja, full alfakanal | | Foton och textur | Dåligt: filerna blir enorma eller omöjliga | Utmärkt | | Redigerbar med kod | Ja: färger, animation, CSS | Nej | | Uppladdning till sociala medier | Accepteras inte | Accepteras överallt | | Typisk storlek, enkel logotyp | 1 till 10 KB | 10 till 100 KB per storlek | ## 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. | Var logotypen ska ligga | Fil | Storlek | | --- | --- | --- | | Webbplatsens sidhuvud och sidfot | SVG | Skalas för att passa | | Favicon | SVG plus PNG som reserv | ICO i 32×32, PNG i 180×180, 192×192 och 512×512 | | Profilbild på Instagram, LinkedIn eller X | PNG | 1080×1080 kvadrat, håll märket inom den mittersta cirkeln | | Mejlsignatur | PNG | Upp till 600×200, exporterad i dubbla visningsstorleken | | Tryckeri, skyltmakare, profilprodukter | SVG eller PDF | Vektor, valfri storlek | En SVG-original och en handfull PNG-exporter. [Logotypstorlekar](https://gradiently.design/sv/guide/logo-sizes) och [logotypvarianter](https://gradiently.design/sv/guide/logo-variations) går längre. En kvadratisk profilbild med en enkel ordbild centrerad på en gradientbakgrund Profilbilder är alltid PNG eller JPG. Exportera logotypen stort, 1080×1080, så att den förblir skarp på skärmar med hög täthet. ## 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. En kvadratisk grafik märkt Vektor, som föreställer platta former som passar för SVG Platta former, rena kanter, några få färger: perfekt SVG-territorium. En kvadratisk grafik märkt Pixlar på en texturerad gradient, som föreställer bildkonst som passar för PNG Korn, mjukt ljus och materialtextur hör hemma i en PNG. ## 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](https://gradiently.design/sv/guide/webp-images) oftast ett bättre val än PNG på dina egna sidor. ### Undvik - En PNG-logotyp som sträcks ut för att fylla en bred sidhuvudsbild - Ett foto som spårats till en enorm SVG - Att ladda upp SVG-filer du inte gjort själv utan att rensa dem - Ikoner som PNG som kräver kopior i 1x, 2x och 3x ### Gör så här - SVG-logotyp med bredden satt i CSS - Foton som WebP eller JPG i den storlek de visas - Behandla SVG som användare laddar upp som kod, eftersom den kan innehålla skript - SVG-ikoner med `fill: currentColor` > **SVG kan innehålla kod** Eftersom SVG är uppmärkning kan en fil från en okänd källa innehålla skript. Tillåt bara SVG-uppladdningar på din webbplats om de rensas, eller konvertera dem till PNG vid uppladdning. ## Så konverterar du SVG till PNG 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. **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. **Behåll transparensen** Lämna bakgrunden tom så att PNG-filen får en alfakanal. Se [transparent bakgrund](https://gradiently.design/sv/guide/transparent-background) för hur du kontrollerar den. 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](https://gradiently.design/sv/guide/export-svg-transparent-png) visar hur, och [PNG eller JPG](https://gradiently.design/sv/guide/png-vs-jpeg) avgör det andra vanliga valet. ## FAQ ### Är SVG bättre än PNG för en logotyp? För originalfilen, ja: en SVG-logotyp förblir skarp i alla storlekar och går att färga om. Exportera PNG-kopior för sociala medier och mejl, som inte tar emot SVG. ### Kan jag ladda upp en SVG till Instagram? Nej. Instagram och andra sociala plattformar tar emot PNG, JPG och video. Exportera en PNG i plattformens storlek, till exempel 1080×1080 för ett kvadratiskt inlägg. ### Är SVG mindre än PNG? För enkla former som logotyper och ikoner är en SVG oftast mycket mindre. För foton och texturerade bilder är en PNG eller JPG mindre och mer exakt. ### Stöder SVG transparens? Ja. Allt som inte är ritat i en SVG är transparent, så den ligger rent på vilken bakgrund som helst. ### Kan jag konvertera en PNG-logotyp till SVG? Bara genom att spåra eller rita om den. Automatisk spårning fungerar för kraftiga, platta logotyper, detaljerade eller texturerade logotyper måste ritas om för hand som vektorer.