Scalable Vector Graphics/Basisfiguren

Dit hoofdstuk behandelt de zes basisfiguren die met Scalable Vector Graphics getekend kunnen worden.

Voor alle figuren geldt dat:

• coördinaten en afmetingen mogen worden opgegeven in px, %, em, in, cm of mm
• de (begin-)positie wordt bepaald door een stel coördinaten waarvan de waarde positief of negatief mag zijn
• waarden voor breedte, hoogte en straal - voorzover die bij de verschillende figuren van toepassing zijn - niet negatief mogen zijn
• de stijl - o.a. lijndikte, lijnkleur en vulkleur - nader bepaald kan worden d.m.v. attributen als stroke-width, stroke resp. fill
• dat rotaties en vervormingen met het transform-attribuut mogelijk zijn
• de positie geheel of gedeeltelijk buiten de tekenruimte (het "canvas") mag vallen

Aan het path-element, dat veel meer mogelijkheden biedt, is een apart hoofdstuk gewijd.

N.B.: In de code-voorbeelden zijn de stijl-attributen weggelaten. Zie hiervoor de hoofdstukken Stijl, Kleuren en Transformaties.

Commentaar

Bij grotere figuren kan commentaar handig zijn om in het bronbestand aan te geven welk dele met de betreffende code beschreven wordt. Hoewel de syntax van SVG erg HTML-achtig oogt, werkt de commentaar-constructie <!-- --> niet in SVG code. Onder Firefox werkt het wel om tekst buiten < ........ > te zetten. Alleen tekst binnen zo'n constructie wordt als mogelijke svg-code gelezen.

Lijn

Het line-element tekent een rechte lijn tussen de beide opgegeven coördinaten-paren x1,y1 resp. x2,y2.

Tag: line
Attributen:

naam	betekenis	type	standaardwaarde	opmerkingen
x1	x-positie van het eerste punt	coördinaat	0
y1	y-positie van het eerste punt	coördinaat	0
x2	x-positie van het tweede punt	coördinaat	0
y2	y-positie van het tweede punt	coördinaat	0

<line x1="10" y1="80" x2="90" y2="20" stroke="black" />

Rechthoek

Het rect-element tekent een rechthoek waarvan de positie bepaald wordt door de coördinaten x en y, en de afmetingen door width en height.

De hoeken kunnen afgerond worden door de gewenste afrondingsstraal op te geven in rx en/of ry. De verstekwaarde is 0 (nul), de hoeken worden dan niet afgerond. Als ry niet opgegeven wordt krijgt deze dezelfde waarde als rx, en wordt de hoek afgerond met een kwart cirkel. Bij verschillende waarden in rx en ry wordt de afronding gevormd door een kwart ellips.

Tag: rect
Attributen:

naam	betekenis	type	standaardwaarde	opmerkingen
width	breedte	lengte	0	moet positief zijn
height	hoogte	lengte	0	moet positief zijn
x	x-positie	coördinaat	0
y	y-positie	coördinaat	0
rx	straal hoekboog op x-as	lengte	0	moet positief zijn
ry	straal hoekboog op y-as	lengte	0	moet positief zijn

<rect x="10" y="30" width="80" height="40" />

Cirkel

De circle-tag tekent een cirkel waarvan het middelpunt ligt op de coördinaten cx en cy, en de straal bepaald wordt door de waarde in r.

Tag: circle
Attributen:

naam	betekenis	type	standaardwaarde	opmerkingen
cx	x-pos middelpunt	coördinaat	0
cy	y-pos middelpunt	coördinaat	0
r	straal	lengte	0	moet positief zijn

<circle cx="50" cy="50" r="40" />

Ellips

Het ellipse-element tekent een ellips waarvan het middelpunt ligt op de coördinaten cx en cy. De grootte van de "horizontale" straal wordt bepaald door de waarde in rx, die van de "verticale" straal door ry.

Tag: ellipse
Attributen:

naam	betekenis	type	standaardwaarde	opmerkingen
cx	x-pos middelpunt	coördinaat	0
cy	y-pos middelpunt	coördinaat	0
rx	straal hoekboog op x-as	lengte	0	moet positief zijn
ry	straal hoekboog op y-as	lengte	0	moet positief zijn

<ellipse cx="50" cy="50" rx="40" ry="20" />

Veellijn

Het polyline-element tekent een lijn met nul of meer hoekpunten tussen de opgegeven coördinaten-paren.

Tag: polyline
Attributen:

naam	betekenis	type	standaardwaarde	opmerkingen
points	punten	lijst van punten

<polyline points="10,39 40,39 30,10 90,50 30,90 40,61 10,61" stroke="black" fill="none"/>

Veelhoek

Het polygon-element tekent een figuur met nul of meer hoekpunten tussen de opgegeven coördinaten-paren, en sluit de figuur af door het laatst opgegeven punt te verbinden met het eerste.

N.B.: In het voorbeeld zijn dezelfde waarden gebruikt als bij het polyline-element; merk op dat de stok van de pijl nu afgesloten is.

Tag: polygon
Attributen:

naam	betekenis	type	standaardwaarde	opmerkingen
points	punten	lijst van punten

<polygon points="10,39 40,39 30,10 90,50 30,90 40,61 10,61" stroke="black" fill="none" />