SVG <line>

SVG Line - <line>

The <line> element is used to create a line.

The <line> element creates a line between the start position (x1,y1) and the end position (x2,y2).

The <line> element has four basic attributes to position and set the length of the line:

An SVG Line

The following example creates a line from position (0,0) to (300,200):

Here is the SVG code:

Code explanation:

• The <x1> and <y1> attributes define the start of the line (0,0)
• The <x2> and <y2> attributes define the end of the line (300,200)

A Horizontal Line

The following example creates a thick horizontal line from position (0,10) to (250,10):

Here is the SVG code:

Code explanation:

• The <x1> and <y1> attributes define the start of the line (0,10)
• The <x2> and <y2> attributes define the end of the line (250,10)

A Vertical Line

The following example creates a thick vertical line from position (0,0) to (0,200):

Here is the SVG code:

Code explanation:

• The <x1> and <y1> attributes define the start of the line (0,0)
• The <x2> and <y2> attributes define the end of the line (0,200)