HTML5-udvikling: Sådan fungerer SVG i browserne

En serie artikler giver dig overblikket over, hvordan HTML5 fungerer i browserne Chrome, Firefox, Internet Explorer, Opera og Safari. Her handler det om SVG-grafik.

Artikel top billede

Læs også:

Her er de vigtigste funktioner i det nye HTML5

Sådan fungerer canvas-tag'et

Sådan fungerer video og lyd

Sådan fungerer WebGL

Som nævnt i canvas-afsnittet blev WWW bygget på den idé, at dataene skulle leveres i et enkelt format og så vises eller fortolkes af en lokal computer.

Formatet scalable vector graphics (SVG) blev opfundet til at oversætte almindelig ASCII-tekst til grafiske former. De første komitemøder fandt sted i 1999, men det hårde arbejde er nu endelig ved at bære frugt.

Nu, hvor Microsoft tilføjer understøttelse af SVG i IE9, vil stort set alle de større browsere også understøtte formatet.

Målet med SVG-formatet er at give browsere den samme slags præcision i specificeringen af en tegning, som PostScript gav i forhold til udskrift af dokumenter.

I stedet for at rendere objekter ved at specificere pixels, så er tegningen lavet af linjer og former, som er defineret af tags som det herunder, der producerer en cirkel med en radius på 40 pixels:

circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"

Resultaterne er fantastisk godt egnede til linjetegninger, fordi browseren kan skabe et billede, der er tilpasset skærmens opløsning. Brugeren kan zoome ind og ud og computerens grafikprocessor renderer resultatet.

Videoer og spil lavet af animerede sprites er lette at specificere og levere, fordi de kan være så små. Selvom alle tag'ene og deres mange attributter gør formatet vanvittigt ordrigt, så kan grundlæggende gzip-kompression fjerne 80 procent af dette syntaktiske spæklag. SVGZ-filer er forudkomprimerede.

Stadig et stykke vej igen

Betyder Microsofts ankomst til festen, at alle nu taler samme sprog? Selvfølgelig ikke. Mobilproducenter, der var bekymrede over at spilde batterilevetid på overpyntede SVG-panoramaer, opfandt to underformater: SVGB (SVG Basic) og SVGT (SVG Tiny).

De har skilt sig af med et antal funktioner, der sandsynligvis alligevel ikke gør megen nytte på de små mobilskærme, såsom muligheden for at specificere dimensioner i andre værdier end pixels. Det betyder ingen brug af pica eller millimeter, og SVGT tillader kun solide farveudfyldninger.

Der er også mange forskelle i desktop-implementeringen af browserne. Mens de alle efter sigende implementerer kerneversionen af SVG, så er der visse udviklere, der eksperimenterer med at kunne gøre endnu mere med den fleksible standard.

Nogen har eksempelvis tilføjet et nyt animate-tag, der beskriver en sti, som objekter kan bevæge sig ad. Når objekterne er tegnet, kan SVG-enginen udregne en ny placering for dem og så tegne dem igen.

Al den samme matematik og tag-infrastruktur til tegning af linjerne kan genbruges til at plotte den sti, som objekterne skal følge.

På nuværende tidspunkt understøtter Gecko- og WebKit-browsere denne funktion, mens IE9 ikke er kommet med på vognen endnu.

En anden plan er at lade browseren påføre alle SVG-effekterne såsom filtre og masker til ethvert arbitrært stykke HTML. Mozilla var først til at implementere denne tilgang og lavede et udkast til SVG-effekter til CSS, som HTML-holdet kunne overveje.

De andre browsere har nogen understøttelse, som dog udbredt anses for at være mere fejlfyldt - og inkonsistent med den måde, som idéen er implementeret i Firefox. Der bør dog ikke overraske nogen, da det var de samme folk hos Mozilla, der både skrev koden og specifikationen.

SVG-skrifttyper

Et tredje område med inkonsistens findes i implementeringen af SVG-skrifttyper. Til forskel fra PostScript gør den grundlæggende version af SVG det ikke let at lave ethvert arbitrært mønster af linjer om til et skrifttegn.

WebKit-browserne har grundlæggende understøttelse af SVG-skrifttyper, så det er lettere at tilføje ord til SVG-tegninger. IE og Gecko arbejder stadig på det.

Visse browsere har også taget en anden potentiel udvidelse til sig. Efter at have lavet de renderings-engines, der producerer uendeligt skarpe billeder end uendelig præcision, tog visse SVG-brugere et skridt tilbage og besluttede, at billederne måske ville være lidt lækrere, hvis de kunne være en smule mere slørede. (Nogle mennesker bliver bare aldrig tilfredse.)

I hvert fald tilbyder Chrome, Opera og Firefox SVG-filtre, der udjævner nærliggende pixels for at skabe blødere, pænere og ofte bizarre effekter, der ikke er lige så kolde og skarpe som de rene linjetegninger.

Min hurtige SVG-test giver dig en nem måde at kontrollere din browsers evne til at vise både indlejrede og indrammede SVG-tags.

