SVG – Skalbar vektorgrafik (XML-format för webben)

Upptäck SVG — skalbar XML-baserad vektorgrafik för webben. Lär dig användning, fördelar, redigering och bästa praxis för krispiga, responsiva bilder.

Scalable Vector Graphics (SVG) är en typ av tvådimensionell bild som arbetar med vektorer i stället för pixlar. Det innebär att de enkelt kan göras större eller mindre utan att förlora kvalitet eller bli suddiga. SVG bygger på XML och har skapats av World Wide Web Consortium (W3C).

Vad är SVG?

SVG är ett textbaserat grafikspråk (XML) för att beskriva tvådimensionella vektorgrafiker — linjer, former, text och rasterbilder kan kombineras. Eftersom SVG beskriver grafik som matematiska koordinater och former kan samma fil skalas upp eller ner utan kvalitetsförlust. Filändelsen är .svg och korrekt MIME-typ är image/svg+xml.

Grundläggande egenskaper

• Skalbarhet: bibehåller skärpa oavsett storlek.
• Textbart: text i SVG är sökbar och indexerbar av sökmotorer.
• Styling: kan stylas med CSS och manipuleras med JavaScript.
• Interaktivitet: stöd för eventhantering och animationer.
• XML-baserat: kan genereras och transformeras programmässigt.

Grundläggande struktur och attribut

Ett enkelt SVG-dokument börjar ofta med en rot-tagg som deklarerar namespace och vy:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">   <circle cx="50" cy="50" r="40" fill="red"/> </svg>

Viktiga attribut som används ofta:

• viewBox — definierar koordinatsystem och skala (minX minY width height).
• width och height — bestämmer visningsstorlek i layouten.
• preserveAspectRatio — hur bilden ska skalas och placeras inom sin vy.
• transform — rotera, skala eller translatera objekt.

Hur man använder SVG i webben

• Inline (i HTML): <svg>-elementet direkt i HTML — ger full åtkomst för CSS och JavaScript.
• <img src="...">: enkel användning, bra caching, men begränsad åtkomst till inre element från DOM.
• <object> eller <iframe>: möjliggör separat dokument och fallback-innehåll.
• Bakgrundsbild i CSS: användbar för dekorativa element.

Stil, animation och interaktivitet

SVG kan stylas med extern eller inline CSS, samt animeras på flera sätt:

• CSS-animationer: ändra färger, transform och andra egenskaper.
• SMIL: inbyggda SVG-animationer (stöd varierar, men fungerar i många moderna webbläsare).
• JavaScript: manipulera element via DOM, skapa interaktiva diagram och dynamiska animationer.

Tillgänglighet

För att göra SVG tillgängligt för skärmläsare och användare:

• Använd inre <title> och <desc>-element för att beskriva grafiken.
• Använd ARIA-attribut (t.ex. role="img" och aria-labelledby) när det behövs.
• Se över kontrast och fokuserbarhet för interaktiva element.

För- och nackdelar

• Fördelar: perfekt för ikoner, logotyper, diagram och UI-element; små filstorlekar för enkla former; skalbart och skarpt i alla upplösningar; stilbart och scriptbart.
• Nackdelar: olämpligt för komplexa fotografiska bilder (bitmap är bättre); kan bli tungt om mycket detalj och många noders DOM; inbäddad JavaScript kan utgöra säkerhetsrisk vid osäkrade användaruppladdningar.

Optimering och säkerhet

• Använd verktyg som SVGO för att ta bort onödig metadata och optimera paths.
• Minimera antal noder och undvik redundanta grupperingar.
• Sanitera användaruppladdade SVG-filer — ta bort script, externa referenser och onödiga XML-namespace om filen ska visas inline.
• Kombinera och spritea ikoner när det är lämpligt för att minska HTTP-förfrågningar.

Verktyg och arbetsflöde

Vanliga verktyg för att skapa och redigera SVG:

• Inkscape (fri och öppen källkod)
• Adobe Illustrator
• Figma, Sketch
• Online-redigerare och verktyg för optimering (t.ex. SVGO, svgomg)

Sammanfattning

SVG är ett flexibelt och kraftfullt format för vektorgrafik på webben. Använd det för ikoner, diagram, illustrationer och interaktiv grafik där skalbarhet, skärpa och möjligheten att styla/animera är viktiga. Tänk på prestanda och säkerhet — optimera filer och sanera externa SVG:er innan inbäddning i dokumentet.

Sök med bokstav