Core HTML

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

Quadratic bezier curves are a form of path specification that allows one to specify portions of quadratic paths. The quadratics 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 Q or quadratic command is followed two numbers that indicate the coordinates of the point that is the control point of the first quadratic bezier curve. Since the Q is uppercase, the coordinates are given absolute coordinates. The next pair of numbers indicates the second interpolated point. After this, we can specify the third interpolated point via T, as we do in the first path specification. When we use T, the second control point is given as a symmetric reflection of the first control 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.

SvgQuadPaths.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="M0,100 Q100,0 200,100 T400,100"
        fill="none" stroke="#AAAAAA" stroke-width="2"/>
      <path d="M0,100 L100,0 200,100 300,200 400,100"
        fill="none" stroke="#DDDDDD" stroke-width="1"/>
      <g fill="#666666" >
        <circle cx="0" cy="100" r="4"/>
        <circle cx="200" cy="100" r="4"/>
        <circle cx="400" cy="100" r="4"/>
      </g>
      <g fill="#DDDDDD" >
        <circle cx="100" cy="0" r="4"/>
        <circle cx="300" cy="200" r="4"/>
      </g>
      <text x="50" y="40" fill="#888888">path d="M0,100 Q100,0 200,100 T400,100"</text>

      <path d="M0,300 Q100,200 200,250 300,400 400,300"
        fill="none" stroke="#AAAAAA" stroke-width="2"/>
      <path d="M0,300 L100,200 200,250 300,400 400,300"
        fill="none" stroke="#DDDDDD" stroke-width="1"/>
      <g fill="#666666" >
        <circle cx="0" cy="300" r="4"/>
        <circle cx="200" cy="250" r="4"/>
        <circle cx="400" cy="300" r="4"/>
      </g>
      <g fill="#DDDDDD" >
        <circle cx="100" cy="200" r="4"/>
        <circle cx="300" cy="400" r="4"/>
      </g>
      <text x="0" y="220" fill="#888888">path d="M0,300 Q100,200 200,250 300,400 400,300"</text>
    </g>
  </svg>
</body>
</html>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.