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 " >
< 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:
Last Updated :
15 Jul, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...