Please can anyone explain the SVG polygon points? [closed]

Question

I need to know SVG polygon points, how those works. Can anyone give clear explanation or other links where I can get clear explanation.

IF possible explain how these polygon points working internally, I mean what algorithem it was using?

 <svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

Update-: The main intention behind this question is how polygon taking the points attributes and how it was rendering in the browser as polygon?

Answer 1

The polygon takes a list of points (ref here) which are the X and Y coordinates of each pair.

In your example, you have

points="100,10 40,198 190,78 10,78 160,198" 

This is five "corners" starting at (100,10), with a line from there to (40, 198) and so on. The final point joins the first point to make a closed polygon.

The docs tell us "Each point is define by a X and a Y coordinate in the user coordinate system." The units are pixels and "the initial viewport coordinate system (and therefore the initial user coordinate system) has its origin at the top/left of the viewport, with the positive x-axis pointing towards the right, the positive y-axis pointing down" (from here)

So, 100, 10 is 100 pixels right and 10 down.