Scalable Vector Graphics/Inleiding

In dit hoofdstuk wordt de opbouw van SVG-bestanden beschreven, zonder dieper op technische details in te gaan.

Basis

De basis van elk SVG-bestand bestaat uit een aantal declaraties en een stel svg-tags.

Declaraties

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200px" height="150px" version="1.0" xmlns="http://www.w3.org/2000/svg">
 ... (code)
</svg>

• encoding duidt de gebruikte karakterset aan
• standalone geeft aan of de DTD in het document zelf is ingebed, danwel uit een externe bron moet worden verkregen
• DOCTYPE beschrijft waar men de opbouwregels voor het document kan vinden
• version is de SVG-versie die wordt gebruikt
• width en height zijn respectievelijk de breedte en hoogte van de afbeelding, uitgedrukt in pixels, mm, inches of procenten

N.B.: In de volgende voorbeelden zal deze code niet meer worden getoond.

Tags

Tags worden geschreven tussen gepunte haken ("<" en ">"), en alle tags - behalve de XML-declaratie, de DOCTYPE-aanduiding en de "remark"-tag - worden afgesloten met een slash ("/").

• Tags met inhoud (zoals b.v. <svg>, <title>, <text>, etc.) bestaan uit een openend en een afsluitend deel; het laatste moet de naam van de tag bevatten, voorafgegaan door een slash ("/"):

<text>Dit is tekst</text>

• Tags met uitsluitend attributen (zoals b.v. de elementen en de meeste definities) bestaan uit één deel, wat eindigt met "/>":

<rect ... (attributen weggelaten) />

• Om de leesbaarheid van de code te vergroten mogen tags tussen de naam en de attributen - en tussen de attributen onderling - zowel een of meer spaties als tab-karakters bevatten, en kunnen ze over meerdere regels verdeeld worden
• Tags en attributen zijn hoofdlettergevoelig
• De waarde van attributen moet tussen (enkele of dubbele) aanhalingstekens worden geplaatst

Inhoud

De opbouw van de afbeelding wordt tussen de openende en de sluitende svg-tag geschreven (<svg ...> resp. </svg>). Deze inhoud bestaat uit een titel, een of meer svg-elementen, plus eventueel een stijl-sectie en een of meer blok(ken) met definities.

Elementen worden getekend in de volgorde waarin ze in de broncode staan, d.w.z. dat de eerdere (gedeeltelijk) gemaskeerd kunnen worden door de latere. Door voor de later getekende elementen de opacity-waarde in te stellen kunnen deze min of meer transparant worden gemaakt, waardoor de onderliggende elementen weer (min of meer) zichtbaar worden.

Titel

<title>Foo</title>

Definities

In deze sectie kunnen stijlen worden gedefinieerd die van toepassing zullen zijn op de gebruikte elementen, maar ook elementen die later d.m.v. een simpele verwijzing herhaald kunnen worden ingevoegd.

Elementen

In SVG versie 1.1 is een beperkt aantal elementen beschikbaar, waarmee echter vrijwel elke gewenste vorm gerealiseerd kan worden. De eenvoudigste zijn line, rect en circle, die resp. een lijn, een rechthoek en een cirkel opleveren.

• begin- en eindpunten van een lijn worden aangeduid met x1, y1, x2 en y2
• begin- en eindpunten van een rechthoek worden aangeduid met x en y, de breedte en hoogte met resp. width en height
• de straal van een cirkel worden aangeduid met r, het middelpunt met cx en cy

Voorbeeld

Het volgende voorbeeld tekent een cirkel:

<circle cx="150" cy="100" r="80" stroke-width="2" stroke="red" fill="blue" />

De waarden voor cx, cy en r worden, wegens het ontbreken van een nadere aanduiding, uitgevoerd in de verstekeenheid pixels. Het nulpunt van het coördinatensysteem ligt in principe in de linkerbovenhoek van de tekening, tenzij de svg-tag een viewBox-attribuut met afwijkende waarden bevat.

Het middelpunt van de cirkel uit het voorbeeld zal dus liggen op 150 pixels vanaf de linkerrand (cx) en 100 pixels vanaf de bovenkant (cy), en de cirkel zal een straal hebben van 80 pixels (r). De rand zal 2 pixels dik (stroke-width) en rood gekleurd zijn (stroke), en worden "opgevuld" in blauw (fill).