Waarvoor staat ‘SVG’?

• S: Scalable
• V: Vector
• G: Graphics

Wat is SVG?

• voor tekeningen
• omschrijven als tekst
• inzoombaar zonder kwaliteitsverlies

Bestaat uit “tags”

Voorbeeld:

<olifant>

Tag bestaat uit:

• “<”: kleiner dan teken
• “olifant”: naam van de tag
• “>”: kleiner dan teken

Bestaat uit “tags”

• “<tagnaam>”: starttag
• “</tagnaam>”: eindtag
• “<tagnaam/>”: begin- en eindtag in 1

Vereenvoudigd voorbeeld 1

Tekening met 1 rechthoek:

<svg>
    <rect/>
</svg>

Vereenvoudigd voorbeeld 2

Tekening met twee cirkels en een rechthoek:

<svg>
    <circle/>
    <circle/>
    <rect/>
</svg>

Tags

• svg: geeft begin en einde van de tekening aan
• circle: teken een cirkel
• rect: teken een rechthoek

Vereenvoudigd voorbeeld 2 - boomstructuur

Tekening met twee cirkels en een rechthoek:

<svg>
    <circle/>
    <circle/>
    <rect/>
</svg>

Diepere structuur

Een ‘g’ groep met twee cirkels:

<svg>
    <g>
        <circle/>
        <circle/>
    </g>
    <rect/>
</svg>

Boomstructuur

<svg>
    <g>
        <circle/>
        <circle/>
    </g>
    <rect/>
</svg>

Voorbeeld 1

Dit was een vereenvoudiging:

<svg>
    <rect/>
</svg>

Attributen

Om de rechthoek te kunnen tekenen, dienen we ook positie en grootte op te geven via attributen:

<tagnaam attribuut1="100" attribuut2="rood"/>

Attributen

Een rechthoek met positie (0,10), breedte 100 en hoogte 50.

<svg>
    <rect x="0" y="10" width="100" height="50"/>
</svg>

• x: x-coordinaat
• y: y-coordinaat
• width: breedte
• height: hoogte

Attributen

Een rode cirkel met centrum (0,10) en straal 100.

<svg>
    <circle cx="0" cy="10" r="100" fill="red" />
</svg>

• cx: x-coordinaat
• cy: y-coordinaat
• r: straal
• fill: invulkleur

Attributen

Tekst “Hello” op positie (0,10).

<svg>
    <text x="0" y="10">Hello</text>
</svg>

• x: x-coordinaat
• y: y-coordinaat
• tussen start- en eindtag: de tekst die getoond wordt