SVG

Hvad det er

SVG, kort for Scalable Vector Graphics, er et sprog, der beskriver todimensional grafik som former og ikke som et gitter af pixels. Filen fortæller, hvad der skal tegnes: en cirkel her, en linje fra ét punkt til et andet, et omrids fyldt med blåt. Browseren regner selv pixelene ud i den størrelse, tegningen vises i, og det er dér, skaleringen kommer fra: der er ingen pixels i filen, som skal strækkes.

Specifikationen kommer fra W3C. Den seneste version, SVG 2, er et Candidate Recommendation Snapshot dateret 6. oktober 2026, som tidligst ventes at blive en Recommendation 1. december 2026, og den bygger videre på SVG 1.1 Second Edition. Som specifikationen selv opsummerer det, hviler SVG på XML, kan blande vektorformer med rasterbilleder og lader sig style, scripte og animere. En tegning kan stå for sig selv, ligge inde i en HTML-side eller være indlejret i et andet XML-sprog.

Ordforrådet er lille. Seks grundformer, rect, circle, ellipse, line, polyline og polygon, klarer de enkle tilfælde, og en path tegner alt andet ud fra en kort streng af kommandoer. text placerer rigtig tekst, som kan markeres, en gruppe (g) lader flere former dele en stil eller en transformation, og en gradient eller et mønster kan male en form i stedet for en enkelt farve. Filtereffekter, som var et kapitel i SVG 1.1, har nu deres egen specifikation. Hver tegning har et koordinatsystem med origo øverst til venstre, hvor x vokser mod højre og y vokser nedad.

Specifikationen definerer SVG ud fra en dokumentobjektmodel og ikke ud fra ét bestemt filformat. En tegning kan være en fil for sig, serveret som image/svg+xml med endelsen .svg, eller et svg-element skrevet direkte ind i en HTML-side. En selvstændig fil skal erklære SVG-navnerummet. I HTML lægger parseren selv elementerne i det rigtige navnerum, så der skal ingen xmlns-attribut til.

SVG er ikke et rasterformat som PNG eller JPEG, der gemmer en farve for hver pixel og bliver uskarpe, når man forstørrer dem. Et fotografi hører hjemme i et af dem. SVG passer til det, der er tegnet: ikoner, logoer, diagrammer, grafer, kort og tegnet skrift. En SVG kan også rumme et rasterbillede, og det er det, specifikationen kalder blandet grafik.

Hvorfor det betyder noget

Én fil dækker alle skærme. Et ikon, der er tegnet én gang, står skarpt på en ældre skærm, på en telefon med flere enhedspixels pr. CSS-pixel og på papir, uden separate eksporter i hver størrelse, som nogen skal holde i takt. Enkel grafik giver desuden små filer, fordi den beskriver nogle få omrids i stedet for at gemme tusindvis af pixels, og specifikationen registrerer .svgz til en SVG-fil, der er komprimeret med gzip.

Fordi markuppen er tekst, passer den ind i den måde, et team allerede arbejder på. En designers eksport kan læses i et code review og sammenlignes linje for linje i versionsstyringen, og et script kan generere en tegning ud fra data, sådan som mange grafer bliver til. Når tegningen står direkte i en side, er dens elementer en del af DOM’en: CSS styler dem, et script kan ændre dem, og de reagerer på hover, fokus og læserens farvetema ligesom alt andet på siden.

Den bærer også betydning, som et bitmapbillede ikke kan bære. Tekst i en SVG forbliver tekst, og specifikationen kræver, at en browser lader læseren søge i den og markere den. Et title-element giver en tegning, eller en enkelt del af den, et tilgængeligt navn, og SVG 2 giver svg-elementet den implicitte ARIA-rolle graphics-document. En graf tegnet i SVG kan have navngivne dele, som en skærmlæser når frem til én ad gangen. Den samme graf eksporteret som PNG er ét billede med ét tekstalternativ.

Sådan ser det ud i praksis

Her er en lille pil i en ramme med runde hjørner, skrevet direkte ind i en HTML-side:

<svg viewBox="0 0 120 40" width="240" height="80">
  <title>Næste trin</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 giver tegningen sine egne koordinater: fire tal for venstre kant, øverste kant, bredde og højde af det område, der skal vises, her 120 enheder bredt og 40 højt. width og height beder om 240 gange 80 CSS-pixels, så hver enhed bliver tegnet to pixels bred. Sæt de to tal ned til 60 og 20, og hele tegningen krymper med, stregbredderne inklusive, fordi intet inde i den er målt i pixels.

Gruppen sætter farverne én gang. Fyld, streg og stregbredde nedarves, så både rammen og pilen henter dem fra g. rect tegner rammen, og rx runder dens hjørner. Stien læses som instrukser til en pen: M 20 20 flytter pennen til et punkt uden at tegne, H 92 trækker en vandret linje hen til x-koordinaten 92, det andet M løfter pennen og sætter den ned ved pilespidsens øverste ende, og de to L-kommandoer tegner spidsens to streger. Kommandoer med stort bogstav tager absolutte koordinater og kommandoer med lille bogstav relative, så den samme sti kan skrives som m 20 20 h 72 m -12 -10 l 20 10 l -20 10, hvor hvert skridt måles fra det sted, pennen standsede.

