SVG points Attribute

Last Updated : 31 Mar, 2022

The points attribute describes a list of points for the polygon or polyline element. If it contains an odd pair of coordinates, the last one will be ignored.

Elements that are using this attribute:

<polyline> element
<polygon> element

Syntax:

points = numbers

Attribute Values: The points attribute accepts the values mentioned above and described below

numbers: It is the pair of integers separated by a comma and a group of coordinates separated by a space representing an X and a Y coordinate in the user coordinate system. Its default value is considered as none.

The below examples illustrate the use of the points attribute.

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div style="color: green;"> 
        <h1> 
            GeeksforGeeks 
        </h1> 
  
        <h4 style="color: black;"> 
            Using Polyline element 
        </h4> 
  
        <svg viewBox="100 0 520 100" 
            xmlns="http://www.w3.org/2000/svg"> 
            <polyline stroke="green" fill="none"
                points="100,100 150,25 150,75 200,0"/> 
        </svg> 
    </div> 
</body> 
  
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div style="color: green;"> 
        <h1> 
            GeeksforGeeks 
        </h1> 
  
        <h4 style="color: black;"> 
            Using Polygon element 
        </h4> 
  
        <svg viewBox="100 0 520 100" 
            xmlns="http://www.w3.org/2000/svg"> 
            <polygon stroke="green" fill="none"
                points="100,100 150,25 150,75 200,0"/> 
        </svg> 
    </div> 
</body> 
  
</html>