SVG Polyline

Last Updated:

How to Draw a Polyline?

The <polyline> SVG element that draws a straight lines connecting several points.

In this example, we will draw a long N by using <polyline> SVG element.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg polyline{ fill:none; stroke:red; stroke-width:2; } </style> </head> <body> <svg> <polyline points="0,100 50,25 50,75 100,0" /> </svg> </body> </html>

How to Draw Steps?

In this Example, we will draw steps by using <polyline> SVG element.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg polyline{ fill:none; stroke:red; stroke-width:2; } </style> </head> <body> <svg height="100" width="100"> <polyline points="0,20 20,20 20,40 40,40 40, 60 60,60 60,80 80, 80 80, 100"/> </svg> </body> </html>

Attributes Value

AttributeExplanation
points This attribute specifies the list of points required to draw the polyline.

Share this Page

Meet the Author