currentColor gør stregen til værdien af CSS-egenskaben color, som et svg-element i siden arver fra HTML’en omkring det. Sæt pilen i et link, og den bliver tegnet i linkets farve. Skift siden til et mørkt tema, og den følger med uden en ekstra fil. title bliver ikke tegnet. Elementet giver tegningen dens tilgængelige navn, og SVG 2 bemærker, at browsere ofte viser det som et værktøjstip, når markøren hviler over tegningen.

Den samme tegning som en fil for sig skal have navnerummet på sit rodelement, <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="Næste trin">. Så er den et separat dokument. CSS-nedarvning går fra forælder til barn, og rodelementet i det dokument har ingen forælder, så currentColor inde i filen følger ikke længere teksten omkring img. Det er nu alt-attributten, der leverer tekstalternativet, og SVG 2 forventer, at browseren viser filen i sikker animeret tilstand, uden script og uden eksterne filer.

Sidens tilgængelighedserklæring fortæller, at siderne er skrevet i HTML, CSS og SVG, med WAI-ARIA dér, hvor HTML alene ikke giver noget et navn, og at hver side er komplet uden JavaScript i browseren. Dér er SVG, ligesom i denne artikel, et af de sprog, en side bliver skrevet i, side om side med markuppen og stilarkene.

Hvor det går galt

En stregtegning bliver til en massiv figur. Startværdien for fill er sort, og startværdien for stroke er ingen streg. En åben sti, der var ment som en linje, for eksempel en pilespids eller et flueben, bliver fyldt, som om dens ender var forbundet, og uden streg bliver selve linjerne slet ikke tegnet. Sæt fill="none" og en stroke på stregtegninger, én gang, på den gruppe, der rummer dem.

Ikonet forsvinder i det mørke tema. Eksporterede ikoner har ofte en fast farve, fill="#1a1a1a", som forbliver mørk på en mørk baggrund. Sådan en attribut er også den svageste stil, der findes: SVG 2 giver præsentationsattributter en specificitet på nul, så en vildfaren CSS-regel et helt andet sted tilsidesætter den, uden at nogen opdager det. Brug currentColor til ikoner, der står i tekst, og sæt farver fra CSS frem for i markuppen.

Tegningen vil ikke skalere, eller den skalerer forkert. Uden viewBox er tegningens enheder browserens pixels, så en ny bredde blot beskærer tegningen eller lægger luft omkring den, og preserveAspectRatio bliver ignoreret helt. En negativ bredde eller højde i viewBox er en fejl, og attributten regnes som manglende. En bredde eller højde på nul slår gengivelsen fra. Giv hver tegning en viewBox, og lad width og height, eller CSS, bestemme størrelsen. Standardværdien, xMidYMid meet, bevarer proportionerne og centrerer tegningen i sin boks.

At kunne skalere er ikke det samme som at kunne læses. Intet i en vektortegning forhindrer, at den bliver vist i 16 pixels, men detaljer, der står klart i 200, kan flyde sammen til en plet dér. En porteføljeside om, hvordan firmaets visuelle identitet blev skabt beskriver et tandhjul i vektorgrafik, tegnet til browserfanen ud fra den tanke, at en kraftig silhuet holder ved 16 pixels. I det arbejde, der blev udført i juli 2026, blev tandhjulet og firmamærket vist side om side i 16, 32 og 48 pixels på lyse og mørke fanebjælker: mærket forblev genkendeligt, tandhjulet blev utydeligt, og faneikonet gik over til mærket. Test en tegning i den mindste størrelse, den skal vises i, på begge slags baggrund, og tegn en enklere udgave til de små størrelser, når den ikke holder.

En uploadet SVG er et dokument, ikke et billede. En SVG-fil kan indeholde script og henvisninger til andre filer. Registreringen af dens medietype siger lige ud, at scriptsprog er eksekverbart indhold, og advarer om, at ondsindet konstruerede XML-entiteter, der udfoldes igen og igen, kan lægge beslag på store mængder hukommelse. Hvor meget af det, der rent faktisk kører, afhænger af, hvordan filen bliver vist. SVG 2 forventer, at et object-element uden sandkasse kører filen i dynamisk interaktiv tilstand, med script, mens img og baggrundsbilleder i CSS bruger sikker animeret tilstand, uden script og uden eksterne referencer. Vis kun SVG fra fremmede kilder gennem img, server uploads fra et separat domæne, eller rens filerne mod en tilladelsesliste over elementer og attributter, før de bliver gemt.

Læs mere

• Scalable Vector Graphics (SVG) 2 — W3C’s Candidate Recommendation Snapshot fra 6. oktober 2026 med status, resumé og alle kapitler.
• Coordinate Systems, Transformations and Units — viewBox, preserveAspectRatio og det oprindelige koordinatsystem.
• Paths — stikommandoerne, absolutte og relative koordinater, og hvad der sker med stidata, der indeholder en fejl.
• Painting: Filling, Stroking and Marker Symbols — fill og stroke, deres startværdier og værdien currentColor.
• Conformance Criteria — de fem behandlingstilstande, og hvilken af dem hver måde at indlejre på får.
• Document Structure — title og desc og SVG-elementernes implicitte ARIA-roller.