All of the basic shapes (line, rectangles, circles, ellipses, polylines, polygones) are really shorthand forms for the more general path element. You are well advised to use these shortcuts; they help make your SVG more readable and more structured. The path element is more general; it draws the outline of any arbitrary shape by specifying a series of connected lines, arcs, and curves . This outline can be filled and drawn with a stroke, just as the basic shapes are. Additionally, these paths (as well as the shorthand basic shapes) may be used to define the outline of a clipping area or a transparency mask.

All of the data describing an outline are in the path element's d attribute (the d stands for data). The path data consists of one-letter commands, such as M for moveto or L for lineto, followed by the coordinate information for that particular command.

7.1 Absolute move to, line to, close path

Every path must begin with a moveto command. The command letter is a capital M followed by an x- and y-coordinate, separated by commas or whitespace.
This command sets the current location of the "pen" that's drawing the outline.

Example 1 

 <svg width="200" height="150" viewBox="0 0 100 75" xmlns="http://www.w3.org/2000/svg">
   <!-- segment -->
   <path d="M 10 10 L 90 10" style="stroke:red"/>
   <!-- perpendicular segments -->
   <path d="M 10 20 L 60 20 L 60 40" style="fill:none; stroke:orange"/>
   <!-- two thirty-degree angles -->
   <g style="stroke: green; fill: none;">
       <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60, L 60 42.68"  />
       </g>
</svg>

Step by step green path explanation

M 40 60
Move pen to the point (40, 60)
L 10 60
Draw line to the point (10, 60)
L 42 42.68
Draw line to the point (42, 42.68)
M 60 60
Move pen to the point (40, 60)
L 90 60
Draw line to the point (90, 60)
L 60 42.68
Draw line to the point (42, 42.68)

Example 2. Using closepath Z

 <svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
   <!-- rectangle -->
   <path d="M 10 10 L 90 10 L 90 40 L 10 40 Z"
   style="stroke:red; fill:orange; fill-opacity:0.5"/>
   <!-- triangle -->
   <path d="M 10 60 L 90 60 L 90 90 Z"
   style="stroke:green; fill:green; fill-opacity:0.5"/>
</svg>