SVG Polyline element
The <polyline> element of SVG in HTML is used to create a shape by connecting lines through different points. It is different from <polygon> as it can be used to create open shapes.
Syntax:
<polyline points="Pair of points required to draw the shape"
stroke="stroke color"
fill="fill color for colored closed shapes">
Attributes:
- points: Pair of points required to draw the shape
- pathLength: It tells the total length of the path.
Few examples are given below for a better understanding of the <polyline> SVG element.
Example 1:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> svg{ background-color: black; } </style> <body> polyline <br> <svg width="200px" height="200px"> <polyline points="100,150 10,250 180,17 50,100" fill="green" stroke="yellow" stroke-width="5"> </svg><br> polygon <br> <svg width="200px" height="200px"> <polygon points="100,150 10,250 180,17 50,100" fill="green" stroke="yellow" stroke-width="5"> </svg> </body> </html> |
chevron_right
filter_none
Output:
Example 2:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> svg{ background-color: black; } </style> <body> polyline <br> <svg width="200px" height="200px"> <polyline points="100,105 180,20 100,17 50,100" stroke="yellow" stroke-width="5"> </svg><br> polygon <br> <svg width="200px" height="200px"> <polygon points="100,105 180,20 100,17 50,100" stroke="yellow" stroke-width="5"> </svg> </body> </html> |
chevron_right
filter_none
Output:
Supported Browsers:
- Chrome
- Edge
- Opera
- Internet Explorer
- Safari
- Firefox
