Vormen

Basisvormen

In SVG zijn 6 vormen:
  1. rechthoeken
  2. cirkels
  3. ovalen
  4. lijnen
  5. veelhoeken
  6. veellijnen

Rechthoeken

Met de tag <rect /> kan u rechthoeken tekenen. De volgende attributen kan u bij deze tag gebruiken.
attribuut verplicht waarde van het attribuut uitleg
x ja co÷rdinaat Het x-coördinaat van de rechthoek
y ja co÷rdinaat Het y-coördinaat van de rechthoek
width ja lengte De breedte van de rechthoek
height ja lengte De hoogte van de rechthoek
rx neen lengte Als u de hoeken van de rechthoek wilt afronden gebruikt u dit attribuut. Hoe hoger de waarde van dit attribuut, hoe meer de hoeken van de rechthoek afgerond zullen zijn.
standaard attributen nee / Alle standaard attributen

Mogelijke subtags:
animate | set | animateMotion | animateColor | animateTransform

Bijvoorbeeld:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100px" height="100px">
<g>
<rect x="10" y="10" width="40" height="40" fill="blue" stroke="#0ebb00" stroke-width="4" />
</g>
</svg>

Dit voorbeeld geeft een blauwe rechthoek van 40 op 40 pixels met een groene rand die 4 pixels dik is. (Bekijk dit voorbeeld)

Cirkels

Om een cirkel te tekenen gebruikt u de tag <circle /> die de volgende attributen heeft:
attribuut verplicht waarde van het attribuut uitleg
cx ja co÷rdinaat Het x-coördinaat van het middelpunt van de cirkel.
cy ja co÷rdinaat Het y-coördinaat van het middelpunt van de cirkel.
r ja lengte Straal van de cirkel
standaard attributen nee / Alle standaard attributen

Mogelijke subtags:
animate | set | animateMotion | animateColor | animateTransform

Bijvoorbeeld:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200px" height="200px">
<g>
<circle cx="100" cy="100" r="100" fill="green" stroke="blue" stroke-width="10" />
</g>
</svg>

Dit voorbeeld geeft een groene cirkel met een straal van honderd pixels en een blauwe strook die vier pixels dik is weer. (Bekijk dit voorbeeld).

Ovalen

Om een ovaal te tekenen gebruikt u de tag <ellipse /> die de volgende attributen heeft:
attribuut verplicht waarde van het attribuut uitleg
cx ja co÷rdinaat Het x-coördinaat van het middelpunt van de ovaal.
cy ja co÷rdinaat Het y-coördinaat van het middelpunt van de ovaal.
rx ja co÷rdinaat Horizontale straal.
ry ja co÷rdinaat Verticale straal.
standaard attributen nee / Alle standaard attributen

Mogelijke subtags:
animate | set | animateMotion | animateColor | animateTransform

Bijvoorbeeld:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="220px" height="220px">
<g>
<ellipse cx="110" cy="110" rx="100" ry="50" fill="green" stroke="blue" stroke-width="10" />
</g>
</svg>

Dit voorbeeld geeft een groene ovaal met een horizontale straal van honderd pixels, een verticale straal van vijftig pixels en een blauwe rand van tien pixels dik. (Bekijk dit voorbeeld).

lijnen

Om een lijn te tekenen gebruikt u de tag <line /> die de volgende attributen heeft:
attribuut verplicht waarde van het attribuut uitleg
x1 ja co÷rdinaat Het x-coördinaat van het beginpunt van de lijn
y1 ja co÷rdinaat Het y-coördinaat van het beginpunt van de lijn
x2 ja co÷rdinaat Het x-coördinaat van het eindpunt van de lijn
y2 ja co÷rdinaat Het y-coördinaat van het eindpunt van de lijn
standaard attributen nee / Alle standaard attributen

Mogelijke subtags:
animate | set | animateMotion | animateColor | animateTransform

Bijvoorbeeld:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="220px" height="220px">
<g>
<line x1="100" y1="100" x2="120" y2="200" stroke="green" stroke-width="2" />
</g>
</svg>

Dit voorbeeld geeft een groene lijn van twee pixels dik weer die begint op het punt 100,100 en eindingt op het punt 120,200. (Bekijk dit voorbeeld).

Veelhoeken

Om een veelhoek te tekenen gebruikt u de tag <polygon /> die de volgende attributen heeft:
attribuut verplicht waarde van het attribuut uitleg
points ja x1,y1 x2,y2 x3,y3 ... De coördinaten van de hoeken van de veelhoek.
standaard attributen nee / Alle standaard attributen

Mogelijke subtags:
animate | set | animateMotion | animateColor | animateTransform

