Scalable Vector Graphics/Figuren opmaken

SVG

Inleiding
  1. Basisfiguren
  2. Eigen vormen
  3. Figuren opmaken
  4. Tekst

KleurenBewerken

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"

RandBewerken

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.

OndoorzichtigheidBewerken

naam betekenis type standaardwaarde opmerkingen
opacity ondoorzichtigheid ondoorzichtigheid-waarde 1

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

VoorbeeldBewerken

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:

Informatie afkomstig van http://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.