Scalable Vector Graphics/Figuren opmaken

SVG

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

Kleuren

bewerken

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"

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

bewerken
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

bewerken

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

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

 
  1. Zie hier voor noodzakelijke inleidende code.
Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.