SVG - Line 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).

Lines are a form of path specification that allows one to specify portions of linear paths. The lines are specified inside the path tags. Inside the path tag, we begin with a M that indicates a move-to that specifies the coordinates of where to begin drawing. The l or line-to command is followed two numbers that indicate the coordinates of the point that we draw to with a linear path. Since the l is lowercase, the coordinates are relative to the original coordinates after the M. We can also continue to add more points to create a polyline path that can be filled with a color, as we do black path below.

Note that the use of uppercase letters indicates absolute coordinates, while lowercase letters indicate relative values. This is why in path d="M 100 50 l 150 250" the 100, 50 is absolute and the 150, 250 is relative to that. Also, the outermost g tag specifies a translation transform that applies to all of the elements that are inside of it.

SvgLines.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="400" height="400">
    <g transform="translate(10,10)">
      <path d="M 50 50 l 0 200 200 0" fill="red" stroke="#000000" stroke-width="3"/>
      <path d="M 0 200 l 300 -100" stroke="lightblue" stroke-width="5"/>
      <path d="M 100 50 l 150 250" stroke="green" stroke-width="1"/>
      <text x="70" y="40" fill="red">path d="M 50 50 l 0 200 200 0"</text>
      <text x="0" y="220" fill="lightblue">path d="M 0 200 l 300 -100"</text>
      <text x="130" y="80" fill="green">path d="M 100 50 l 150 250"</text>
    </g>
  </svg>
</body>
</html>

Core HTML

SVG - Line Paths

SvgLines.html

Output