Before reading further, read the following articles.
Now let's proceed further to learn SVG Path.
SVG Path
The tag <path> describes a path. A path may consist of lines, arcs, curves and so on with or without fill. It can be stroked or used as input for other tags.
A path can also be used to define the same figures or structures as a line, polyline, polygon, circle, rect and so on tags. It contains a significant attribute “d” that is assigned a string of text that describes the path to be created.
Syntax
<svg>
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
The syntax of path is a little more complex than the previous tags, but also more general. That is why the path tag is probably the most advanced and versatile SVG shape among them all and is very complex to handle.
The commands used in the path tag are as in the following.
| Commands |
Stands for |
Description |
| M |
moveto |
Move from one point to another point |
| L |
lineto |
Create a line |
| H |
horizontal lineto |
Create a horizontal line |
| V |
vertical lineto |
Create a vertical lineto |
| C |
curveto |
Create a curve |
| S |
smooth curveto |
Create a smooth curve |
| Q |
quadratic Bezier curveto |
Create a quadratic Bezier curve |
| T |
smooth quadratic Bezier curveto |
Create a smooth quadratic Bezier curve |
| A |
elliptical Arc |
Create an elliptical arc |
| Z |
closepath |
Close the path |
Note: The preceding commands are in upper case that represents absolute position or path. All the commands can also be expressed with lower case letters that represents relative position or path.
Let's see a few examples of path.
Example 1
In this example we will draw a line that can be done using the L or l command. And we are using the L command for absolute positioning.
- <html>
- <body>
- <svg height="300" width="500">
- <path d="M20,20 L120, 120" style="stroke:lime; stroke-width:3;" />
- <path d="M180,20 L70, 110" style="stroke:red; stroke-width:3; stroke-dasharray:10 3;" />
- </svg>
- </body>
- </html>
Output
![draw a line]()
The preceding example draws one line from the point M (20, 20) to the point L (120, 120) and another line from M (180, 20) to L (70, 110).
Note: All paths will definitely contain a M or m command to initiate the path along with other commands.
Example 2
This example creates a line with
relative positioning.
Here in this example we are using both a L and l command to show the difference between the two. When we use the l command, it draws a line to the relative point passed to the command.
The relative point is the point before the line starts plus the coordinates given to the l command. For example, if the starting point is M (20, 20) and the l command contains (100, 100) coordinates then the line is drawn to the point (120, 120), in other words 20+120, 20+120 = 140,140.
- <html>
- <body>
- <svg height="300" width="500">
- <path d="M20,20 L120, 20" style="stroke:red; stroke-width:3;" />
- <path d="M20,20 l20, 120" style="stroke:blue; stroke-width:3;" />
- </svg>
- </body>
- </html>
Output
![Line with relative]()
Example 3
The following draws a rectangle using H & V commands:
- <html>
- <body>
- <svg height="300" width="700">
- <path d="M20,20 H200,20" style="stroke:green; stroke-width:3;" />
- <path d="M20,20 V20,120" style="stroke:orange; stroke-width:3;" />
- <path d="M200,20 V120,120" style="stroke:green; stroke-width:3; stroke-dasharray:10 3;" />
- <path d="M200,120 H20,120" style="stroke:orange; stroke-width:3; stroke-dasharray:10 3;" />
- <path d="M220,20 L280,20 H" style="stroke:tomato; stroke-width:3;" />
- <path d="M220,20 L220,120 V" style="stroke:blue; stroke-width:3;" />
- <path d="M220,120 L280,120 H" style="stroke:tomato; stroke-width:3;" />
- <path d="M300,20 L360,20 H" style="stroke:cyan; stroke-width:3;" />
- <path d="M300,20 L300,70 V" style="stroke:lime; stroke-width:3;" />
- <path d="M300,70 L360,70 H" style="stroke:blue; stroke-width:3; stroke-dasharray:10 3;" />
- <path d="M360,70 L360,120 V" style="stroke:lime; stroke-width:3;" />
- <path d="M360,120 L300,120 H" style="stroke:cyan; stroke-width:3;" />
- </svg>
- </body>
- </html>
Output
![Drawing rectangle]()
Example 4
The following draws a triangle and square using the Z command.
- <html>
- <body>
- <svg height="300" width="700">
- <path d="M100,20 L20,120 L180,120 Z" style="stroke:green; stroke-width:3; fill:lightblue;" />
- <path d="M250,20 L350,20 L350,120 L250,120 Z" style="stroke:red; stroke-width:3; fill:yellow; stroke-dasharray:10 3;" />
- </svg>
- </body>
- </html>
Output
![Drawing triangle]()
Thank you, keep learning and sharing.