<line>

The <line> tag is an SVG element used to draw a straight line between two points.

It is ideal for creating graphics, borders, or simple shapes with straight lines.

Structure and syntax of the <line> tag

Structure

It is always used within the HTML <svg> tag.

Here is a basic example:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="10" x2="190" y2="190" stroke="blue" stroke-width="2" />
</svg>

In this example:

• x1 and y1 define the starting point of the line.
• x2 and y2 define the ending point of the line.
• stroke defines the color of the line.
• stroke-width defines the thickness of the line.

Try it yourself:

Advanced example

Here is an example where multiple lines are used to form a pattern:

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <line x1="50" y1="50" x2="250" y2="50" stroke="red" stroke-width="4" stroke-linecap="round" />
  <line x1="50" y1="100" x2="250" y2="100" stroke="green" stroke-width="4" stroke-dasharray="10 5" />
  <line x1="50" y1="150" x2="250" y2="150" stroke="blue" stroke-width="4" stroke-linecap="square" />
</svg>

In this example:

• The first line has rounded ends with the stroke-linecap="round" attribute.
• The second line is a dashed line with the stroke-dasharray="10 5" attribute.
• The third line uses square ends with the stroke-linecap="square" attribute.

Here is the result:

Attributes of the <line> tag

The <line> tag accepts several attributes:

Best practices

• Use lines for separators or to construct more complex graphics.
• Combine different styles with the attributes stroke, stroke-width, and stroke-dasharray to vary the visual effects.
• Pay attention to proportions and spacing for a harmonious design.

Browser compatibility

The <line> tag is widely supported: