SVG - Closed Paths

The acronym SVG stands for Scalable Vector Graphics and refers to graphics that are generated by a geometric specification rather than by pixels, like an image (called rasterized graphics as opposed to the vectorized graphics described here).

The are three basic methods for drawing paths that consist of line segments: paths, polygons, and polylines. Paths are not closed by default, but they can closed by adding "Z" at the end to signal that the path should be closed. Polgons are closed by default with the first point being duplicated as the last point, much like closed paths. Polylines are not closed, but they can be closed by repeating the first two coordinates. This can be done with paths as well, as we demonstrate below. Note that when a path is closed by duplicating its first point, the cap on the first and last point is not the same as it is for polygons and closed paths.

Note that the outermost g tag specifies a translation transform that applies to all of the elements that are inside of it.

SvgClosedPaths.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's HTML</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="420" height="420">
    <g transform="translate(10,10)">
      <path d="M 20 0 L 200 150 380 0 Z" fill="#FFAAAA" stroke="pink" stroke-width="10"/>
      <polygon points="0 20 0 380 150 200" fill="#AAAAFF" stroke="lightblue" stroke-width="10"/>
      <polyline points="400 20 400 380 250 200 400 20"
        fill="#AAFFAA" stroke="lightgreen" stroke-width="10"/>
      <path d="M 20 400 L 200 250 380 400 20 400" fill="#AAAAAA" stroke="gray" stroke-width="10"/>

      <text x="90" y="20" fill="red">path d="M 20 0 L 200 150 380 0 Z"</text>
      <text x="0" y="180" fill="blue">polygon points="0 20 0 380 150 200"</text>
      <text x="80" y="240" fill="green">polyline points="400 20 400 380 250 200 400 20"</text>
      <text x="60" y="380" fill="black">path d="M 20 400 L 200 250 380 400 20 400"</text>
    </g>
  </svg>
</body>
</html>

Core HTML

SVG - Closed Paths

SvgClosedPaths.html

Output