SVG Polyline

SVG Element

The SVG Element

The <polyline> element is used to create shapes consisting of one or more straight line segments. It defines an open shape, meaning the last point is not automatically connected back to the first point (unlike the <polygon> element).

Example 1: Creating a Simple Polyline

This example draws a polyline with several connected segments. The points attribute defines the (x,y) coordinates for each vertex of the polyline.

Sorry, your browser does not support inline SVG.

Here is the SVG code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Polyline Example 1</title>
</head>
<body>
  <svg width="500" height="200">
    <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
              style="fill:none; stroke:black; stroke-width:3;" />
  </svg>
</body>
</html>

Code Explanation (Example 1):

• points: A list of (x,y) coordinate pairs. Each pair defines a vertex of the polyline. Coordinates can be separated by commas, spaces, or a combination. For example, "20,20 40,25 ..." defines points (20,20), (40,25), and so on.
• style="fill:none; stroke:black; stroke-width:3;": Styles the polyline. fill:none makes the interior transparent (common for polylines). stroke:black sets the line color to black, and stroke-width:3 sets its thickness to 3 units.

Example 2: Creating a Step-like Polyline

This example demonstrates another polyline, forming a shape resembling steps. It uses a white fill and a red stroke.

Sorry, your browser does not support inline SVG.

Here is the SVG code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Polyline Example 2</title>
</head>
<body>
  <svg width="500" height="180">
    <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
              style="fill:white; stroke:red; stroke-width:4;" />
  </svg>
</body>
</html>

Key Difference from <polygon>: A <polyline> is an open shape. If you want the shape to be automatically closed (a line drawn from the last point back to the first), use the <polygon> element instead.

Application: Polylines are useful for drawing open paths, such as graphs, diagrams, or free-form line art where a closed shape is not required.