Scalable Vector Graphics - Path 1

Gopi Chand
9y
5.4k
0
0

Article

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

Want to read more.

Thank you, keep learning and sharing.

Up Next

Ebook Download

View all

Grid structure in css

Read by 1 people

Download Now!

Learn

View all