Basisuitleg over SVG figuren

In deze diapresentatie wordt uitgelegd hoe je een simpele figuur

maakt.

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!!

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.

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.

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.

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.

Voorbeeld eenvoudige SVG-pagina met een rechthoek erin.

<svg mlns="http://www.w3.org/2000/svg"

width="1200px" height="1000px"

version="1.1">

<g>

<rect width="20" height="10" rx="3"

ry="3" style="fill:#000000;stroke-

width:1;stroke:#000000" x="35" y="60"

/>

</g>

</svg>

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.)

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.

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!

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.

De figuren

In de hierna volgende dia’s worden alle figuren zeer beknopt besproken.

Voor nadere uitleg en bijzonderheden wordt naar het lesmateriaal verwezen.

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”.

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 hexadecimalekleurcode gegeven.

De ovaal

Niet klaar

<circle cx="90" cy="90" r="20" style="fill:yellow; stroke-width:2;stroke:gray" />

De tag is: circleDe 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 geprogrammeerdzijn. In het vorige voorbeeld is voor de kleur een zogenaamdehexadecimale kleurcode gegeven.

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"

De veelhoek

<polygon fill="red" stroke="#c1c7e8" stroke-width="3"

points="350,60 390,60 370,20" />

De veelhoekige lijn

<polyline fill="none" stroke="#b1b2bb" stroke-width="3"

points="0,150 20,150 20,170 320,170 320,150 420,150" />

De tekst.

<text x="152" y="64" fill="blue" style="font-family:Verdana;font-size:8"><a xlink:href="http://www.cnn.com">Hummer</a></text>

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.

Voorbeeld: het wiel.