Andre M. Winter har skabt en god samling af SVG-eksempler og -test, der viser mange af de måder, hvorpå folk eksperimenterer med den grundlæggende SVG-standard samt adskillige af de foreslåede tilføjelser og udvidelser.

Indbygget understøttelse af SVG i aktuelle og fremtidige browsere:

Læs også:

Her er de vigtigste funktioner i det nye HTML5

Sådan fungerer canvas-tag'et

Sådan fungerer video og lyd

Sådan fungerer WebGL

Læses lige nu
    Computerworld Events

    Vi samler hvert år mere end 6.000 deltagere på mere end 70 events for it-professionelle.

    Ekspertindsigt – Lyt til førende specialister og virksomheder, der deler viden om den nyeste teknologi og de bedste løsninger.
    Netværk – Mød beslutningstagere, kolleger og samarbejdspartnere på tværs af brancher.
    Praktisk viden – Få konkrete cases, værktøjer og inspiration, som du kan tage direkte med hjem i organisationen.
    Aktuelle tendenser – Bliv opdateret på de vigtigste dagsordener inden for cloud, sikkerhed, data, AI og digital forretning.

    Sikkerhed | Højbjerg, Aarhus

    Cyber Security Summit 2026 - Aarhus

    Lær om organisationers evne til at modstå, håndtere og komme videre efter alvorlige digitale hændelser, herunder ledelsesansvar, forretningskritiske afhængigheder og de valg, der afgør, om plan B holder, når systemer eller leverandører svigter.

    Digital transformation | Aarhus

    AI i det offentlige - Aarhus

    Hør hvordan offentlige AI-løsninger skaleres til stabil drift med reel effekt. Få erfaringer, arkitekturvalg og styringsgreb fra frontløbere. Lær at bygge fælles AI-infrastruktur med ansvarlighed, sikkerhed og compliance.

    Digital transformation | Køge

    Derfor skal du videre fra Dynamics AX – og sådan gør du

    Computerworld giver klar viden om vejen videre fra Dynamics AX. Du ser forskellen mellem AX og moderne cloud-ERP og får et konkret beslutningsgrundlag for næste skridt. Tilmeld dig og få styr på skiftet til Dynamics 365 FO eller BC.

    Se alle vores events inden for it

    IT-Universitetet i København

    IT-partner til IT-Universitetet i København

    Københavnsområdet

    KMD A/S

    Projektleder

    Københavnsområdet

    Everllence

    Embedded Software Engineer

    Københavnsområdet

    Politiets Efterretningstjeneste

    API-udvikler til PET

    Københavnsområdet

    Navnenyt fra it-Danmark

    SAP SuccessFactors Partner Pentos har pr. 1. marts 2026 ansat Plamena Cherneva som Seniorkonsulent indenfor SuccessFactors HCM. Hun skal især beskæftige sig med konfiguration og opsætning af SuccessFactors suiten, samt udvikle smarte løsninger til mellemstore danske virksomheder. Hun kommer fra en stilling som løsningsarkitekt indenfor HR IT hos LEO Pharma. Hun har tidligere beskæftiget sig med HR procesdesign, stamdata og onboarding. Nyt job

    Plamena Cherneva

    SAP SuccessFactors Partner Pentos

    Renewtech ApS har pr. 1. april 2026 ansat Boris Sudar som Senior IT Specialist. Han skal især beskæftige sig med at sikre, at Renewtech cloudbaseret infrastruktur fortsætter på sit højeste niveau, mens han også skal drive system udvikling. Han kommer fra en stilling som Senior IT Specialist hos Eurowind Energy. Han har tidligere beskæftiget sig med Microsoft 365, Intune og sikker endepunktsstyring for hybrid og cloudbaseret infrastrukturer. Nyt job

    Boris Sudar

    Renewtech ApS

    Elbek & Vejrup A/S har pr. 1. juni 2026 ansat Mikkel Bernt Buchvardt som AI Architect & Product Manager. Han skal især beskæftige sig med udviklingen af AI-Services og AI-Agenter i og omkring Business Central. Han kommer fra en stilling som Lead Data & Analytics hos IBM. Han er uddannet MSc. i softwareudvikling fra ITU. Han har tidligere beskæftiget sig med Data og BI hos KMD og Seges Innovation. Nyt job

    Mikkel Bernt Buchvardt

    Elbek & Vejrup A/S

    TDC Erhverv har pr. 1. maj 2026 ansat Peter Bjerregaard Harden som Senior Vice President (SVP), Enterprise Sales. Peter skal især beskæftige sig med at drive transformationen mod at blive en førende, kundecentreret partner inden for Cloud, Cyber og integrerede ICT-løsninger. Peter kommer fra en stilling som Country Manager hos Google Cloud Danmark. Peter er uddannet Cand. Merc (AU), HD, Organisation og Ledelse (CBS), Bestyrelsesuddannelse (CBS). Peter har tidligere beskæftiget sig med at opbygge Google Cloud i Danmark samt roller hos Microsoft, Salesforce og i management consulting. Nyt job