SVG Path
You are Here:
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
| Attribute | Explanation |
|---|---|
| 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 |
Reminder
Hi Developers, we almost covered 91% of SVG Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in SVG.
Please do google search for:
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.
