Scalable Vector Graphics (SVG)

SVG er en måde at lave grafik på, via kode. Man specificerer en række objekter, dvs. linjer og geometriske figurer og hvordan de skal de ud med farve, tykkelse, osv. Dette skal ses i modsætning til bitmappede billeder som f.eks. jpg-formatet, hvor grafikken er en række pixels med en farve. Det smarte ved objekterne er, at de skalerer godt, så billedet bliver pænt, uanset størrelsen, hvor bitmappede billeder kan blive lidt hakkede og grynede når man zoomer ind og ud på dem. Til gengæld er man begrænset af at det skal være objekter så det er ikke en løsning til alt grafik.

Principielt kan man kode et hvert billede fra bunden af, men som vi skal se lige om lidt, er det ikke en anvendelig fremgangsmåde i praksis. Man gør i stedet det at man anvender et tegneprogram der kan eksportere billeder i .svg-formatet. Det er f.eks. købeprogrammerne Adobe Illustrator og COREL Draw eller gratisprogrammet Inkscape.

SVG-tag'en som bruges til grafikken er egentlig blot en container som man kender det fra frames, dvs. man kan bestemme størrelse, baggrundsfarve, rammer, osv. Det man tegner specificerer man med andre tags i containeren, f.eks. en cirkel:


Hvilket ser således ud på skærmen:


De former man kan lave er:

• rect (rektangler)
• circle (cirkler)
• ellipse (ellipser)
• line (linjer)
• polygon (polygoner)
• polyline (åbne figurer bestående af rette linjer)
• path (alle linjer og former)

Der refereres til tider til andre former, men de er blot "path" der bliver anvendt.

Når man ser på eksemplet oven over, ser koden simpel ud, og det er den også. Men, når man skal til at lave mere komplekse figurer, bliver koden hurtig mere kompleks. Dette er f.eks. en fodbold:


Hvilket ser således ud på skærmen:


At prøve at kode sådan noget i hånden giver ingen mening. Overhovedet! Her gør man i praksis det, at man tegner det man vil have lavet i et tegneprogram der kan gemme i .svg-format, og så laver programmet koden for en.

Simple geometriske figurer til f.eks. knapper og ikoner kan man sagtens lave med SVG, og koden tillader at man kan lægge alle mulige effekter på som farvegradienter, skygger, osv. Ligeledes kan man lave animationer med SVG, hvis man vil dette. Til dette skal man bruge en SVG animation generator, som er et animationsprogram til formålet. Ligesom tegneprogrammerne findes disse i forskellige versioner på nettet.

Man arbejder med 2 muligheder mht. grafik på hjemmesider, SVG og CANVAS. Der er tale om 2 forskellige måder at arbejde med grafik på, hver med sine fordele og ulemper. Så, hvis man skal til at rode med grafik, kan man ved fordel lige overveje hvad der er mest hensigtsmæssigt til projektet. De væsentligste forskelle er:

CANVAS	SVG
Afhængig af opløsning Understøtter ikke event handlers Dårlig gengivelse af tekst Det resulterende billede kan gemmes som .png eller .jpg Velegnet til grafiktunge spil	Uafhængig af opløsning Understøtter event handlers Bedst egnet til applikationer med store områder der skal gengives (f.eks. kort) Langsom til gengivelse hvis billedet er komplekst (alt der anvender DOM (Document Object Model) meget, vil være langsomt) Ikke egnet til spilapplikationer

Hvis man nu skulle have lyst til at lave noget kodning med SVG, er variablerne her:

rect (rektangler)

x	x-positionen for rektanglens øverste venstre hjørne.
y	y-positionen for rektanglens øverste venstre hjørne.
width	Rektanglens bredde.
height	Rektanglens højde.
rx	Radius på x-akslen ved afrundede hjørner på rektanglen.
ry	Radius på y-akslen ved afrundede hjørner på rektanglen.

circle (cirkler)

r	Cirklens radius.
cx	x-positionen for cirklens centrum.
cy	y-positionen for cirklens centrum.

ellipse (ellipser)

rx	Ellipsens x-radius.
ry	Ellipsens y-radius.
cx	x-positionen for ellipsens centrum.
cy	y-positionen for ellipsens centrum.

line (linjer)

x1	x-positionen for punkt 1.
y1	y-positionen for punkt 1.
x2	x-positionen for punkt 2.
y2	y-positionen for punkt 2.

polygon (polygoner)

points

En liste af punkter, adskilt af mellemrum, komma, EOL (end of line), eller et line feed-tegn. I praksis er EOL og line feed-tegnet " eller ', som man bruger til at markere at her stopper listen af punkter. En liste bestående af punkterne (0,0), (1,1) og (2,2) skrives således points="0 0, 1 1, 2 2" hvor der som afslutning tegnes en linje fra det sidste punkt til det første. Et punkt skal bestå af både x- og y-koordinater.

polyline (åbne figurer bestående af rette linjer)

points

En liste af punkter, adskilt af mellemrum, komma, EOL (end of line), eller et line feed-tegn. I praksis er EOL og line feed-tegnet " eller ', som man bruger til at markere at her stopper listen af punkter. En liste bestående af punkterne (0,0), (1,1) og (2,2) skrives således points="0 0, 1 1, 2 2". Et punkt skal bestå af både x- og y-koordinater.

path (alle linjer og former)

d	En liste af punkter og anden information om hvordan linjen skal tegnes, se f.eks. eksemplet med fodbolden oven over.