SVG

Hva det er

SVG, kort for Scalable Vector Graphics, er et språk som beskriver todimensjonal grafikk som former og ikke som et rutenett av piksler. Filen sier hva som skal tegnes: en sirkel her, en linje fra ett punkt til et annet, et omriss fylt med blått. Nettleseren regner selv ut pikslene i den størrelsen tegningen vises i, og det er derfra skaleringen kommer: det finnes ingen piksler i filen som må strekkes.

W3C står bak spesifikasjonen. Den nyeste versjonen, SVG 2, er et Candidate Recommendation Snapshot datert 6. oktober 2026, kan tidligst bli en Recommendation 1. desember 2026 og bygger videre på SVG 1.1 Second Edition. Slik spesifikasjonen selv oppsummerer det, hviler SVG på XML, kan blande vektorformer med rasterbilder og lar seg style, skripte og animere. En tegning kan stå alene, ligge inne i en HTML-side eller være bygget inn i et annet XML-språk.

Ordforrådet er lite. Seks grunnformer, rect, circle, ellipse, line, polyline og polygon, dekker de enkle tilfellene, og en bane (path) tegner alt annet ut fra en kort streng med kommandoer. text plasserer ekte tekst som kan markeres, en gruppe (g) lar flere former dele en stil eller en transformasjon, og en gradient eller et mønster kan male en form i stedet for én enkelt farge. Filtereffekter, som var et kapittel i SVG 1.1, har nå fått sin egen spesifikasjon. Hver tegning har et koordinatsystem med origo øverst til venstre, der x øker mot høyre og y øker nedover.

Spesifikasjonen definerer SVG ut fra en dokumentobjektmodell og ikke ut fra ett bestemt filformat. En tegning kan være en egen fil, servert som image/svg+xml med filendelsen .svg, eller et svg-element skrevet rett inn i en HTML-side. En frittstående fil må deklarere SVG-navnerommet. I HTML legger parseren selv elementene i riktig navnerom, så det trengs ikke noe xmlns-attributt.

SVG er ikke et rasterformat som PNG eller JPEG, som lagrer en farge for hver piksel og blir uskarpe når de forstørres. Et fotografi hører hjemme i et av dem. SVG passer for det som er tegnet: ikoner, logoer, diagrammer, grafer, kart og tegnet skrift. En SVG kan også inneholde et rasterbilde, og det er det spesifikasjonen kaller blandet grafikk.

Hvorfor det er viktig

Én fil holder for alle skjermer. Et ikon som er tegnet én gang, er skarpt på en eldre skjerm, på en telefon med flere enhetspiksler per CSS-piksel og på papir, uten egne eksporter i hver størrelse som noen må holde i takt. Enkel grafikk gir dessuten små filer, fordi den beskriver noen få omriss i stedet for å lagre tusenvis av piksler, og spesifikasjonen registrerer .svgz for en SVG-fil som er komprimert med gzip.

Fordi markupen er tekst, passer den inn i måten et team allerede jobber på. En designers eksport kan leses i en kodegjennomgang og sammenlignes linje for linje i versjonskontrollen, og et skript kan generere en tegning fra data, slik mange grafer blir laget. Når tegningen står rett i siden, er elementene en del av DOM-en: CSS styler dem, et skript kan endre dem, og de følger hover, fokus og leserens fargetema som alt annet på siden.

Den bærer også mening som et punktgrafikkbilde ikke kan bære. Tekst i en SVG forblir tekst, og spesifikasjonen krever at nettleseren lar leseren søke i den og markere den. Et title-element gir en tegning, eller én del av den, et tilgjengelig navn, og SVG 2 gir svg-elementet den implisitte ARIA-rollen graphics-document. En graf tegnet i SVG kan ha navngitte deler som en skjermleser når én etter én. Den samme grafen eksportert som PNG er ett bilde med ett tekstalternativ.

Slik ser det ut i praksis

Her er en liten pil i en ramme med avrundede hjørner, skrevet rett inn i en HTML-side:

<svg viewBox="0 0 120 40" width="240" height="80">
  <title>Neste steg</title>
  <g fill="none" stroke="currentColor" stroke-width="3">
    <rect x="2" y="2" width="116" height="36" rx="8" />
    <path d="M 20 20 H 92 M 80 10 L 100 20 L 80 30" />
  </g>
</svg>

viewBox gir tegningen egne koordinater: fire tall for venstre kant, øvre kant, bredde og høyde på området som skal vises, her 120 enheter bredt og 40 høyt. width og height ber om 240 ganger 80 CSS-piksler, så hver enhet tegnes to piksler bred. Endre de to tallene til 60 og 20, så krymper hele tegningen med, strektykkelsen inkludert, fordi ingenting i den er målt i piksler.

Gruppen setter fargene én gang. Fyll, strek og strektykkelse arves, så både rammen og pilen henter dem fra g. rect tegner rammen, og rx runder av hjørnene. Banen leses som instruksjoner til en penn: M 20 20 flytter pennen til et punkt uten å tegne, H 92 trekker en vannrett linje bort til x-koordinaten 92, den andre M løfter pennen og setter den ned ved den øvre enden av pilspissen, og de to L-kommandoene tegner spissens to streker. Kommandoer med stor bokstav tar absolutte koordinater og kommandoer med liten bokstav relative, så den samme banen kan skrives som m 20 20 h 72 m -12 -10 l 20 10 l -20 10, der hvert steg måles fra der pennen stoppet.

