SVG - Path
<path> element is used to draw a connected straight lines.
Declaration
Following is the syntax declaration of <path> element. We've shown main attributes only.
<path d="data" > </path>
Attributes
Sr.No. | Name&Description |
---|---|
1 | d − path data,usually a set of commands like moveto, lineto etc. |
<path> element is used to define any path. Path element uses Path data which comprises of number of commands. Commands behaves like a nip of pencil or a pointer is moving to draw a path.
Sr.No. | Command & Description |
---|---|
1 | M − moveto − move from one point to another point. |
2 | L − lineto − create a line. |
3 | H − horizontal lineto − create a horizontal line. |
4 | V − vertical lineto − create a vertical line. |
5 | C − curveto − create a curve. |
6 | S − smooth curveto − create a smooth curve. |
7 | Q − quadratic Bezier curve − create a quadratic Bezier curve. |
8 | T − smooth quadratic Bezier curveto − create a smooth quadratic Bezier curve |
9 | A − elliptical Arc − create a elliptical arc. |
10 | Z − closepath − close the path. |
As above commands are in Upper case, these represents absolute path. In case their lower case commands are used, then relative path is used.
Example
testSVG.htm<html> <title>SVG Path</title> <body> <h1>Sample SVG Path Image</h1> <svg width="570" height="320"> <g> <text x="0" y="10" fill="black" >Path #1: Without opacity.</text> <path d="M 100 100 L 300 100 L 200 300 z" stroke="black" stroke-width="3" fill="rgb(121,0,121)"> </path> </g> </svg> </body> </html>
In above example,in first shape, M 100 100 moves drawing pointer to (100,100), L 300 100 draws a line from (100,100) to (300,100), L 200 300 draws a line from (300,100) to (200,300) and z closes the path.
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.
Path with opacity
<html> <title>SVG Path</title> <body> <h1>Sample SVG Path Image</h1> <svg width="800" height="800"> <g> <text x="0" y="15" fill="black" >Path #2: With opacity </text> <path d="M 100 100 L 300 100 L 200 300 z" style="fill:rgb(121,0,121);stroke-width:3; stroke:rgb(0,0,0);stroke-opacity:0.5;"> </path> </g> </svg> </body> </html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.