Bijvoorbeeld:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
<g>
<polygon style="fill:lime; stroke: blue; stroke-width: 1" points="0,54 59,54 77,0 94,54 153,54 105,87 123,141 77,108 30,141 48,87"/>
</g>
</svg>

Dit voorbeeld geeft een groene veelhoek met een blauwe rand weer. (Bekijk dit voorbeeld).

Veellijnen

Voor een veellijn te tekenen gebruikt u de tag <polyline />. Het enige verschil tussen een veellijn en een veelhoek is dat bij een veellijn het laatste punt niet wordt verbonden met het eerste (in tegenstelling tot bij een veelhoek). Een veellijn wordt wel opgevuld! Dit kan u vermijden door het attribuut fill toe te voegen en de waarde none te geven.
attribuut verplicht waarde van het attribuut uitleg
points ja x1,y1 x2,y2 x3,y3 ... De coördinaten van de hoeken van de veellijn.
standaard attributen nee / Alle standaard attributen

Mogelijke subtags:
animate | set | animateMotion | animateColor | animateTransform

Bijvoorbeeld:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="50px" height="50px">
<g>
<polyline points="0,28 1,23 3,25 6,27 8,21 8,9 9,10 9,23 13,25 15,7 13,23 17,20 18,12 19,23 21,13 23,24 24,19 26,25" stroke="#007700" fill="none" />
</g>
</svg>

Dit voorbeeld geeft een groene veellijn weer. (Bekijk dit voorbeeld).

Uitgebereide vormen

In SVG zijn 2 uitgebreide vormen:
  1. De <use />-tag
  2. De <path />-tag

Use

Met de tag <use /> kan u afbeeldingen die tussen <defs> en </defs> gedefinieerd zijn weergeven. Tussen <defs> en </defs> komt de tag <g></g> waarbij u het attribuut id plaatst met als waarde de naam van de gedefinieerde afbeelding. <use /> heeft de volgende attributen: Deze tag heeft de volgende attributen:
attribuut verplicht waarde van het attribuut uitleg
x ja lengte x-coördinaat van de figuur.
y ja lengte t-coördinaat van de figuur.
xlink:href ja id Naam van de gedefinieerde afbeelding die moet worden weergegeven.

Mogelijke subtags:
animate | set | animateMotion | animateColor | animateTransform

Bijvoorbeeld:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="220px" height="220px">
<defs>
<g id="ovaal">
<rect x="0" y="0" width="100" height="100" fill="yellow" stroke="green" stroke-width="1" />
<ellipse cx="110" cy="110" rx="100" ry="50" fill="green" stroke="blue" stroke-width="10" />
</g>
</defs>
<g>
<use x="0" y="0" xlink:href="#ovaal" />
</g>
</svg>

(Bekijk dit voorbeeld).

Path

Met de tag <path /> kan u ingewikkelde vormen maken. U kan krommen, rechten, taartvormen,... met elkaar compineren. Deze tag heeft de volgende attributen:
attribuut verplicht waarde van het attribuut uitleg
d ja path data De waarde van dit attribuut is path data: een code waarin de coördinaten en de vormen worden opgeslagen. Het is niet zo handig om dit zelf te maken, hier vind u een programma (in SVG) waarmee u path data kan maken.
pathLength verplicht waarde van het attribuut uitleg

Mogelijke subtags:
animate | set | animateMotion | animateColor | animateTransform

Bijvoorbeeld: <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200px" height="200px">
<g>
<path d="M25 172L11 167L0 158L10 138L28 132L31 134L56 119C52 116 44 107 60 58L30 57C20 61 9 78 2 100C3 78 13 50 33 41L67 46L71 34L56 32L49 35L52 29L73 29C73 20 70 10 65 0C78 9 83 21 86 26L106 18L107 21L88 30L89 33L101 34L103 38L96 37L92 40L94 43L99 42L100 45L90 48L89 53C104 56 120 69 121 74L124 80L119 83C108 71 95 68 84 68L111 88L105 92L77 75C75 82 68 88 67 97C69 104 92 102 125 99C130 100 130 124 127 149L121 144C117 149 99 159 69 156C62 159 47 175 44 175L41 171L69 136L76 129C69 127 61 123 64 124L37 139L34 154L35 155ZM93 102L175 41L179 45L102 102ZM89 156L90 168L86 168L87 175C91 181 97 186 99 187L102 182L92 167L95 167L95 155ZM104 153L107 157L102 161L107 165L124 164L118 156L112 156L110 151" fill="black" />
</g>
</svg>

(Bekijk dit voorbeeld).
Ga naar het volgende hoofdstuk: Hyperlinks en afbeeldingen Valid XHTML 1.0!