Curves are produced a few ways with SVG, either via elliptical arcs or Bézier curves. We have seen the use of arcs in previous pages: Arcs #1, Arcs #2, and Arcs #3.
Bézier curves are produced mathematically by first defining 2 end-points, and 1 or 2 control points.
There are 2 types of Bézier curves used in SVG:A line begins as a point at the origin and moves towards the destination point, but during this motion it is continuously under the influence of the control point/s. This is what produces a smooth, continuous curve.
Control points can be thought of as magnets affecting the point as it moves.
The relative distance of the control point/s from and orientation to the end points determines the effect they have.
In order to produce both a Cubic version and an exact Quadratic version, we would have to do some calculations to place the control points correctly.
Here are some references:
What makes the curve instead of a straight line, is the use of c or C in the path statement.
This command is then followed by 3 coordinate pairs:
This makes a Cubic Bézier curve.
As in other path commands, upper case refers to absolute coordinates, and lower case refers to relative coordinates.
The red dots represent the start and end points - orange dots represent control points.
Blue lines show the relevant connection between end points and control points.
In this code 10,55 and 100,55 are the end points of the line; 15,5 and 100,5 are the control points.
In Example 1, the control points pull the curve up, but in Example 2, the curve is pulled down.
Example 3 and Example 4 are similar curves being generated, but oriented horizontally.
Example 4 (code below), shows us how to achieve this.
In the bottom-left panel Example 5 shows what happens when both control points are at the same location. In this case it is halfway between the 2 end points horizontally.
Example 6 is a Quadratic Curve with 1 control point, also at the midpoint horizontally, as shown. Note the similarity to the Cubic version.
Note that the control point (orange circle) is positioned in exactly the same position as the control points in the Cubic example. However, the shape of the curve is different than the Cubic version.
The last panel shows how increasing the horizontal distance between control points affects a curve. Example 7 shows control points 10, 40, and 80 pixels apart. The vertical distance between the end points and control points remains the same however.