Computer Graphics

The <line> element is an SVG basic shape element that draws a line segment:

<svg width="100" height="50"
    xmlns="http://www.w3.org/2000/svg">

    <line x1="10" y1="45" x2="80" y2="5"
        stroke="black" />

</svg>

The line is drawn from x1,y1 to x2,y2 using the color specified by the stroke attribute.

The <polyline> element draws a sequence of connected line segments:

<svg width="200" height="50"
    xmlns="http://www.w3.org/2000/svg">

    <polyline
        points="10 45  80 5  120 40  180 10"
        stroke="black" fill="none" />

</svg>

Lines can also be drawn with the SVG <path> element:

<svg width="200" height="50"
    xmlns="http://www.w3.org/2000/svg">

    <path
        d="M 10 45  L 80 5  L 120 40  L 180 10"
        stroke="black" fill="none" />

</svg>

The d attribute (d is for drawing) of the <path> element specifies drawing commands. In this example, M is the MoveTo command, and L is the LineTo command.

Commands that are upper case (capital letters) specify absolute units (shown in this example).

Lower case specifies units relative to the last position. The following example draws the same polyline using lower case (instead of upper case) LineTo:

<svg width="200" height="50"
    xmlns="http://www.w3.org/2000/svg">

    <path
        d="M 10 45  l 70 -40  l 40 35  l 60 -30"
        stroke="black" fill="none" />

</svg>