34

I would like to learn SVG, and am trying to learn how the same image can be rendered by using either the point (with polygon) or by dynamically by paths (path).

I would like a few examples of the SAME polygon (triangle, square, and pentagon are enough to begin) in BOTH SVG polygon AND SVG path, so that I can compare the code. I can find individual images drawn by either, but none that are the SAME.

chris Frisina
  • 19,086
  • 22
  • 87
  • 167

2 Answers2

72

It's trivial: You can basically take the points attribute of a polygon and turn it into a path's d attribute by prepending M and appending z.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <polygon points="20,20 100,20 100,100 30,110"/>
  <path        d="M20,20 100,20 100,100 30,110z" fill="green" transform="translate(100,0)"/>
</svg>
Thomas W
  • 14,757
  • 6
  • 48
  • 67
4

Both can create shapes.

Polygon will automatically close the shape for you (by returning to the first point) after drawing at least three sides, and is composed of a series of connected straight lines, which means it does not scale well.

Paths can use straight OR curved lines, and do not auto-close the shape for you. Path is probably the most powerful basic shape element in SVG.

Source

TECNO
  • 162
  • 2
  • 3
  • 15
  • 1
    Polygon and Path will scale the exact same for a series of points. That statement should come with further explanation. – QueueHammer Aug 08 '23 at 20:20