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 -

	<line x1="x-start-pos" y1="y-start-pos" x2="x-end-pos" 
		y2="y-end-pos" stroke="crimson" 

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>
		<style> svg {border: 1px solid blue;} </style>
		<svg height= "110" width="300">
			<line x1 ="10" y1="10" x2 ="200" y2 ="100"
			style="stroke:pink; stroke-width:2;"/>

Output -