How element is used with Line Commands and Curved Commands:

 The following commands are available for path data:

• 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
 
Above all commands are in Uppercase which defines the position, if they are in lowercase then it would be relatively positioned commands in HTML Graphics for SVG Path.
In the "d" attribute coordinates are always unit less and in the user coordinate system.
Path generates complex shapes with combination of multiple straight lines and curved lines. Complex shapes can be possible with polylines too; to more understanding view of path can be possible with drawing SVGs using XML editors or Text editors.
 

Line Commands:

 
<path > nodes can be defines by five types in line command. Move To or M, it takes two parameters, X-start coordinate to Y-end coordinate, the line moves from X to Y.
 
Syntax:
M x y
Or
m dx dy
 

Example 1:

In this example we will have a point at (20,20):
  1. <html>  
  2. <head>  
  3. <title> <path> </title>  
  4. </head>  
  5. <body>  
  6. <svg width="200" height="200" >  
  7. <path d="M20 20"/>  
  8. <!-- Points -->  
  9. <circle cx="20" cy="20" r="2" fill="blue"/>  
  10. </svg>  
  11. </body>  
  12. </html>  


Output:

 
 

Example 2:

We will draw a rectangle which contains Horizontal and Vertical Lines. Let’s see how it’s done with different types of lines.
There are three different ways to draw a line: Using Line To command, which is L.
Syntax:
L x y
Or
l dx dy
 
There are two directions for a line: Horizontal and Vertical .
H draws horizontal line, Hence V draws vertical line. If these both commands take a single argument then they will move in single direction only.
Syntax:
H x
Or
h dx
V y
Or
v dy
 

Let’s draw a rectangle which has four different colors of coordinates and having two different lines Horizontal and Vertical:

 
  1. <html>  
  2. <head>  
  3. <title> <path>Lines </title>  
  4. </head>  
  5. <body>  
  6. <svg width="200" height="200">  
  7. <path d="M 100 10 H 100 V 100 H 10 L 10 10"/>  
  8. <!-- Points -->  
  9. <circle cx="10" cy="10" r="4" fill="blue"/>  
  10. <circle cx="100" cy="100" r="4" fill="red "/>  
  11. <circle cx="100" cy="10" r="4" fill="orange"/>  
  12. <circle cx="10" cy="100" r="4" fill="green"/>  
  13. </svg>  
  14. </body>  
  15. </html>  

Output:

 
 

Example 3:

Now, if we wants to shorten the declaration of the path then we will use Close Path-z. This command draws a straight line from the current position back to the first point of the path. There is no difference between uppercase and lowercase command.
Syntax:
Z
Or
z
 

Let’s draw a box 100x100, path will move to (10,10),move to horizontally 100 point to the right, then down move 100 points to left and then back to start again.

  1. <html>  
  2. <head>  
  3. <title> <path>ClosePath-z </title>  
  4. </head>  
  5. <body>  
  6. <svg width="200" height="200">  
  7. <path d="M 10 10 h 100 v 100 h -100 Z" fill="transparent" stroke="black"/>  
  8. <!-- Points -->  
  9. <circle cx="10" cy="10" r="4" fill="blue"/>  
  10. <circle cx="110" cy="110" r="4" fill="red "/>  
  11. <circle cx="110" cy="10" r="4" fill="orange"/>  
  12. <circle cx="10" cy="110" r="4" fill="green"/>  
  13. </svg>  
  14. </body>  
  15. </html>  

Output:

 
 

Summary:

In this article, we discussed about the <path> element to define path, which is useful to draw different types of lines with help of Line Commands. There is also Curved Commands for <path> element; we will discuss it soon by nest article.
I hope that you will get the detailed explanation about Line commands with these examples.
You can fine code and output through the attachments.
 

References:

https://www.w3schools.com/graphics/svg_path.asp
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Comments

Post a Comment

Popular posts from this blog

Python Flow Control Statements

Image
  Introduction   As we now all know  how to declare a variable in Python , the different  Tokens of Python  as well as its  Datatypes . Now, we will use them in some conditional statements and see how Python Programs are implemented with flowcharts and examples.      What are the Flow Control Statements?   A Flow Control Statement defines the flow of the execution of the Program.   There are 6 different types of flow control statements available in Python: if-else Nested if-else for while break Continue Let’s learn about these all statements in detail.   if-else   If-else is used for decision making; when code statements satisfy the condition, then it will return non-zero values as true, or else zero or NONE value as false, by the Python interpreter.   Syntax if (<condition>):         Statement  1          ...   ...
Read more

Django - Environment Setup With First App

Image
  Introduction   Let's start with the setup of the environment in the Django framework while installing it on Windows. The c oding part is almost the same for any OS, either Linux, Windows, or MAC.  Every process is formed in an image which will help us to move through the steps and create our first app. To create a web page or an app, we will choose Visual Studio 2010 as IDE.   First we will start the environment with Django.     As we have discussed in  my previous article , the following commands are used with this sequence.   python --version : Latest version  pip --version: Installer manager django-admin --version:    mkvirtualenv base: When using this command we will create an environment as named "base".    Also we can set the virtual environment wrapper with the help of : pip install virtualenvwrapper-win      So, we can see now  (base)  is the environment where will execute our Django proj...
Read more