currentColor gjør streken til verdien av CSS-egenskapen color, som et svg-element i siden arver fra HTML-en rundt seg. Legg pilen i en lenke, så tegnes den i lenkefargen. Bytt siden til mørkt tema, så følger den med, uten en ekstra fil. title blir ikke tegnet. Elementet gir tegningen sitt tilgjengelige navn, og SVG 2 påpeker at nettlesere ofte viser det som et verktøytips når pekeren hviler over tegningen.

Den samme tegningen som egen fil trenger navnerommet på rotelementet, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 40">, og en side viser den med <img src="/images/next.svg" alt="Neste steg">. Da er den et eget dokument. CSS-arv går fra forelder til barn, og rotelementet i det dokumentet har ingen forelder, så currentColor inne i filen følger ikke lenger teksten rundt img. Det er nå alt-attributtet som gir tekstalternativet, og SVG 2 forventer at nettleseren viser filen i sikker animert modus, uten skript og uten eksterne filer.

Nettstedets tilgjengelighetserklæring sier at sidene er skrevet i HTML, CSS og SVG, med WAI-ARIA der HTML alene ikke gir noe et navn, og at hver side er komplett uten kjørbar JavaScript. Der er SVG, som i denne artikkelen, ett av språkene en side skrives i, ved siden av markupen og stilarkene.

Hvor det går galt

En strektegning blir til en massiv figur. Startverdien til fill er svart, og startverdien til stroke er ingen strek. En åpen bane som var ment som en linje, for eksempel en pilspiss eller en hake, fylles som om endene var koblet sammen, og uten strek tegnes ikke selve linjene i det hele tatt. Sett fill="none" og en stroke på strektegninger, én gang, på gruppen som holder dem.

Ikonet forsvinner i mørkt tema. Eksporterte ikoner har ofte en fast farge, fill="#1a1a1a", som forblir mørk på mørk bakgrunn. Et slikt attributt er også den svakeste stilen som finnes: SVG 2 gir presentasjonsattributter en spesifisitet på null, så en tilfeldig CSS-regel et helt annet sted overstyrer det uten at noen merker det. Bruk currentColor for ikoner som står i tekst, og sett farger fra CSS i stedet for i markupen.

Tegningen vil ikke skalere, eller den skalerer feil. Uten viewBox er tegningens enheter nettleserens piksler, så en ny bredde bare beskjærer tegningen eller legger luft rundt den, og preserveAspectRatio blir ignorert helt. En negativ bredde eller høyde i viewBox er en feil, og attributtet regnes som manglende. En bredde eller høyde på null slår av gjengivelsen. Gi hver tegning en viewBox, og la width og height, eller CSS, bestemme størrelsen. Standardverdien, xMidYMid meet, beholder proporsjonene og sentrerer tegningen i boksen sin.

Å kunne skaleres er ikke det samme som å være lesbar. Ingenting i en vektortegning hindrer at den vises i 16 piksler, men detaljer som står klart i 200, kan flyte sammen til en flekk der. En porteføljeside om hvordan selskapets visuelle identitet ble bygget beskriver et tannhjul i vektor, tegnet for nettleserfanen ut fra tanken om at en kraftig silhuett holder seg ved 16 piksler. I det arbeidet, som ble gjort i juli 2026, ble tannhjulet og selskapsmerket vist side om side i 16, 32 og 48 piksler på lyse og mørke fanelinjer: merket forble gjenkjennelig, tannhjulet ble utydelig, og faneikonet gikk over til merket. Test en tegning i den minste størrelsen den skal vises i, på begge slags bakgrunn, og tegn en enklere versjon for små størrelser når den ikke holder.

En opplastet SVG er et dokument, ikke et bilde. En SVG-fil kan inneholde skript og henvisninger til andre filer. Registreringen av medietypen sier rett ut at skriptspråk er kjørbart innhold, og advarer om at ondsinnet konstruerte XML-entiteter som utvides om og om igjen, kan legge beslag på store mengder minne. Hvor mye av dette som faktisk kjører, avhenger av hvordan filen vises. SVG 2 forventer at et object-element uten sandkasse kjører filen i dynamisk interaktiv modus, med skript, mens img og bakgrunnsbilder i CSS bruker sikker animert modus, uten skript og uten eksterne referanser. Vis SVG fra fremmede kilder bare gjennom img, server opplastinger fra et eget domene, eller rens dem mot en tillatelsesliste over elementer og attributter før de lagres.

Les mer

• Scalable Vector Graphics (SVG) 2 — W3Cs Candidate Recommendation Snapshot fra 6. oktober 2026, med status, sammendrag og alle kapitlene.
• Coordinate Systems, Transformations and Units — viewBox, preserveAspectRatio og det opprinnelige koordinatsystemet.
• Paths — banekommandoene, absolutte og relative koordinater, og hva som skjer med banedata som inneholder en feil.
• Painting: Filling, Stroking and Marker Symbols — fill og stroke, startverdiene deres og verdien currentColor.
• Conformance Criteria — de fem behandlingsmodusene, og hvilken av dem hver måte å bygge inn på får.
• Document Structure — title og desc, og de implisitte ARIA-rollene til SVG-elementene.