Manually adding elements and shapes

An SVG image is a collection of elements rendered as shapes and comes with a set of seven basic elements; almost all of these are just an easier way to define a path:

• Straight lines (a path with two points)
• Rectangles (a path with four points and right angles)
• Circles (a round path)
• Ellipses (an oblong path)
• Polylines (a path comprising straight lines)
• Polygons (a path comprising straight lines that closes in on itself)
• Text (the only one that isn't a path)

You build SVG images by adding these elements to the document and defining some attributes. All of them can have a stroke style defining how the edge is rendered, a fill style defining how the shape is filled, and all of them can be rotated, skewed, or moved using the transform attribute.