Post
Ask Question

Scalable Vector Graphics - Path 1

Introduction

 
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.
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="500">  
  4.             <path d="M20,20 L120, 120" style="stroke:lime; stroke-width:3;" />  
  5.             <path d="M180,20 L70, 110" style="stroke:red; stroke-width:3; stroke-dasharray:10 3;" />  
  6.         </svg>  
  7.     </body>  
  8. </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.
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="500">  
  4.             <path d="M20,20 L120, 20" style="stroke:red; stroke-width:3;" />  
  5.             <path d="M20,20 l20, 120" style="stroke:blue; stroke-width:3;" />  
  6.         </svg>  
  7.     </body>  
  8. </html>   
Output
 
Line with relative
 
Example 3
 
The following draws a rectangle using H & V commands:
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="700">  
  4.             <path d="M20,20 H200,20" style="stroke:green; stroke-width:3;" />  
  5.             <path d="M20,20 V20,120" style="stroke:orange; stroke-width:3;" />  
  6.             <path d="M200,20 V120,120" style="stroke:green; stroke-width:3; stroke-dasharray:10 3;" />  
  7.             <path d="M200,120 H20,120" style="stroke:orange; stroke-width:3; stroke-dasharray:10 3;" />  
  8.             <path d="M220,20 L280,20 H" style="stroke:tomato; stroke-width:3;" />  
  9.             <path d="M220,20 L220,120 V" style="stroke:blue; stroke-width:3;" />  
  10.             <path d="M220,120 L280,120 H" style="stroke:tomato; stroke-width:3;" />  
  11.             <path d="M300,20 L360,20 H" style="stroke:cyan; stroke-width:3;" />  
  12.             <path d="M300,20 L300,70 V" style="stroke:lime; stroke-width:3;" />  
  13.             <path d="M300,70 L360,70 H" style="stroke:blue; stroke-width:3; stroke-dasharray:10 3;" />  
  14.             <path d="M360,70 L360,120 V" style="stroke:lime; stroke-width:3;" />  
  15.             <path d="M360,120 L300,120 H" style="stroke:cyan; stroke-width:3;" />  
  16.         </svg>  
  17.     </body>  
  18. </html>   
Output
 
Drawing rectangle
 
Example 4
 
 The following draws a triangle and square using the Z command.
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="700">  
  4.             <path d="M100,20 L20,120 L180,120 Z" style="stroke:green; stroke-width:3; fill:lightblue;" />  
  5.             <path d="M250,20 L350,20 L350,120 L250,120 Z" style="stroke:red; stroke-width:3; fill:yellow; stroke-dasharray:10 3;" />  
  6.         </svg>  
  7.     </body>  
  8. </html>   
Output
 
Drawing triangle
 
Want to read more. 
 
Thank you, keep learning and sharing. 


Similar Articles