Uitleg over het maken van figuren in SVG die gezamenlijk tot de afbeelding van een auto moeten leiden.
Het is een onderdeel van het project van 2d naar 3d van de TU-delft.
Information on drawing a car in SVG in Dutch.
More than Just Lines on a Map: Best Practices for U.S Bike Routes
Basisuitleg over svg
1. Basisuitleg over SVG figuren
In deze diapresentatie wordt
uitgelegd hoe je een simpele figuur
maakt.
2. Over SVG
Vectorafbeeldingen worden vaak gemaakt met
de programmeertaal SVG (Scalable Vector
Graphics). SVG is een onderdeel van de
programmeertaal XML en lijkt veel op de taal
waar je webpagina’s mee maakt: HTML.
Indien je nog nooit een webpagina hebt
gemaakt, kun je beter even de slides over het
maken van een webpagina doornemen!!
3. Enkele eigenschappen van SVG.
• Je tekent figuren door de figuren met
eenvoudige wiskundige formules te
beschrijven.
• Je maakt een tekening door die figuren te
combineren en over elkaar heen te plaatsen.
• De bovenste figuur in je script komt in de
onderste laag op je tekening.
• Je geeft je coördinaten in pixels vanuit de
linker bovenhoek van het scherm.
4. Markeren
Bij het markeren geef je een begin en een
eindsituatie aan. Je doet dat net als bij HTML met
tags.
Een svg-begintag bestaat uit een letter of woord
tussen punthaken. Bijvoorbeeld: <g>.
Een svg-eindtag bestaat uit dezelfde letter of
hetzelfde woord, voorafgegaan door een schuine
streep. Bijvoorbeeld: </g>.
Dit markeren komt bij SVG minder vaak voor als bij
HTML.
5. Voorbeeld SVG code
De SVG-code:
<line x1=“50” y1=“50” x2=“300”
y2=“300” style=“stroke: #000000;
strokewidth:1;”/>.
in je editor, geeft in je browser een rechte
zwarte lijn van 1 pixel dik vanuit 50 pixels van
links en 50 pixels van boven naar 300 pixels van
links en 300 pixels van de bovenkant van het
scherm.
6. Aan de slag.
Open je editor. In de meeste gevallen zal dat
Kladblok of Notepad++ zijn.
Je begint met het aangeven van enkele situaties;
namelijk de situatie dat je een SVG-pagina
maakt. Deze situaties wordt geopend en
gesloten.
Zie het voorbeeld op de volgende dia.
8. De tags
• De SVG tag dient om aan te geven dat het om
SVG gaat. Bovendien worden de
buitenafmetingen van het tekenblad in de tag
gegeven.
• De g-tag is hier niet nodig. Deze dient om
meerdere figuren te groeperen.
• De code levert een zwarte rechthoek met
afgeronde hoeken op met een zwarte lijn
eromheen. (De linker bovenhoek van de
rechthoek komt op 35 pixels uit de linkerkant en
op 65 pixels van de bovenkant van het scherm.)
9. Zelfstandige tags
Indien een tag niet de functie heeft een
bepaalde situatie te markeren wordt die tag niet
door een aparte tag afgesloten. De schuine
streep komt dan -binnen de tag- achter de code
te staan. Bijvoorbeeld <br /> voor een nieuwe
regel of <hr /> voor een horizontale streep.
De tags die de SVG-figuren beschrijven worden
meestal op deze manier afgesloten.
10. Je pagina opslaan en bekijken.
Je slaat je pagina op in de map ‘vector’. In
kladblok werk je met ‘opslaan als’. Je selecteert
bij opslaan als ‘alle documenten’ en je geeft als
naam ‘index.html’.
In Notepad++ selecteer je ‘html’ onder ‘opslaan
als’ en geef je de naam ‘index.html’.
Lees verder op volgende dia!
11. Opslaan en bekijken vervolg.
Je slaat je werk op als html-document.
Windows kan namelijk nog niet goed overweg
met SVG en geeft als je het SVG-document met
de verkenner opent niet de juiste browsers.
Open je SVG met bijvoorbeeld de browsers
Chrome of Opera, liever niet met Internet
Explorer.
12. De figuren
In de hierna volgende dia’s worden alle figuren
zeer beknopt besproken.
Voor nadere uitleg en bijzonderheden wordt
naar het lesmateriaal verwezen.
13. De rechthoek.
<rect width="20" height="10" rx="3" ry="3"
style="fill:#000000;stroke-width:1;stroke:#000000;
“x="285" y="60" />
De tag is: rect.
De breedte en de hoogte van de rechthoek: width en height (standaard in
pixels).
De afronding van de hoeken: rx en ry.
De vulkleur: style=“fill:#kleurcode; (in een stylesheet)
De dikte en de kleur van de rand: stroke-width:1;stroke:#kleurcode;”
De positie van de linker bovenhoek van de rechthoek ten opzichte van de
linker bovenhoek van het scherm: x=“waarde” y=“waarde”.
14. De cirkel
<circle cx="90" cy="90" r="20" style="fill:yellow;
stroke-width:2;stroke:gray" />
De tag is: circle
De horizontale en de vertikale positie het middelpunt van de cirkel ten
opzichte van de linker bovenhoek van het scherm: cx=“waarde” en
cy=“waarde”.
De straal van de cirkel: r=“waarde”.
De vulkleur: style=“fill:#kleurcode; (in een stylesheet)
De dikte en de kleur van de rand: stroke-width:1;stroke:#kleurcode;”
Merk op dat de kleuren hier in Engelstalige woorden geprogrammeerd zijn. In
het vorige voorbeeld is voor de kleur een zogenaamde hexadecimale
kleurcode gegeven.
15. De ovaal
Niet klaar
<circle cx="90" cy="90" r="20"
style="fill:yellow; stroke-width:2;stroke:gray"
/>
De tag is: circle
De horizontale en de vertikale positie het middelpunt van de cirkel ten
opzichte van de linker bovenhoek van het scherm: cx=“waarde” en
cy=“waarde”.
De straal van de cirkel: r=“waarde”.
De vulkleur: style=“fill:#kleurcode; (in een stylesheet)
De dikte en de kleur van de rand: stroke-width:1;stroke:#kleurcode;”
Merk op dat de kleuren hier in Engelstalige woorden geprogrammeerd
zijn. In het vorige voorbeeld is voor de kleur een zogenaamde
hexadecimale kleurcode gegeven.
16. De lijn
<line x1="50" y1="66" x2="300" y2="66"
style=“stroke:#000000;stroke-width:1" />
De tag voor een lijn is: line
Je geeft de coordinaten van het beginpunt en van het
eindpunt ten opzichte van de linker bovenhoek van het
scherm aan.
Het eerste punt: x1=“waarde" y1=“waarde“.
Het tweede punt: x2=“waarde" y2=“waarde“.
De dikte en kleur van de lijn:
style=“stroke:#kleurcode;stroke-width:waarde"
20. Een link naar de KNMI
Om een link te maken markeer je een stukje
tekst of een afbeelding met de tags die een link
realiseren.
<a href=http://www.knmi.nl>Link
naar de site van het knmi</a> of
<a href=http://www.knmi.nl><img
src=“afbeelding.jpg” /></a>.
Probeer het maar eens uit.
