Examples

Looking at the source, the line

<rect x="100" y="100" width="400" height="200" fill="yellow" stroke="black" stroke-width="3" />

Describes a rectangle. Here's a brief piece by piece description of everything in that line:

• rect - the rectangle is declared using a rect element.
• x, y - the co-ordinates of the top left corner of the rectangle.
• width, height - the width and height of the shape. In some cases, these can be expressed as percentages (such as "20%").
• fill - the colour to use for the interior of the shape. Colours are explained in more detail in a later section.
• stroke - the colour for the line actually drawn for the rectangle.
• stroke-width - the thickness of the line used to draw the rectangle.

The next simple example is a circle. It works in a similar way to the rect, look at the line

<circle cx="100" cy="100" r="80" fill="orange" stroke="navy" stroke-width="10" />

This is what each part of that line does:

• circle - the element that we're using
• cx, cy - the co-ordinates of the center of the circle.
• r - the circle radius.
• fill - the colour to use for the interior of the shape. Colours are explained in more detail in a later section.
• stroke - the colour of the circle outline.
• stroke-width - the thickness of the line used to trace the circle.