SVG: vad det är, nyckelbegrepp och användning inom webbutveckling

Vad är SVG?

SVG — ett vektorgrafikformat baserat på XML, som dök upp år 2001 som en W3C-rekommendation. Till skillnad från rasterformat beskriver SVG bilden genom geometriska primitiver: punkter, linjer, kurvor och polygoner. En SVG-fil är ett vanligt text-XML-dokument som kan läsas, redigeras och komprimeras med standardverktyg.

Arkitekturen för SVG omfattar flera nyckelkoncept. viewBox definierar ett virtuellt koordinatsystem, oberoende av elementets faktiska storlek. Till exempel skapar viewBox="0 0 100 100" ett kvadratiskt rutnät på 100×100, inom vilket alla koordinater är fasta. När behållarens bredd eller höjd ändras skaleras innehållet proportionellt.

Enligt W3C SVG 2 Specification stöder den moderna versionen av SVG gradienter, masker, filter, text med godtycklig positionering, interaktivitet via JavaScript och animation via CSS och SMIL. SVG är integrerad i DOM som ett fullvärdigt HTML-element, vilket möjliggör programmering av varje grafisk primitiv.

Inom mobilutveckling används SVG också i iOS via UIGraphicsImageRenderer och i Android via VectorDrawable — båda formaten konverterar SVG-liknande beskrivningar till hårdvaruaccelererade rastrar på GPU:n.

Historia och utveckling av SVG-formatet

SVG 1.0 blev en W3C-rekommendation år 2001, SVG 1.1 år 2003, SVG 2.0 har varit under utveckling sedan 2012. Den främsta innovationen i SVG 2 är djupare integration med CSS, stöd för compositing och blending modes, samt möjligheten att använda SVG i HTML utan namespace-prefix.

Trots att SVG 2 ännu inte har uppnått status som Recommendation stöder moderna webbläsare redan större delen av dess funktionalitet. Chrome, Safari, Firefox och Edge har nästan fullt stöd för SVG 1.1 och en betydande del av SVG 2.

Grundläggande SVG-element

SVG tillhandahåller en uppsättning element för att beskriva tvådimensionell grafik. Varje element har attribut som bestämmer dess position, storlek och visuella utseende. Attribut kan anges som XML-attribut eller via CSS-egenskaper.

• <rect> — rektangel med attributen x, y, width, height, rx, ry (avrundning av hörn).
• <circle> — cirkel med attributen cx, cy (centrum) och r (radie).
• <ellipse> — ellips med attributen cx, cy, rx, ry.
• <line> — linjesegment med attributen x1, y1, x2, y2.
• <polyline> — bruten linje med attributet points (koordinatlista).
• <polygon> — sluten polygon med attributet points.
• <path> — godtycklig kontur med attributet d (kommandon: M, L, C, Q, A, Z).
• <text> — textelement med attributen x, y, font-size, font-family.

Elementet path — det mest kraftfulla och flexibla SVG-elementet. Attributet d innehåller en sekvens av kommandon: M (moveTo), L (lineTo), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), Z (close path). Varje kommando har en absolut eller relativ form (versal eller gemen bokstav).

SVG stöder också gruppering av element via <g>. En grupp ärver visuella attribut (fill, stroke, transform) till alla underordnade element. Detta gör det möjligt att applicera en enhetlig stil på en hel uppsättning former och hantera deras position via en enda transform.

SVG vs rastergrafik: jämförelse av format

Den huvudsakliga skillnaden mellan SVG och rasterformat (JPEG, PNG, WebP) — sättet att lagra information. Raster lagrar färgen för varje pixel i ett rutnät med fast storlek. SVG lagrar matematiska kommandon för att reproducera former. Denna skillnad bestämmer alla fördelar och nackdelar med formaten.

Enligt HTTP Archive, 2025 använder 68% av webbplatserna SVG för ikoner, 34% för illustrationer och 22% för logotyper. Den genomsnittliga storleken på en SVG-ikon är 0.5–2 KB, medan en rasterikon av liknande kvalitet är 5–20 KB i PNG-format.

