Drawing Paths in SVG

Path element in SVG is the most important of all elements. Each shape in SVG graphics is made of path segments. A path can be closed or open. Example of an open path would be a straight line with only one path segment i.e

<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 20 50 L 150 50" style="stroke:black;" />
</svg>

The above svg code shows the simplest example of a path. The d attribute in the above code defines the path. The two values after M are the x and y co-ordinates of the starting point of the path. L specifies to draw a line and the values after L are the x and y co-ordinates of the ending point of the line. An example of a closed path would be a triangle, a square or a rectangle etc. Let us draw a rectangular closed path.

<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 20 50 L 150 50 L 150 100 L 20 100 Z" 
style="stroke:black;fill:none;" />
</svg>

You can notice in the above path code we have drawn 3 lines but a rectangle has 4 lines, it is because of the Z command specified at the end of the path which is used to close the path. The Z command in the above path will join the 3rd line to the starting point of the path M(x,y).

A couple of more commands are:

H - used to draw a horizontal line.
V - used to draw a vertical line.

Cubic Bezier Path:

A cubic bezier is a bit more complex path segment. It's used to draw curves of a path. We need to define 3 things for a cubic bezier:

1. Starting Point Co-ordinates.
2. End Point Co-ordinates.
3. Control Points of the curve.

The path segment starts with M followed by the co-ordinates of the starting point of the path. Then we specify cubic bezier (C) command followed by the co-ordinates of the two control points used to control the curve and in the end the co-ordinates of the end point of the path segment.

The first control point is related to the start point and the second control point is related to the end point of the path. If we keep the co-ordinates of the first control point equal to the co-ordinates of the start point and the co-ordinates of the second control point equal to the co-ordinates of the end point the resulting path will be a straight line i.e

<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 20 50 C 20 50 150 50 150 50" style="stroke:black;fill:none;" />
</svg>

Now if we move up both control points, a curve will start appearing in upward direction. If you keep on moving the control points upward the curve will increase along with it.

<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 20 50 C 20 10 150 10 150 50" style="stroke:black;fill:none;" />
</svg>

Similarly if you want a curve in downward direction, keep the control points below the start and end points. Just play with the control points a bit to get different curves.

Stay tuned for more lessons...

Related Posts
Draw a glowing lamp using SVG
SVG Filter Effects
Drawing a cup using SVG Path Element
SVG Text Element And Attributes
Basics of SVG Graphics