SVG reference

A red POLYGON element and a green PATH element

POLYGON and PATH

• POLYGON and PATH are two different HTML/SVG Tags i.e. two different elements

• A "geometrical polygon shape" can be written in SVG either

  • by joining a sequential set of coordinates; here we use a POLYGON element,
  • or by a sequence of drawing instructions; here we use a PATH element.

This example shows the same geometrical polygon shape drawn in two different ways

• as an SVG POLYGON element in red color
• and a SVG PATH element in blue color.

Differences between POLYGON and PATH

Since these elements are used EXTENSIVELY, it is a good idea to know the differences.

• A POLYGON is specified by mainly providing all coords in sequence (also color, thickness etc);

  • e.g. <POLYGON points="80 80 135 125 155 125 175 80" ...

• On the other hand, a PATH is specified by defining a sequence of drawing instructions;

  • example <PATH d="M80 80 L135 125 L155 125 L175 80 Z" ...
  • A PATH element can encode far more complex segments as compared to the POLYGON element;
  • The segments in a PATH can consist of not only lines-segments but also curves.
  • it is possible to 'lift' the pen and move it elsewhere and continue drawing
  • this means it is possible to unconnected islands of shapes

• Though a POLYGON can only contain straight lines, it is possible to hack a curve out of it by placing a lot of points very close to each other. However that would simply be straight line segments based on a lot of vertices. This will become obvious when one zooms in.

• In contrast, an arc or curve/spline drawn using a PATH element will never show pointiness, no matter how far you zoom.