Post
Ask Question

Scalable Vector Graphics - Path 3

Introduction

 
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.
 
Bezier curves
 
Quadratic 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
 
quadratic Bezier curve imae
 
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
 
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.
  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
 
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
  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
 
run
 
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
 
Output
 
If you want to read more.
 
Thank you, keep learning and sharing.


Similar Articles