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)
;){kind=link}
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).
){kind=link}
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).
;){kind=link}
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).
;){kind=link}
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).
;){kind=link}
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).
;){kind=link}
Uitgebereide vormen
In SVG zijn 2 uitgebreide vormen: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).
;){kind=link}
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).
;){kind=link}
| Ga naar het volgende hoofdstuk: Hyperlinks en afbeeldingen |
|