SVG är ett av de viktigaste bildformaten på den moderna webben, även om många människor aldrig medvetet väljer det. Om du någonsin har laddat ner en logotyp från ett varumärkespaket, lagt till en ikon på en webbplats eller arbetat med ett responsivt designsystem har du förmodligen stött på SVG.
Det här inlägget förklarar vad SVG är, vad som skiljer det från rasterformat som PNG och JPG och när du bör använda det.
Vad är SVG?
SVG står för Scalable Vector Graphics. Det är ett bildformat baserat på XML som beskriver bilder med matematiska instruktioner snarare än pixlar.
När du öppnar en SVG-fil ser du kod — taggar, sökvägar, koordinater och attribut. SVG-renderaren (vanligtvis en webbläsare) läser den koden och ritar bilden i realtid. Det är anledningen till att SVG-filer skalas perfekt till vilken storlek som helst utan pixelering.
En SVG-fil kan innehålla:
- Former (rektanglar, cirklar, ellipser, polygoner)
- Sökvägar och kurvor
- Text och typografi
- Gradienter och mönster
- Animationer och interaktioner
- Inbäddade rasterbilder
Hur SVG skiljer sig från rasterformat
JPG, PNG, WebP och de flesta bildformat är rasterformat. De lagrar bilder som ett rutnät av pixlar, var och en med ett färgvärde.
Problemet med rasterbilder: de är i grunden pixelbaserade. Förstora dem för mycket och du ser pixlar. Deras detaljnivå är låst vid skapelsestillfället.
SVG är ett vektorformat. Istället för pixlar lagrar det matematiska instruktioner för hur bilden ska konstrueras. En SVG-cirkel är inte ett raster med runda pixlar — det är en matematisk definition av en cirkel, renderad på vilken skärm som helst, oavsett upplösning.
Resultatet: SVG-bilder är perfekt skarpa vid vilken visningsstorlek som helst, från ett 16×16 pixel favicon till ett utomhusbillboard.
SVG vs PNG
| Egenskap | SVG | PNG |
|---|---|---|
| Typ | Vektor | Raster |
| Skalbarhet | Perfekt vid vilken storlek | Fast upplösning |
| Transparensstöd | Ja | Ja |
| Bäst för | Logotyper, ikoner, illustrationer | Foton, skärmdumpar, detaljerade rasterbilder |
| Redigerbar | Ja (kod, vektorredaktörer) | Begränsat (pixelbaserat) |
| Webbläsarstöd | Universellt | Universellt |
| Animationsstöd | Ja (CSS/SMIL) | Nej (APNG är begränsat) |
För logotyper och ikoner är SVG det klara valet. Det skalas utan förlust, stöder transparens och kan stiliseras med CSS.
För foton och detaljerade bilder är PNG (eller JPG) mer lämpligt. SVG är inte designat för att representera fotografiskt bildinnehåll.
SVG vs JPG
| Egenskap | SVG | JPG |
|---|---|---|
| Typ | Vektor | Raster |
| Skalbarhet | Perfekt vid vilken storlek | Försämras vid uppförstoring |
| Transparensstöd | Ja | Nej |
| Filstorlek (för enkel grafik) | Liten | Liten |
| Filstorlek (för komplex grafik) | Kan bli stor | Konstant baserat på dimensioner |
| Bäst för | Logotyper, ikoner, illustrationer | Foton, naturliga bilder |
JPG är utformat för fotografier. SVG är utformat för grafik med definierbara former och kurvor. De konkurrerar sällan om samma användningsfall.
Vanliga användningsfall för SVG
Logotyper och varumärkestillgångar
Logotyper behöver visas tydligt i vilken storlek som helst — från webbplatstets sidhuvud till en visitkort till en skylt. SVG garanterar att din logotyp alltid ser skarp ut, oavsett skärmupplösning eller visningsstorlek.
Webbplatser och appar
Ikoner, knappar, navigeringselement och UI-komponenter är vanligtvis SVG i moderna webbplatser. De skalas perfekt på retina-skärmar och kan stiliseras med CSS utan att ytterligare bildfiler behövs.
Infografik och diagram
SVG är idealiskt för datavisualiseringar, kartor, flödesscheman och interaktiva diagram. Bibliotek som D3.js, Chart.js och Highcharts renderar diagram som SVG.
Ikontypsnitt och symboler
Många ikonbibliotek levererar nu SVG-symboler istället för bildtypsnitt, vilket ger bättre tillgänglighet och stilisering.
Animerad grafik
SVG stöder animationer via CSS, JavaScript och SMIL. Det är vanligt för webbanimeringar, laddningsindikatorer och interaktiva illustrationer.
Kan du redigera SVG-filer?
Ja. Eftersom SVG är XML-baserat kan du redigera det på flera sätt:
- **Vektorgrafikredigerare** (Adobe Illustrator, Inkscape, Figma, Sketch) — visuell redigering
- **Textredigerare** — direkt kodredigering
- **CSS** — stil SVG-element på en webbplats
- **JavaScript** — manipulera SVG-element dynamiskt
Detta gör SVG mer flexibelt än rasterformat, som kräver en pixelredigerare för att ändra.
SVG-begränsningar
SVG är inte perfekt för alla situationer:
- **Fotografier och realistiska bilder** — SVG är inte lämpligt för fotografisk bildinnehåll. En naturbild som SVG skulle vara extremt komplex och stor
- **Mycket detaljerad illustration** — Komplex vektorgrafik med tusentals sökvägar kan bli stor och lång att rendera
- **Utskrift med hög upplösning** — för professionellt tryck är PDF, EPS eller AI-format mer standard (även om SVG kan fungera)
- **Webbläsarbaserade SVG-sårbarhet** — SVG kan innehålla JavaScript, vilket innebär att SVG från opålitliga källor är en säkerhetsrisk på webbplatser
Hur man konverterar SVG
Du kan konvertera SVG till PNG eller JPG för situationer som kräver rasterbilder — till exempel sociala medieplattformar som inte stöder SVG, e-postklienter eller tryck.
Tänk på att konvertering av SVG till PNG eller JPG producerar en rasterversion vid en specifik upplösning. Du förlorar skalbarheten och redigeringsmöjligheten.
Du kan också konvertera PNG eller JPG till SVG med autospårning, men resultaten varierar kraftigt beroende på originalbilens komplexitet. Enkla logotyper och former spårar bra; foton gör det inte.
Vanliga frågor
Kan jag använda SVG för foton?
Tekniskt möjligt men inte praktiskt. SVG är inte designat för fotografiskt innehåll och producerar inte bra resultat med komplexa naturliga bilder.
Är SVG kompatibelt med alla webbläsare?
Ja. SVG stöds fullt ut i alla moderna webbläsare.
Kan jag konvertera PNG till SVG?
Ja, via autospårning. Enkla bilder med tydliga kanter konverterar väl. Foton och komplexa bilder gör det inte.
Varför är min SVG-fil stor?
Komplexa vektorbilder med många sökvägar och noder kan vara stora. Förenkla sökvägar och ta bort onödiga metadata för att minska filstorleken.
Sammanfattning
SVG är ett vektorbaserat bildformat som lagrar bilder som matematiska instruktioner, inte pixlar. Det skalas perfekt till vilken storlek som helst, stöder transparens och animation och kan redigeras med kod eller vektorverktyg.
Använd SVG för logotyper, ikoner, illustrationer och all grafik som behöver skalas eller stiliseras i olika storlekar.
Använd JPG och PNG för fotografier, skärmdumpar och allt som är pixelbaserat till sin natur.