Scalable Vector Graphics (SVG)





Hvad går det ud på?

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

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:

<SVG STYLE="width:100px; height:100px">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="white" />
</SVG>

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


De former man kan lave er:
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:

<SVG viewBox="-2500 -2500 5000 5000">
<g stroke="#000" stroke-width="24">
<circle fill="#fff" r="2376"/>
<path fill="none" d="m-1643-1716 155 158m-550 2364c231 231 538 195 826 202m-524-2040c-491 351-610 1064-592 1060m1216-1008c-51 373 84 783 364 1220m-107-2289c157-157 466-267 873-329m-528 4112c-50 132-37 315-8 510m62-3883c282 32 792 74 1196 303m-404 2644c310 173 649 247 1060 180m-340-2008c-242 334-534 645-872 936m1109-2119c-111-207-296-375-499-534m1146 1281c100 3 197 44 290 141m-438 495c158 297 181 718 204 1140"/>
</g>
<path fill="#000" d="m-1624-1700c243-153 498-303 856-424 141 117 253 307 372 492-288 275-562 544-724 756-274-25-410-2-740-60 3-244 84-499 236-764zm2904-40c271 248 537 498 724 788-55 262-105 553-180 704-234-35-536-125-820-200-138-357-231-625-340-924 210-156 417-296 616-368zm-3273 3033a2376 2376 0 0 1-378-1392l59-7c54 342 124 674 311 928-36 179-2 323 51 458zm1197-1125c365 60 717 120 1060 180 106 333 120 667 156 1000-263 218-625 287-944 420-372-240-523-508-736-768 122-281 257-561 464-832zm3013 678a2376 2376 0 0 1-925 1147l-116-5c84-127 114-297 118-488 232-111 464-463 696-772 86 30 159 72 227 118zm-2287 1527a2376 2376 0 0 1-993-251c199 74 367 143 542 83 53 75 176 134 451 168z"/>
</SVG>

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.


Forskellen på CANVAS og SVG

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:

CANVASSVG
  • 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



Variablerne til figurerne

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

rect (rektangler)

xx-positionen for rektanglens øverste venstre hjørne.
yy-positionen for rektanglens øverste venstre hjørne.
widthRektanglens bredde.
heightRektanglens højde.
rxRadius på x-akslen ved afrundede hjørner på rektanglen.
ryRadius på y-akslen ved afrundede hjørner på rektanglen.


circle (cirkler)
rCirklens radius.
cxx-positionen for cirklens centrum.
cyy-positionen for cirklens centrum.


ellipse (ellipser)
rxEllipsens x-radius.
ryEllipsens y-radius.
cxx-positionen for ellipsens centrum.
cyy-positionen for ellipsens centrum.


line (linjer)
x1x-positionen for punkt 1.
y1y-positionen for punkt 1.
x2x-positionen for punkt 2.
y2y-positionen for punkt 2.


polygon (polygoner)
pointsEn 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)
pointsEn 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)
dEn liste af punkter og anden information om hvordan linjen skal tegnes, se f.eks. eksemplet med fodbolden oven over.