Voor we beginnen met tekenen, moeten we het eerst hebben over

• het coördinatenstelsel van SVG-afbeeldingen
• de afmetingen en het kijkvenster die vastgelegd worden in het svg element zelf

Het coördinatenstelsel van SVG

De afbeeldingselementen worden getekend in een vlak met een coördinatenstelsel waarbij de $x$-as van links naar rechts loopt, en de $y$-as van boven naar onder. Vooral dat laatste is misschien wel wat wennen, want in de wiskundelessen loopt de $y$-as meestal van onder naar boven.

De coördinaten zelf hebben geen specifieke dimensie: het zijn gewoon getallen zonder lengte-eenheid (zoals pixels of meter). Om een cirkel te tekenen moeten we voor het circle-element de $(x,y)$-coördinaten van het middelpunt van de cirkel vastleggen (via de eigenschappen x en y) en de straal van de cirkel (via de eigenschap r).

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

Dit tekent een cirkel (hieronder weergegeven met een dikke zwarte rand) met middelpunt op positie $(100,100)$ en straal 50.

Afmetingen en kijkvenster van het SVG-element

Het SVG-element bevat alle afbeeldingselementen, maar het definieert ook de afmetingen en het kijkvenster van de afbeelding. Het stelt de externe en de interne maten van de afbeelding in.

De eigenschappen width (breedte) en height (hoogte) bepalen hoeveel ruimte de afbeelding inneemt in de browser. Dit zijn de externe maten. De grootte die wordt gedefinieerd door width en height is hoe de rest van HTML denkt over de SVG-afbeelding en hoe groot deze wordt weergegeven in de browser.

Er is ook een eigenschap viewBox die het kijkvenster op het coördinatensysteem definieert voor de afbeelding. Enkel die delen van de afbeeldingselementen die binnen het kijkvenster vallen, zijn zichtbaar in de SVG-afbeelding. Het kijkvenster wordt gedefinieerd op basis van vier interne maten die refereren aan het coördinatensysteem van de SVG-afbeelding. De eerste twee waarden van de eigenschap viewBox bepalen de positie van de linkerbovenhoek van het kijkvenster en de laatste twee waarden bepalen de breedte en de hoogte van het kijkvenster vanuit het perspectief van de afbeeldingselementen. De grootte gedefinieerd door viewBox is hoe de afbeeldingselementen denken over de afbeelding wanneer ze zichzelf positioneren binnen het coördinatenstelsel van SVG.

In de volgende drie voorbeelden hebben de drie SVG-afbeeldingen precies dezelfde inhoud: de cirkel met middelpunt op positie $(100,100)$ en straal 50 die we hierboven al zijn tegengekomen. De drie afbeelden verschillen echter qua kijkvenster, waardoor de cirkel telkens anders gepositioneerd is binnen de afbeelding. Of ze verschillen qua afmetingen waardoor de afbeelding groter of kleiner weergegeven wordt in de browser. Als de grootte die door viewBox gedefinieerde wordt, niet overeenkomt met de eigenschappen width en height, dan wordt de afbeelding groter of kleiner gemaakt.

                
            <svg width="100px" height="100px" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="50" />
</svg>

Deze SVG-afbeelding heeft een kijkvenster met linkerbovenhoek op positie $(0,0)$ en een breedte en hoogte van 200.

Dit is hetzelfde kijkvenster als onderstaande SVG-afbeelding, maar die wordt wel dubbel zo groot weergegeven in de browser. Waar bovenstaande afbeelding in de browser weergegeven wordt met een breedte en hoogte van 100 pixels, wordt onderstaande afbeelding weergegeven met een breedte en hoogte van 200 pixels.

                
            <svg width="200px" height="200px" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="50" />
</svg>

Onderstaande figuur wordt dan weer even groot weergegeven in de browser.

                
            <svg width="200px" height="200px" viewBox="0 0 100 100">
  <circle cx="100" cy="100" r="50" />
</svg>

Maar in dit geval is de breedte en de hoogte van het kijkvenster maar half zo groot: het kijkvenster heeft een breedte en een hoogte van 100.

We kunnen ook instellen op welke coördinaat de linkerbovenhoek van het kijkvenster moet staan. In het volgende voorbeeld verplaatsen we de oorsprong van het coördinatensysteem naar het midden van de afbeelding. Hiervoor stellen we de linkerbovenhoek in op -100,-100, wat de helft is van de afbeeldingsgrootte in negatief.

                
            <svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <circle cx="0" cy="0" r="50" />
</svg>

Merk op dat positie van het middelpunt van de cirkel nu 0,0 is.

SVG-afbeeldingen hebben vaak ook een eigenschap xmlns. Deze eigenschap kan echter weggelaten worden als de afbeelding in een HTML-document vervat zit.