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

Cubic bezier curves are a form of path specification that allows one to specify portions of cubic paths. The cubics 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 C or cubic command is followed four numbers that indicate the coordinates of the two points that are the control points of the first cubic bezier curve. Since the C is uppercase, the coordinates are given absolute coordinates. The next pair of numbers indicates the second interpolated point. After this, we can specify the fourth control point via S, as we do in the first path specification. When we use S, the third control point is given as a symmetric reflection of the second control point. Finally, we add on the last interpolation point. Alternatively, we can continue to add more control points, as we do in the second example.

Note that the use of uppercase letters indicates absolute coordinates, while lowercase letters indicate relative values. All of the coordinates in these examples are given in absolute coordinates. Also, the outermost g tag specifies a translation transform that applies to all of the elements that are inside of it.

SvgCubicPaths.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="550" height="450">
    <g transform="translate(10,20)">
      <path d="M0,100 C75,0 150,0 225,100 S375,200 450,100"
        fill="none" stroke="#AAAAAA" stroke-width="2"/>
      <path d="M0,100 L75,0 150,0 225,100 300,200 375,200 450,100"
        fill="none" stroke="#DDDDDD" stroke-width="1"/>
      <g fill="#666666" >
        <circle cx="0" cy="100" r="4"/>
        <circle cx="225" cy="100" r="4"/>
        <circle cx="450" cy="100" r="4"/>
      </g>
      <g fill="#DDDDDD" >
        <circle cx="75" cy="0" r="4"/>
        <circle cx="150" cy="0" r="4"/>
        <circle cx="300" cy="200" r="4"/>
        <circle cx="375" cy="200" r="4"/>
      </g>
      <text x="50" y="20" fill="#888888">path d="M0,100 C75,0 150,0 225,100
        S375,200 450,100"</text>

      <path d="M0,300 C75,200 150,400 225,300  300,400 375,400 450,300"
        fill="none" stroke="#AAAAAA" stroke-width="2"/>
      <path d="M0,300 L75,200 150,400 225,300  300,400 375,400 450,300"
        fill="none" stroke="#DDDDDD" stroke-width="1"/>
      <g fill="#666666" >
        <circle cx="0" cy="300" r="4"/>
        <circle cx="225" cy="300" r="4"/>
        <circle cx="450" cy="300" r="4"/>
      </g>
      <g fill="#DDDDDD" >
        <circle cx="75" cy="200" r="4"/>
        <circle cx="150" cy="400" r="4"/>
        <circle cx="300" cy="400" r="4"/>
        <circle cx="375" cy="400" r="4"/>
      </g>
      <text x="10" y="250" fill="#888888">path d="M0,300 C75,200 150,400 225,300
        300,400 375,400 450,300"</text>
    </g>
  </svg>
</body>
</html>

Core HTML

SVG - Cubic Paths

SvgCubicPaths.html

Output