För fotografier och komplexa rasterbilder är SVG inte lämpligt — storleken på XML-beskrivningen kommer att överstiga storleken på en motsvarande JPEG. Rekommenderat användningsområde för SVG: ikoner, logotyper, illustrationer, scheman, diagram, gränssnittselement med adaptiv design.

När ska man välja SVG och när rasterformat

SVG — optimalt val för gränssnittselement som måste vara skarpa på Retina-skärmar och vid valfri webbläsarskalning. Raster — för fotografier, komplexa texturer och bilder med miljontals färger, där en vektorbeskrivning skulle vara onödigt komplex.

Hybridmetod — kombination av SVG för gränssnittselement och WebP/AVIF för fotoinnehåll — ger den bästa balansen mellan kvalitet och sidladdningsprestanda.

Inline SVG och styling via CSS

Inline SVG — är att bädda in SVG-markup direkt i HTML-dokumentet, inte som en separat fil via <img> eller background-image. Fördelen med inline SVG är att SVG-element blir en del av DOM och kan stylas via CSS, hanteras via JavaScript och animeras utan extra serverförfrågningar.

Till skillnad från <img src="icon.svg"> där SVG är isolerad i shadow DOM, ärver inline SVG färger och teckensnitt från det överordnade dokumentet. Detta gör det möjligt att till exempel ändra färg på en ikon vid hovring via CSS-pseudoklassen :hover utan att ladda en separat fil för varje tillstånd.

Enligt CSS-Tricks är inline SVG den rekommenderade metoden för att använda ikoner i moderna webbapplikationer. CSS-egenskaperna fill, stroke, stroke-width tillämpas direkt på SVG-element. För anpassning via CSS är det viktigt att fill och stroke i den ursprungliga SVG inte är inställda som inline-attribut — annars kan CSS inte åsidosätta dem.

• Fördelar: styling via CSS, hantering via JS, inga HTTP-förfrågningar, viewBox-anpassningsbarhet.
• Nackdelar: ökning av HTML-sidans storlek, omöjlighet att cachelagra separat från HTML.
• Alternativ: SVG-sprites — kombinera flera SVG-filer i en fil och använda <use href="#id">.

SVG-sprites löser cachelagringsproblemet: alla ikoner samlas i en fil, webbläsaren laddar den en gång, och enskilda ikoner ansluts via <use> med angivande av id för det önskade elementet inuti spriten.

SVG-animation: CSS och SMIL

CSS SVG-animation — det vanligaste och mest effektiva sättet att animera vektorgrafik i webbläsaren. CSS-egenskaper som transform, opacity och fill tillämpas på SVG-element på samma sätt som på HTML-element. För animation längs en godtycklig bana används CSS-egenskapen offset-path.

SMIL (Synchronized Multimedia Integration Language) — en inbyggd animationsmekanism i SVG, oberoende av CSS. Elementen <animate>, <animateTransform> och <animateMotion> gör det möjligt att animera alla SVG-attribut utan JavaScript och CSS. SMIL-animation är garanterat synkroniserad med webbläsarens bildfrekvens.

Enligt MDN Web Docs stöds SMIL i alla moderna webbläsare, men CSS-animation anses vara mer förutsägbar och effektiv. Huvudscenariot för SMIL — animation av attribut som inte är tillgängliga via CSS, till exempel d (path) för elementet <path>.

JavaScript + requestAnimationFrame ger maximal kontroll över SVG-animation. Webbutvecklare använder biblioteken GSAP och Anime.js för komplexa animationssekvenser med tidslinjer och easing-funktioner som är svåra att implementera med ren CSS.

Kodexempel: skapa SVG-grafik

Första exemplet — en enkel husikon med hjälp av grundläggande SVG-element. Alla former är rect och polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Andra exemplet — rotationsanimation av en loader via CSS. Använder <circle> med attributet stroke-dasharray för att skapa en bruten kontur:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Tredje exemplet — path-animation via biblioteket GSAP för smidig ritning av en kontur. GSAP arbetar med attributet stroke-dashoffset och skapar effekten av att linjen visas:

// Rita bana med GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});