SVG 'line' element

The SVG <line> element defines a line segment starting at one point and ending at another. It has four attributes:

  • x1 and y1 are coordinates of the start point of the line. The default value is '0'.
  • x2 and y2 are coordinates of the end point of the line. The default value is '0'.

Lines are one-dimensional geometrical shapes and trerefore the <line> element can not be filled. To set the colour of a line use stroke attribute.

Here is a simple example:

<line x1="10" y1="10" x2="60" y2="40" stroke="black" stroke-width="5"/>

Changing <line> attributes' values you can get, for example, these pictures: