Previous Next

SVG Line

SVG Line is used to draw lines on webpage, it uses <line> element to draw a line. Line has some attributes such as x1, y1, x2, y2, stroke, stroke-width, fill etc. These attributes help line to draw a line from one point to another point or from starting point to end point.

Syntax

<line x1="value" y1="value" x2="value" y2="value" > </line>

You can define one or more than one SVG line in a document.

Stroke Width

Stroke width attribute is used to make line thick and bold.

Syntax

<line x1="value" y1="value" x2="value" y2="value"></line>

You can define one or more than one attributes in SVG line.

You can use SVG line any where within an HTML document.

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <svg> element to draw svg line on webpage
• Give width and height of 300 300 respectivelly to SVG element
• Give 0 100 200 100 values respectivelly to line attributes x1 y1 x2 y2
• Stroke width should be 10
• Stroke color should be olive and fill color should be black

save file with name task.html or task.htm and then open it using any browser and see results.

SVG Code Generators

Try our SVG generators to practice and generate SVG code in real time.

Previous Next