Post
Ask Question

Scalable Vector Graphics - Path 2

Before moving further, read the following articles:

Now let's proceed to learn another part of SVG Path, arc.

SVG Path - Arc

All paths are always drawn from the last virtual point to the new start point since each drawing command takes an end point. After executing the command, the virtual point will be located at the end point of that path and hence the next path will start from that point only.

So for drawing arcs, the A or a command is used with the <path> tag and it also includes absolute and relative coordinates depending on the uppercase and lowercase commands respectively.

Let's see a few examples to understand it properly.

Example 1

Absolute positioning.

  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="700">  
  4.             <path d="M50,50 A60,60 0 0,1 130,130" style="stroke:blue; stroke-width:3; fill:none;" />  
  5.             <path d="M250,150 A90,150 0 0,1 150,50" style="stroke:red; stroke-width:3; fill:none;" />  
  6.         </svg>  
  7.     </body>  
  8. </html>   
Output

Absolute positioning

In the preceding example, coordinates (50, 50) and (150, 150) are the starting and ending points of a circular arc respectively. And (250, 150) and (150, 50) are the starting and ending points of the elliptical arc respectively.

The first two parameters, rx=90 and ry=150, are used to set the radius of the arc in the x (rx) and y (ry) direction respectively. If a value of rx is equal to ry, then it results in a circular arc as we can see for the Blue circular arc. And if the value of rx and ry are different then the result ia an ellipse.

The third parameter rotates the arc in the x-axis direction. Usually its value is set to 0 and you do not need to change it.

The fourth and fifth parameters are “large – arc – flag” and “sweep – flag” respectively.

The “large – arc – flag” determines whether the arc drawn is to be smaller or larger to satisfy the starting point and ending point and rx and ry. The “sweep – flag” determines whether the arc is mirrored around the axis going from the starting to the ending point. In other words, it controls the direction of the arc drawn that results in a mirror effect depending on a clockwise or anti-clockwise direction.

Example 2

Relative positioning.
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="700">  
  4.             <path d="M50,80 a100,50 0 1,1 250,50" style="stroke:green; stroke-width:3; fill:none;" />  
  5.             <path d="M400,100 a 100,50 30 1,1 250,50" style="stroke:red; stroke-width:3; fill:none;" />  
  6.             <path d="M400,230 a 100,30 25 1,1 250,50" style="stroke:lime; stroke-width:3; fill:none;" />  
  7.             <path d="M50,250 a 100,50 140 1,1 200,50" style="stroke:orange; stroke-width:3; fill:none;" />  
  8.         </svg>  
  9.     </body>  
  10. </html>   
Output

Relative positioning

Example 3

Large – arc – flag = 0.
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="700">  
  4.             <path d="M40,20 A30,30 0 0,0 100,100" style="stroke:lime; stroke-width:3; fill:none;" />  
  5.             <path d="M130,30 A70,40 0 0,0 250,80" style="stroke:green; stroke-width:3; fill:none;" />  
  6.         </svg>  
  7.     </body>  
  8. </html>   
Output

Output

Example 4

Combination of large – arc – flag = 0 & 1.
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="700">  
  4.             <path d="M40,20 A30,30 0 0,0 70,70" style="stroke:green; stroke-width:3; fill:none;" />  
  5.             <path d="M40,20 A30,30 0 1,0 70,70" style="stroke:lime; stroke-width:3; fill:none;" />  
  6.             <path d="M130,30 A70,40 0 0,0 220,80" style="stroke:lime; stroke-width:3; fill:none;" />  
  7.             <path d="M130,30 A70,40 0 1,0 220,80" style="stroke:green; stroke-width:3; fill:none;" />  
  8.         </svg>  
  9.     </body>  
  10. </html>   
Output

flag

Example 5

Combination of large-arc-flag and Sweep-flag.
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="700">  
  4.             <path d="M40,20 A30,30 0 0,0 70,70" style="stroke:brown; stroke-width:3; fill:none;" />  
  5.             <path d="M40,20 A30,30 0 1,0 70,70" style="stroke:tomato; stroke-width:3; fill:none;" />  
  6.             <path d="M40,20 A30,30 0 1,1 70,70" style="stroke:blue; stroke-width:3; fill:none;" />  
  7.             <path d="M40,20 A30,30 0 0,1 70,70" style="stroke:cyan; stroke-width:3; fill:none;" />  
  8.             <path d="M130,30 A65,40 0 0,0 220,80" style="stroke:orange; stroke-width:3; fill:none;" />  
  9.             <path d="M130,30 A65,40 0 1,0 220,80" style="stroke:yellow; stroke-width:3; fill:none;" />  
  10.             <path d="M130,30 A65,40 0 1,1 220,80" style="stroke:black; stroke-width:3; fill:none;" />  
  11.             <path d="M130,30 A65,40 0 0,1 220,80" style="stroke:grey; stroke-width:3; fill:none;" />  
  12.         </svg>  
  13.     </body>  
  14. </html>   
Output

Combination of large arc flag and Sweep flag

Example 6

Half-filled and stroked shape.
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="700">  
  4.             <path d="M130,30 A65,40 0 0,0 220,80" style="stroke:red; stroke-width:3; fill:orange;" />  
  5.             <path d="M130,30 A65,40 0 1,0 220,80" style="stroke:green; stroke-width:3; fill:none; stroke-dasharray:10 3;" />  
  6.             <path d="M130,30 A65,40 0 1,1 220,80" style="stroke:black; stroke-width:3; fill:none; stroke-dasharray:10 3;" />  
  7.             <path d="M130,30 A65,40 0 0,1 220,80" style="stroke:blue; stroke-width:3; fill:cyan;" />  
  8.         </svg>  
  9.     </body>  
  10. </html>   
Output

stroked shape

Want to read more.
 
Thank you, keep learning and sharing. 


Similar Articles