SVG Line

Description of the <line> element

The SVG <line> element creates lines. Since the <line> elements are geometrically one-dimensional single lines, they do not have any interior. Therefore, they are never filled.

Example of the SVG <line> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="310" width="400">
      <line x1="50" y1="30" x2="300" y2="300" style="stroke:rgb(8, 112, 177);stroke-width:3" />
    </svg>
  </body>
</html>

Try it Yourself »

Let’s explain the code above:

The x1 attribute specifies the beginning of the line on the x-axis.
The y1 attribute specifies the beginning of the line on the y-axis.
The x2 attribute specifies the end of the line on the x-axis.
The y2 attribute specifies the end of the line on the y-axis.

SVG Line vs SVG Path

The SVG <line> and <path> elements are similar. However, they have some differences. Particularly, the <line> element draws a single straight line, and the <path> element draws the path of a shape or a line. Moreover, with it, you can draw any shape or line. So it’s more suitable to use the SVG <path> element.

The SVG <line> element also supports the Global Attributes and Event Attributes.

Practice Your Knowledge

What are the required SVG attributes for creating a line in HTML?

<x1> – This attribute defines the start of the line on the x-axis.

<x2> – This attribute defines the end of the line on the x-axis.

<r> – This attribute defines the radius of a circle.

<y1> – This attribute defines the start of the line on the y-axis.

<y2> – This attribute defines the end of the line on the y-axis.

<cx> – This attribute defines the x coordinate of the center of the circle.

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

HTML Basics

❮ Prev Next ❯

Do you find this helpful?