वच्मि - SVG Path Element

Vachmi

The <path> element is used to draw advanced shapes.
Path element is the most versatile and advanced element in SVG. It allows for drawing images by combining lines, arcs and curves.

Here is the SVG code to draw this path.

Code Explanation

• The shape of path element is defined by attribute d.

• Commands such as M and A inside d attribute are responsible to draw lines and arcs.

Attributes

points - The points attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon.

It can accept a number as its value.

More about Path

• The d attribute contains a series of commands and parameters used by those commands.

• Each command is identified by a letter. e.g. M, A, L etc.

• Each command comes in 2 variants - a lowercase letter and an uppercase letter.

• An uppercase letter specifies absolute coordinates on the page, and a lowercase letter specifies relative coordinates
(e.g., move 10px up and 7px to the left from the last point). The following commands are available for path data:

    ► M = Move To
    ► L = Line To
    ► H = Horizontal Line To
    ► V = Vertical Line To
    ► C = Curve To
    ► S = Smooth Curve To
    ► Q = Quadratic Bezier Curve
    ► T = Smooth Quadratic Bezier Curve To
    ► A = Elliptical Arc
    ► Z = Close Path

Move To Command

The first command inside path elements' d attribute should always be a move command. It takes two parameters, a coordinate (x) and coordinate (y) to move to. This is done using M command.
This indicates where the drawing should start from.

M x y
or
m x y

The below example moves the start point of the drawing to the point 10,10. The next drawing command will start from that point.

Line To Command

There are three commands to draw a Line in SVG.
The most generic command is L. It takes two parameters (x and y coordinates of the end point of the line) and draws a line from the current position to this point.

L x y
or
l x y

The below example moves the start point of the drawing to the point 10,10. Then it draws a line to point 50,50.

The other two commands are used to draw horizontal and vertical lines.
H draws a horizontal line and V draws a vertical line. Both take only one parameter since they move only in one direction.

H x
or
h x

V y
or
v y

The below example moves the start point of the drawing to the point 10,10. Then it draws a horizontal line to point 50,10. Then it draws a vertical line to point 50,50

Curve To Command

There are two commands to draw curves in SVG.

Quadratic Bezier Curves Q

Q x1 y1, x y
or
q dx1 dy1, dx dy

Here is an example of simple Quadratic Bezier curve.
• The first coordinates 25,25 indicate the start point of the curve and the last coordinates 100,100 specify where the curve should end.
• Coordinates after Q i.e. 50,100 are of the control point.
• Control point along with start and end points decode the shape of the curve.

Quadratic Bezier curve has a shortcut command (T or t) to help smooth the connection between multiple curves.
T or t commands help smoothen the curve by using the reflection of the control point to start the new curve. This way, we do not have to worry about finding the control point of second curve compared to first curve. Browser does the heavy lifitng for us.

While Quadratic Bezier curve is easier to use as it needs only one control point, Cubic Bezier curve offers better flexibility and more control by having two control points.

Cubic Bezier Curves C

C x1 y1, x2 y2, x y
or
c dx1 dy1, dx2 dy2, dx dy

Here is an example of a Cubic Bezier curve.
• The first coordinates 25,25 indicate the start point of the curve and the last coordinates 100,100 specify where the curve should end.
• Coordinates after Q i.e. 50,100 are of the control point.
• Control point along with start and end points decode the shape of the curve.

Cubic Bezier curve also has a shortcut command (S or s) to help smooth the connection between multiple curves.
Like in case of Quadratic Bezier curves, S or s commands help smoothen the curve by using the reflection of the control points to start the new curve. Browser takes care of finding the control points for us.

Elliptical Arcs Command

Other than Bezier curves commands, there is an Arc command that can be used in SVG to draw curved lines.

A rx ry, x-axis-rotation large-arc-flag sweep-flag x y
or
q rx ry, x-axis-rotation large-arc-flag sweep-flag dx dy

Here is an example of simple arc.
• The first coordinates 25,25 indicate the start point of the curve and the last coordinates 100,100 specify where the curve should end.
• The radius of the arc is set by the first two coordinates after A i.e. 10,10
• The first parameter is rx (radius in x-direction) and the second is ry (radius in y-direction).
• Setting rx and ry to the same value will result in a circular arc.
• Setting rx and ry to different values will result in an elliptical arc.