- SVG Tutorial
- SVG - Home
- SVG - Overview
- SVG - Shapes
- SVG - Text
- SVG - Stroke
- SVG - Filters
- SVG - Patterns
- SVG - Gradients
- SVG - Interactivity
- SVG - Linking
- SVG Demo
- SVG - Loaders
- SVG - Dialog
- SVG - Icons
- SVG - Clock
- SVG - Drag
- SVG - Key point
- SVG - Maps
- SVG - amChart
- SVG - Graph
- SVG - Flat Surface Shade
- SVG - Image Filter
- SVG - Text Effects
- SVG - Text With CSS Effects
- SVG - Arrow Effects
- SVG - Brand Effects
- SVG - Gooey Effects
- SVG - Gradients Effects
- SVG - Playful Effects
- SVG - Scroll Effects
- SVG - Side Show Effects
- SVG - Tab Effects
- SVG - Raphael.js Effects
- SVG - Velocity.js Effects
- SVG - Walkway.js Effects
- SVG - zPath.js Effects
- SVG - Vague.js Effects
- SVG - Transformation Effects
- SVG - Full Screen Overlay Effects
- SVG - Lazylinepainter.js Effects
- SVG - Demo Game
- SVG - Real Time SVG AD
- SVG Useful Resources
- SVG - Questions and Answers
- SVG - Quick Guide
- SVG - Useful Resources
- SVG - Discussion
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.
To Continue Learning Please Login
Login with Google