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.
<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.
- SVG Polyline element
- SVG defs Element
- SVG polygon Element
- SVG marker element
- SVG <desc> element
- SVG <a> Element
- SVG <clipPath> Element
- HTML | SVG-Basics
- How to set the SVG background color ?
- SVG viewBox Attribute
- HTML | SVG pattern
- How to remove SVG content?
- Difference between SVG and HTML 5 Canvas
- How to Create Custom Shape Button using SVG ?
- How to change SVG color ?
- How to use SVG Patterns as the background ?
- How to use z-index in svg elements ?
- SVG Stroke Properties
- D3.js svg.axis() Function
- SVG Blur Effects
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.