Previous Next

SVG Path

SVG path element is the most powerful element that is used to creates different types of paths such as line paths, curves, arcs etc.

Syntax

<path d="data"></path>

You can define one or more than one paths elements in adocument.

Attributes

SVG path has attributes that are used to define extra functionalty of path elemennt such as d, moveTo, lineTo, horizontal lineTo, vertical lineTo, cubic curve, smooth curveto, quadratic bezier curve, smooth quadratic bezier curveto, ellipticle arc, close path etc.

D or d

D or d attribute is used in path data, usaully is a set of commands like moveto or lineto.

Syntax

<path d="data"></path>

M or m

M or m attribute is used in path data and here M or m means moveTo, this attribute is used to move drawings from one position to an other position, it comes in first or in beginning of paths to define position of drawing.

Syntax

<path d="m x y"></path>

L or l

L or l attribute is used in path data and here L or l means lineTo, this attribute is used to draw line from current position to a new position.

Syntax

<path d="l x y"></path>

H or h

H or h attribute is used in path data and here H or h means horizontal lineTo, this attribute is used to draw a line in horizontal direction, it takes only one argument since it moves in single direction.

Syntax

<path d="h x"></path>

V or v

V or v attribute is used in path data and here V or v means vertical lineTo, this attribute is used to draw a line in vertical direction, it takes only one argument since it moves in single direction.

Syntax

<path d="v y"></path>

C or c

C or c attribute is used in path data and here C or c means cubic curve, this attribute takes two control points for each point. Therefore to create a cubic bezier you need to specify three sets of co-ordinates.

Syntax

<path d="c x1 y1 x2 y2 x y"></path>

S or s

S or s attribute is used in path data and here S or s means smooth curveto, this attribute is used to create same type of curve as cubic produces.

Syntax

<path d="s x2 y2 x y"></path>

Z or z

Z or z attribute is used in path data, this attribute is used to draw a straight line from the current position back to the first pointof the path, it is often placed at the end of path.

Syntax

<path d="z"></path>

You can create any number of SVG paths.

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <svg> element to draw svg paths on webpage
• Give width and height of 200 200 respectivelly
• color should be orange

save file with name task.html or task.htm and then open it using any browser and see results.

SVG Code Generators

Try our SVG generators to practice and generate SVG code in real time.

Previous Next