Hvad er SVG filer? 5 min.

SVG filer er et billedformat med mange fordele, som du ofte bør bruge frem for f.eks. JPG’er eller PNG’er på din hjemmeside. Hvorfor og præcist hvad formatet er, kigger vi på her.

Hvad er en SVG fil?

SVG står for ”Scalable Vector Graphics” som på dansk kan oversættes til skalerbare vektorgrafikker. Det er et XML-baseret vektorformat til todimensionelle grafikker. Man kan lave både statiske SVG filer og animerede.

Da en SVG fil består af kode har den faktisk opbygningsmæssigt mere tilfælles med en hjemmeside end den har med andre billedformater som f.eks. JPG eller PNG.

Formatet blev udviklet i 1998 og blev af World Wide Web Consortium (W3C) accepteret som en åben standard i 1999.

Formatet er en standard der fungerer universelt i alle nyere webbrowsere, hvorfor du ikke vil opleve kompatibilitetsproblemer hvis du bruger det.

SVG filer er skalerbare

SVG filer er lavet i et XML-tekstbaseret kodeformat. Det betyder at de rent praktisk er opbygget af tekst i modsætning til de mere gængse billedformater PNG, JPG og GIF, der alle består af pixels, og derfor vil miste kvalitet hvis de bruges i et større format, end de er lavet til.

SVG filer er et vektorformat, hvilket betyder at de kan skaleres op og ned som man ønsker det, uden at de mister kvalitet. Fordi browserne eller de programmer der læser filen forstår koden, ”gentegner” de blot grafikken større, i samme høje kvalitet.

Så hvad end SVG filen vises på en smartphoneskærm eller en stor computerskærm, vil kvaliteten forblive den samme. Så når du har en responsiv hjemmeside, er det altså også en god idé at bruge denne type responsive grafikker.

Herover et eksempel på hvordan en opskalering af en almindelig bitmap grafik mister kvalitet, mens en SVG fil holder kvaliteten.

SVG filer kan fylde mindre

Når man bruger grafikker der skal kunne vises i stort format kan filstørrelsen hurtigt blive stor, hvilket gør din hjemmeside langsommere. Her er det gode ved SVG filer at de forbliver samme størrelse uanset om du skal vise dem som små eller store, netop fordi de er XML-baserede.

SVG filer er ikke altid mindre end PNG eller JPG

Skal du derimod bare bruge helt små grafikker, kan du dog være ude for at en PNG eller JPG fil er mindre end SVG’en. Så det kommer altså an på hvad den største visning af en grafik skal være, der afgør hvilken filtype der fylder mindst.

Hvordan laver man en SVG fil

I de programmer du normalt laver vektorgrafik i, vil du også kunne gemme din grafik i SVG-format. Det kunne f.eks. være Adobe Illustrator eller den gratis software Inkscape.

Og eftersom det er et XML-tekstformat, kan man også kode SVG’en direkte i tekst, hvis man besidder de færdigheder.

SVG filer kan animeres

En ekstra fordel ved at bruge SVG filer er at de også kan animeres. Det vil sige at du kan lave SVG’er hvor der er bevægelse i billedet, som får det til at stå ekstra meget ud og fange opmærksomheden.

Metoder til det er: SVG animation, CSS og JavaScript.

Hvornår skal du ikke bruge SVG filer?

Da SVG er vektorgrafik og derved skalerbart, kan det vise former og farver helt fint. Derimod bør du ikke bruge SVG til bitmap elementer, så som når det kommer til et foto. Disse kan ikke bare skaleres op og ned uden at miste kvalitet. Her bør du som udgangspunkt bruge JPG filer, eller PNG hvis billedet skal indeholde transparente elementer (f.eks. baggrund).

Udbredelse af SVG-formatet

Selvom SVG blev accepteret som en standard allerede i 1999, er det trods dets mange fordele, stadig ikke vildt udbredt.

Faktisk var det i 2014 kun 0,1% af alle hjemmesider der benyttede sig af SVG filer, som man kan se herunder:

En af de store grunde til at formatet ikke tidligere har fået fodfæste er med stor sikkerhed, at det tidligere ikke var alle browsere der kunne vise dem. Faktisk var det først med Internet Explorer 9 i 2011, at det begyndte at virke i alle de største browsere.

Dog er det også tydeligt at det er et format der er på vej frem, og specielt det at alle hjemmesider i dag bør være responsive, er en bidragende faktor til dette.

Og som man kan se herover er SVG-formatet virkelig på vej frem lige nu.

Grafik: W3C