SVG Path Element (original) (raw)

Last Updated : 11 Oct, 2024

SVG stands for **Scalable Vector Graphics. The **SVG element is used to define a path that starts at **one point and ends at another. It allows you to **create various shapes like lines, curves, and custom designs. You can use SVG paths to make basic or **complex shapes, making it a flexible tool for drawing graphics and icons on the web.

**Syntax

**Attributes

This element accepts four attributes as mentioned above and described below:

• **d: Defines the path's shape using commands like M, L, and C. This attribute outlines the path's movement.
  • M (Move To): Moves the starting point of the path to a specific location.
  • L (Line To): Draws a straight line from the current position to a specified point.
  • C (Curve To): Creates a curve to a specified point.
• **pathLength: It is used to define the total length of the path.
• **stroke: It is used to define the stroke color.
• **fill: It is used to define the filling color of the SVG.

Examples of SVG Path Element

Few examples are given below for better understanding of the SVG element.

**Example 1: Drawing a Path with SVG

In this example, we are using the element in SVG to draw a rectangle by connecting specific points with move (M) and line (L) commands. Each point defines the corners of the rectangle, forming its shape.

HTML `

`

**Output:

**Examples: Drawing a Rectangle with SVG Path

In this example, we use the **** element in SVG** to draw a rectangle by connecting points with line (L) commands. The move (M) command positions the cursor at the starting point for drawing the shape.

HTML `

GeeksforGeeks SVG Path

`

**Output: