Skip to content
Related Articles

Related Articles

Improve Article
SVG Path Element
  • Last Updated : 15 Jul, 2020

SVG stands for Scalable Vector Graphic. The SVG element path is used to define a path that starts from a position and ends to a particular position. SVG path can be used to create any basic shapes.

Syntax:

<path d="Shape of path using keyword like M, L, C etc."
      pathLength="Length of path"
      stroke="stroke color name"
      fill="color name">
</path>

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

  • d: It is used to define the shape of the path.
    • M: It is used for moving a point to a certain location.
    • L: It is used for making a line to a point.
    • C: It is used for making a curve to a 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.

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

Example 1:



HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <svg viewBox="500 500 ">
    <!--Moving point to M10 10 200 200
    making a line to 10 200 200 10 -->
    <path d="M 10 10 200 200 L 10 200 L200 10">
    </path>
  </svg>
</body>
</html>

Output:

Example 2:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 style="color:green">GeeksforGeeks SVG Path</h1>
  <svg viewBox="500 500">
    // Creating a rectangle starting point is 10, 10
    // Making a line to 10 100
    // Moving point to 10 100
    // Making line to  100 100
    // Moving point to 100 100
    // Making line to  100 10
    // Moving point to 100 10
    // Making line to  10 10 -->
    <path d="M 10 10 L10 100 M10 100 L100 100 M100 
          100 L100 10 M100 10 L10 10" stroke="black">
    </path>
  </svg>
</body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :