SVG Line
Description of the <line> element
The SVG <line> element creates straight lines. Since <line> elements are geometrically one-dimensional, they have no interior area and are never filled. The fill attribute is ignored for this element.
Example of the SVG <line> element:
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>Let’s explain the code above:
- The
x1attribute specifies the starting x-coordinate. - The
y1attribute specifies the starting y-coordinate. - The
x2attribute specifies the ending x-coordinate. - The
y2attribute specifies the ending y-coordinate.
By default, lines are drawn with a black stroke and a stroke width of 1 pixel. You can customize these using the stroke and stroke-width attributes, as shown in the example.
SVG <line> vs SVG <path>
The SVG <line> and <path> elements both draw lines, but they serve different purposes. The <line> element is specifically designed for simple, straight lines and is more semantic and efficient for this task. The <path> element is used to define complex shapes or multiple connected lines and curves. While <path> can draw straight lines, it is generally better to use <line> for basic straight segments and reserve <path> for more complex drawings.
The SVG <line> element also supports the Global Attributes and Event Attributes.
Practice
What are the required SVG attributes for creating a line in HTML?