HTML 5

Scalable Vector Graphics - Path 3

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 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

  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: 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
Want to read more.
 
 
Thank you, keep learning and sharing.
 
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs