Scalable Vector Graphics - Path 3

Gopi Chand
Aug 11, 2015
5.8k
0
0
Article

Before reading further, read the following articles.

Now let's proceed to learn curves in SVG Path.

SVG Path curves

Here, the curves used in SVG path are known as “Bezier curves”. A Bezier curve is just a polynomial expression used to describe the curve path. These curves are also drawn using a <path> tag by including absolute and relative positions.

There are the following two types of Bezier curves.

Quadratic Bezier curves

When there are two end points and one control point it is known as Quadratic Bezier curve. It can be drawn using a <path> tag and using the "Q" or "q" command for absolute or relative positions respectively.

Let's see an example to understand Quadratic Bezier curves.

Example 1

<html>
<body>
<svg height="300" width="700">
<path d="M70,70 Q10,150 230,60" style="stroke:red; stroke-width:3; fill:none;" />
</svg>
</body>
</html>

Output

quadratic Bezier curve imae

Note: Control point is the point of the bending of the curve. The specific bending depends on the control point.

Example 2

The following shows Quadratic Bezier curves with various bending:

<html>
<body>
<svg height="300" width="700">
<path d="M30,30 Q20,130 220,50" style="stroke:blue; stroke-width:3; fill:none;" />
<path d="M90,40 Q10,20 230,40" style="stroke:orange; stroke-width:4; fill:none;" />
<path d="M210,65 Q150,130 350,60" style="stroke:lime; stroke-width:5; fill:none;" />
</svg>
</body>
</html>

Output

Quadratic Bezier curves

Example 3

Note: If we draw a line from the starting point A to the control point C and another line from the control point C to the end point B then the line from the mid (E) of the first line to the mid (F) of the second line will be a tangent (EF) of the curve that touches the curve at point D.

<html>
<body>
<svg height="400" width="450">
<path d="M 100 350 l 150 -300" stroke="lightgrey" stroke-width="2" fill="none" stroke-dasharray="10 3"/>
<path d="M 250 50 l 150 300" stroke="lightgrey" stroke-width="2" fill="none" stroke-dasharray="10 3"/>
<path d="M 175 200 l 150 0" stroke="lightgrey" stroke-width="2" fill="none" stroke-dasharray="10 3"/>
<path d="M 100 350 q 150 -300 300 0" stroke="lime" stroke-width="5" fill="none" />
<g stroke="black" stroke-width="3" fill="black">
<circle cx="100" cy="350" r="3" />
<circle cx="250" cy="50" r="3" />
<circle cx="400" cy="350" r="3" />
<circle cx="175" cy="200" r="3" />
<circle cx="250" cy="200" r="3" />
<circle cx="325" cy="200" r="3" />
</g>
</svg>
</body>
</html>

Output

curve

Cubic Bezier curves

Curves with two control points are known as a Cubic Bezier curve.

It can also be drawn using a <path> tag and using the "C" or "c" command.

Let's see an example of it.

Example 4

<html>
<body>
<svg height="400" width="450">
<path d="M50,150 C40,20 260,20 250,150" stroke="tomato" stroke-width="2" fill="none""/>
<g stroke="black" stroke-width="3" fill="black">
<circle cx="50" cy="150" r="3" />
<circle cx="250" cy="150" r="3" />
</g>
<g stroke="grey" stroke-width="2" fill="lightgrey">
<circle cx="70" cy="70" r="3" />
<circle cx="230" cy="70" r="3" />
</g>
</svg>
</body>
</html>

Output

run

The following are some more examples to make it completely understandable.

Example 5

<html>
<body>
<svg height="400" width="750">
<path d="M50,100 C80,20 150,130 220,100" stroke="purple" stroke-width="2" fill="none""/>
<path d="M250,30 C150,50 450,50 350,30" stroke="red" stroke-width="2" fill="none"" stroke-dasharray="10 3"/>
<path d="M370,100 C350,50 540,150 520,100" stroke="skyblue" stroke-width="2" fill="none""/>
<g stroke="grey" stroke-width="3" fill="lightgrey">
<circle cx="50" cy="100" r="3" />
<circle cx="220" cy="100" r="3" />
<circle cx="250" cy="30" r="3" />
<circle cx="350" cy="30" r="3" />
<circle cx="370" cy="100" r="3" />
<circle cx="520" cy="100" r="3" />
</g>
</svg>
</body>
</html>