Scalable Vector Graphics - Path 2

Before moving further, read the following articles:

• Overview of Scalable Vector Graphics (SVG)
• Scalable Vector Graphics - Rectangle
• Scalable Vector Graphics - Circle
• Scalable Vector Graphics - Ellipse
• Scalable Vector Graphics - Line
• Scalable Vector Graphics - Polyline
• Scalable Vector Graphics - Polygon
• Scalable Vector Graphics - Path 1

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.

Output



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.
Output



Example 3

Large – arc – flag = 0.