Vad är en SVG-fil?

SVG står för Scalable Vector Graphics, vilket är ett vektorbaserat bildformat utvecklat av W3C (World Wide Web Consortium). Till skillnad från rasterbilder (som JPEG eller GIF) är SVG-filer uppbyggda av matematiska formler som beskriver linjer, former och färger – inte pixlar.

SVG används främst för grafik på webben, särskilt när det krävs skalbarhet och hög precision.

Tekniska fakta om SVG:

Filändelse: .svg

Format: XML-baserad textfil som beskriver grafiken i kodform (kan redigeras med textredigerare).

Skalbarhet: SVG-grafik kan skalas upp eller ner utan att förlora kvalitet.

Stöd för interaktivitet: SVG kan innehålla skript (JavaScript) och animeringar (via CSS eller SMIL).

Transparens och lager: Stödjer transparens, lager, och filtereffekter.

Kompatibilitet: Stöds av alla moderna webbläsare.

När och hur används SVG?

SVG används främst på webben, i sammanhang där grafiken måste vara lätt, skalbar och skarp i alla upplösningar. Vanliga användningsområden:

Logotyper: Eftersom SVG behåller skärpan oavsett storlek är det perfekt för logotyper och ikoner.

Ikoner och UI-grafik: Webbsidor och appar använder SVG för att visa knappar, symboler och annan grafik som måste anpassas till olika skärmstorlekar.

Diagram och grafik: Eftersom SVG är kodbaserat kan det användas för att generera diagram eller visualiseringar dynamiskt via JavaScript.

Animeringar: Små animationer eller effekter (t.ex. laddningssymboler eller rörelseeffekter) kan göras direkt i SVG.

Fördelar med SVG:

Oändlig skalbarhet – perfekt för retina-skärmar och responsiv design.

Liten filstorlek för enkel grafik, vilket gör laddtider snabbare.

Sök- och indexerbar – eftersom det är textbaserat kan SVG läsas av sökmotorer.

Kan enkelt redigeras direkt i koden eller med vektorprogram (t.ex. Adobe Illustrator, Inkscape eller Figma).

Stöd för CSS och JavaScript för avancerad styling och interaktivitet.

Nackdelar:

Inte lämpligt för foton eller komplexa bilder (använd rasterformat som PNG eller JPEG istället).

Vissa äldre webbläsare har begränsat stöd.

Kan bli komplicerat att arbeta med manuellt om grafiken är stor eller detaljerad.