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:
<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>
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.