SVG Path

How to Draw a Path?

The <path> SVG element is the generic element to define a shape. All the basic shapes can be created with a path element.

In this example, we will draw a right angle triangle by using <path> SVG element.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg path{ fill:green; stroke:red; stroke-width:3; } </style> </head> <body> <svg height="140" width="140"> <path d="M10 10 L10 130 L130 130 Z" /> </svg> </body> </html>

How to Draw a Triangle?

In this example, we will draw a triangle by using <path> SVG element.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg path{ fill:green; stroke:red; stroke-width:3; } </style> </head> <body> <svg height="130" width="155"> <path d="M70 5 L5 120 L150 120 Z" /> </svg> </body> </html>

How to Draw a Heart?

In this example, we will draw a heart by using <path> SVG element.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg path{ fill:green; stroke:red; stroke-width:3 } </style> </head> <body> <svg height="100" width="100"> <path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> </svg> </body> </html>

Attributes Value

AttributeExplanation
Mmoveto
Llineto
Hhorizontal lineto
Vvertical lineto
Ccurveto
Ssmooth curveto
Qquadratic Bézier curve
Tsmooth quadratic Bézier curveto
Aelliptical Arc
Zclosepath

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author