Post

# Scalable Vector Graphics - Path 3

• 11.6k
• 0
• 0

## Introduction

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.

When there are two endpoints and one control point it is known as the 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
1. <html>
2.     <body>
3.         <svg height="300" width="700">
4.             <path d="M70,70 Q10,150 230,60" style="stroke:red; stroke-width:3; fill:none;" />
5.         </svg>
6.     </body>
7. </html>
Output

Note: The 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:
1. <html>
2.     <body>
3.         <svg height="300" width="700">
4.             <path d="M30,30 Q20,130 220,50" style="stroke:blue; stroke-width:3; fill:none;" />
5.             <path d="M90,40 Q10,20 230,40" style="stroke:orange; stroke-width:4; fill:none;" />
6.             <path d="M210,65 Q150,130 350,60" style="stroke:lime; stroke-width:5; fill:none;" />
7.         </svg>
8.     </body>
9. </html>
Output

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.
1. <html>
2.     <body>
3.         <svg height="400" width="450">
4.             <path d="M 100 350 l 150 -300" stroke="lightgrey" stroke-width="2" fill="none" stroke-dasharray="10 3"/>
5.             <path d="M 250 50 l 150 300" stroke="lightgrey" stroke-width="2" fill="none" stroke-dasharray="10 3"/>
6.             <path d="M 175 200 l 150 0" stroke="lightgrey" stroke-width="2" fill="none" stroke-dasharray="10 3"/>
7.             <path d="M 100 350 q 150 -300 300 0" stroke="lime" stroke-width="5" fill="none" />
8.             <g stroke="black" stroke-width="3" fill="black">
9.                 <circle cx="100" cy="350" r="3" />
10.                 <circle cx="250" cy="50" r="3" />
11.                 <circle cx="400" cy="350" r="3" />
12.                 <circle cx="175" cy="200" r="3" />
13.                 <circle cx="250" cy="200" r="3" />
14.                 <circle cx="325" cy="200" r="3" />
15.             </g>
16.         </svg>
17.     </body>
18. </html>
Output

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
1. <html>
2.     <body>
3.         <svg height="400" width="450">
4.             <path d="M50,150 C40,20 260,20 250,150" stroke="tomato" stroke-width="2" fill="none""/>
5.             <g stroke="black" stroke-width="3" fill="black">
6.                 <circle cx="50" cy="150" r="3" />
7.                 <circle cx="250" cy="150" r="3" />
8.             </g>
9.             <g stroke="grey" stroke-width="2" fill="lightgrey">
10.                 <circle cx="70" cy="70" r="3" />
11.                 <circle cx="230" cy="70" r="3" />
12.             </g>
13.         </svg>
14.     </body>
15. </html>
Output

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

Example 5
1. <html>
2.     <body>
3.         <svg height="400" width="750">
4.             <path d="M50,100 C80,20 150,130 220,100" stroke="purple" stroke-width="2" fill="none""/>
5.             <path d="M250,30 C150,50 450,50 350,30" stroke="red" stroke-width="2" fill="none"" stroke-dasharray="10 3"/>
6.             <path d="M370,100 C350,50 540,150 520,100" stroke="skyblue" stroke-width="2" fill="none""/>
7.             <g stroke="grey" stroke-width="3" fill="lightgrey">
8.                 <circle cx="50" cy="100" r="3" />
9.                 <circle cx="220" cy="100" r="3" />
10.                 <circle cx="250" cy="30" r="3" />
11.                 <circle cx="350" cy="30" r="3" />
12.                 <circle cx="370" cy="100" r="3" />
13.                 <circle cx="520" cy="100" r="3" />
14.             </g>
15.         </svg>
16.     </body>
17. </html>
Output

If you want to read more.

Thank you, keep learning and sharing.

Recommended Free Ebook
Similar Articles