Scalable Vector Graphics/Figuren opmaken

Kleuren

Figuren kunnen we kleuren aan de hand van fill en stroke. Kleuren opgeven kun je op verschillende manieren: aan de hand van hun HTML-naam, RGB-waarde of hex-code. Wanneer we willen dat er geen kleur is kunnen we dit aan de hand van de waarde 'none'; het resultaat is een transparant element.

naam	betekenis	type	standaardwaarde	opmerkingen
fill	opvulkleur	kleur	"black"

Rand

Voor de rand kunnen we een dikte en een kleur opgeven, d.m.v. resp. 'stroke' en 'stroke-width'.

naam	betekenis	type	standaardwaarde	opmerkingen
stroke	randkleur	kleur	geen	verplicht (indien een rand gewenst is)
stroke-width	lijndikte	lijndikte-waarde	1

• N.B.: Wanneer geen waarde voor 'stroke' wordt opgegeven zal geen rand getekend worden.

Ondoorzichtigheid

naam	betekenis	type	standaardwaarde	opmerkingen
opacity	ondoorzichtigheid	ondoorzichtigheids­waarde	1

De opacity kan elke waarde van 0 (nul) t/m 1 krijgen: 0 is transparant, 1 is geheel ondoorzichtig.

Voorbeeld

Nu heb je al wat kennis om een eenvoudige tekening te kunnen maken. Een voorbeeld met enkele basiselementen:

<rect width="400" height="200" fill="skyblue" />                                            <!-- lucht-->
<rect width="400" height="100" y="200" fill="green" />                                      <!-- gras -->
<circle cx="60" cy="35" r="20" fill="yellow" />                                             <!-- zon -->
<polygon points="150,220 150,120 250,40 350,120 350,220" fill="red" />                      <!-- huis -->
<rect width="52" height="52" x="173" y="142" fill="lightgrey" />                            <!-- raam (glas) -->
<rect width="52" height="52" x="173" y="142" fill="none" stroke="brown" stroke-width="5" /> <!-- raam (kozijn) -->
<rect width="55" height="80" x="270" y="140" fill="brown" />                                <!-- deur -->
<ellipse cx="278" cy="180" rx="2" ry="3" />                                                 <!-- deurknop -->

Het resultaat is als volgt: