SVG Path

Last Updated:

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
M moveto
L lineto
H horizontal lineto
V vertical lineto
C curveto
S smooth curveto
Q quadratic Bézier curve
T smooth quadratic Bézier curveto
A elliptical Arc
Z closepath

Share this Page

Meet the Author