The SVG Line is used to draw lines in SVG format. Element <line> has other attributes too like a stroke for specifying the color of the stroke and the stroke width for specifying the thickness of the width.
Attributes
- x1: Defines the starting point of the line on the x-axis.
- y1: Defines the starting point of the line on the y-axis.
- x2: Defines the ending point of the line on the x-axis.
- y2: Defines the ending point of the line on the y-axis.
- stroke: Specifies the color of the stroke (outline) of the line.
- stroke-width: Specifies the thickness or width of the line.
Example 1: This example shows an SVG <line> element with a stroke color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>SVG Lines</title>
<style>
@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
font-family: 'Poppins', sans-serif;
}
.box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
</style>
</head>
<body>
<div class="box">
<div style="color: green;
font-size: 35px;">
GeeksforGeeks
</div>
<div style="font-size: 30px;">
SVG Lines
</div>
<svg height="200" width="200">
<line x1="15"
y1="15"
x2="150"
y2="150"
stroke="green">
</line>
</svg>
</div>
</body>
</html>
Output:
Example 2: This example shows an SVG <line> element with stroke color and stroke-width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>SVG Lines</title>
<style>
@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
font-family: 'Poppins', sans-serif;
}
.box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
</style>
</head>
<body>
<div class="box">
<div style="color: rgb(25, 124, 25);
font-size: 35px;">
GeeksforGeeks
</div>
<div style="font-size: 30px;">
SVG Lines
</div>
<svg height="200" width="200">
<line x1="150"
y1="15"
x2="15"
y2="160"
stroke="red"
stroke-width="3">
</line>
</svg>
</div>
</body>
</html>
Output:
