Summary -

In this topic, we described about the SVG Drawing Line with detailed example.

<svg> with <line> element used to draw a line. Style attribute used to provide the style information like fill colors, stroke and width of the stroke, etc.

A line contains of two points. i.e. starting point and ending point.

Syntax -

<svg>
	<line x1="x-start-pos" y1="y-start-pos" x2="x-end-pos" 
		y2="y-end-pos" stroke="crimson" 
		stroke-width="stoke-width-in-pixels"/>
</svg>

Attribute Value
x1 Specifies the initial point on x-axis.
y1 Specifies the initial point on y-axis.
x2 Specifies the ending point on x-axis.
y2 Specifies the ending point on y-axis.
stroke Specifies the outline color.
stroke-width Specifies the stroke width.

Example -

Below example describes how to draw a line in SVG.
<!DOCTYPE html>
<html>
	<head>
		<style> svg {border: 1px solid blue;} </style>
	</head>
	<body> 
		<svg height= "110" width="300">
			<line x1 ="10" y1="10" x2 ="200" y2 ="100"
			style="stroke:pink; stroke-width:2;"/>
		</svg>
	</body> 
</html>

Output -