Litt om språket

Neden for skal vi se på noen av de sentrale elementene i SVG. For en full oversikt over alle elementer og attributter i ulike versjoner henvises til W3Cs SVG-sider [1] .

<svg>

Når vi skal plassere en SVG-dom på en HTMLside gjør vi det med svg-taggen. Vi angir med noen attributter hvor stor den skal være. Noen eksempler:

<svg width="200px" height="100px">
<svg width="4cm" height="8cm">
<svg width="200px" height="100px" viewBox="0 0 1000 500">

Det er spesielt to begreper som er viktig her:Window angitt med width og height og ViewBox. Dette er en måte å mappe tegningen vår til skjermen. Window beskriver størrelsen på skjermområdet og vewBox sier hvilken del av tegningen vår som skal mappes dit. Det siste eksempelet over betyr det at vi skal tegne i et område (ViewBox) fra(0,0) til (1000,500) og vi skal framstille det i Window(0,0) til (200,100). Vi skal mappe rektangelet angitt i viewBox til et rektangel med bredde 200px og høyde 100px. Selve tegningen kan være større enn det vi velger å ta ut i viewBox. Målestokken i viewBox er gitt av de dimensjonenen vi tenker i når vi formulerer tegningen.

De som har programmert grafikk i andre sammenhenger kjenner kanskje begrepene Window og Viewport. Hensikten her er den samme men begrepene er byttet om (!)

<line>

Det enkleste vi kan tegne er vel en linje

<svg width="3cm" height="3cm" viewBox="0 0 500 500">
    <line x1="2" y1="2" x2="450" y2="455" stroke="red" stroke-width="5"/>
</svg>

Der vi altså angir endepunktene og fargen og tykkelsen på streken.

<rect>

Et av de grunnleggende tegnekommandoene er rect.

<svg width="3cm" height="3cm" viewBox="0 0 500 500" style="border-style:solid;border-width:thin">
    <rect x="2" y="2" width="450" height="455" fill="red"/>
</svg>

Merk at vi har stylet selve svg-elementet( for å vise rammene). I rect-elementet setter vi posisjonen (x,y) oppe til venstre og vi angir bredde og høyde. Vi ber dessuten om å få det fylt med rødt.

Vi kan også gjøre det slik:

<svg width="3cm" height="3cm" viewBox="0 0 500 500" style="border-style:solid;border-width:thin">
    <rect x="20" y="20" width="300" height="303" fill="green" stroke="blue" stroke-width="5"/>
    <rect x="250" y="250" width="200" height="200" fill="rgb(255,0,255)" stroke="blue" stroke-width="5"/>
</svg>

Der vi har brukt stroke og vi har brukt rgb().

<circle>

Å tegne sirkler er rimelig rett fram:

<svg width="3cm" height="3cm" viewBox="0 0 500 500" style="border-style:solid;border-width:thin">
    <circle cx="120" cy="120" r="100" fill="green" stroke="blue" stroke-width="5"/>
    <circle cx="350" cy="350" r="100" fill="rgb(255,0,255)" stroke="blue" stroke-width="5"/>
</svg>

og med litt endring, ellipser

<svg width="3cm" height="3cm" viewBox="0 0 500 500" style="border-style:solid;border-width:thin">
    <ellipse cx="120" cy="230" rx="100" ry="200" fill="yellow" stroke="blue" stroke-width="10"/>
</svg>

<polygon>

<svg width="3cm" height="3cm" viewBox="0 0 500 500" style="border-style:solid;border-width:thin">
    <polygon points="100,100 400,200 300,400" fill="yellow" stroke="blue" stroke-width="10"/>
</svg>

Punktene angis med komma mellom x og y og en blank mellom hvert punkt. Det er noen muligheter for å kontrollere fill ved hjelp av fill-rule slik at arealområder som omsluttes flere ganger alltid fylles eller fylles annenhver gang.

polyline er bygd over samme lest som polygon, men lukkes ikke.

<svg width="3cm" height="3cm" viewBox="0 0 500 500" style="border-style:solid;border-width:thin">
    <polyline points="100,100 400,200 300,400" fill="none" stroke="blue" stroke-width="10"/>
</svg>

Det er lurt å ikke fylle dersom vi skal ha en ren linje.

<text>

<svg width="3cm" height="3cm" viewBox="0 0 1000 1000" style="border-style:solid;border-width:thin">
    <text x="100" y="500" font-size="300px" fill="blue" >Hallo !</text>
</svg>

Her har vi droppet stroke.

<path>

Path er en fleksible og ganske komplisert måte å lage kurver på. Vi kan lage sammensatte konstruksjoner med polygoner og bezierkurver og vi kan operere med pen up og pen down. Vi kan lukke kurver eller beholde dem åpne. Det er vel ganske uvanlig at vi håndskriver path-elementer. De er imidlertid brukt som output fra tegneprogrammer som genererer SVG, som Inkscape [2] . Vi kommer tilbake til eksempler på path i noen av eksemplene i dette materialet. Her er et enkelt eksempel på en "håndskrevet" path:

Den regulære sekskanten genereres med følgende kode:

function drawOneHex() {
    var R=50;
    var sin60=Math.sin(Math.PI*(60.0/360.0));
    var cos60=Math.cos(Math.PI*(60.0/360.0));
    var x=60;
    var y=60;
    var T='<path style="fill:#bbbbbb;stroke:red" id="ID" \
   d="M x1,y1 L x2,y2 x3,y3 x4,y4 x5,y5 x6,y6 z" \>';
    T=T.replace("x1",x)            .replace("y1",y-R);
    T=T.replace("x2",x+cos60*R)    .replace("y2",y-sin60*R);
    T=T.replace("x3",x+cos60*R)    .replace("y3",y+sin60*R);
    T=T.replace("x4",x)            .replace("y4",y+R);
    T=T.replace("x5",x-cos60*R)    .replace("y5",y+sin60*R);
    T=T.replace("x6",x-cos60*R)    .replace("y6",y-sin60*R);
    var sv=document.getElementById("svghex").innerHTML=T;    
}
    

Vi har en path som flytter oss (M) til en absolutt posisjon for så å tegne streker (L). Til slutt lukkes kurven med z. Dersom vi skulle holdt oss til relativer verdier ville vi brukt m og l.

<g>

g-elementet er en måte å samle tegningselementer. F.eks slik

<svg width="3cm" height="3cm" viewBox="0 0 1000 1000" style="border-style:solid;border-width:thin">
    <g fill="yellow" stroke="black" stroke-width="5">
        <circle cx="120" cy="120" r="100"/>
        <rect x="320" y="120" width="100" height="100"/>
    </g>
    
    <g fill="red" stroke="black" stroke-width="15">
        <circle cx="620" cy="420" r="50"/>
        <polygon points="100,500 400,500 800,800"/>
    </g>
</svg>

Her har vi altså plassert attributtene fill og stroke i g-elementene. Elementene inne i g arver disse. Vi skal se mer på g-elementet når vi ser på SVG-DOM, transformasjoner og animasjoner.

XML

Vi lager en egen XML-side som er et komplett SVG-dokument:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Et rektangle</desc>
    <rect x="0.5cm" y="0.5cm" fill="red" width="3cm" height="3cm"/>
  <!-- frame it -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
        fill="none" stroke="blue" stroke-width=".02cm" />
</svg>

Du kan åpne denne siden her