SVG <path>
SVG Path - <path>
The <path> element is used to define a path.
Paths are used to create simple or complex shapes combining several straight or curved lines.
The <path> element has one basic attribute
that defines the points and other commands of how to draw the path:
| Attribute | Description |
|---|---|
| d | Required. A set of commands which define the path.
The following commands are available for path data:
Note: All of the commands above can also be expressed in lower case. Upper case means absolutely positioned, lower case means relatively positioned. |
A Simple Path
The example below defines a path that starts at position 150,5 with a line to position 75,200 then from there, a line to 225,200 and finally closing the path back to 150,5:
Here is the SVG code:
Example
<svg height="210" width="400" xmlns="http://www.w3.org/2000/svg">
<path d="M150 5 L75 200 L225 200 Z"
style="fill:none;stroke:green;stroke-width:3" />
</svg>
Try it Yourself »
A Bézier Curve
Bézier curves are used to model smooth curves that can be scaled indefinitely. Generally, the user selects two endpoints and one or two control points. A Bézier curve with one control point is called a quadratic Bézier curve.
The following example creates a quadratic Bézier curve, where A and C are the start and end points, B is the control point:
Here is the SVG code:
Example
<svg height="400" width="450" xmlns="http://www.w3.org/2000/svg">
<!-- Draw the paths -->
<path id="lineAB" d="M 100 350 l 150 -300"
stroke="red" stroke-width="4"/>
<path id="lineBC" d="M 250 50 l 150 300"
stroke="red" stroke-width="4"/>
<path id="lineMID" d="M 175 200 l 150 0"
stroke="green" stroke-width="4"/>
<path id="lineAC" d="M 100 350 q 150 -300
300 0" stroke="blue" stroke-width="4" fill="none"/>
<!-- Mark relevant
points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA"
cx="100" cy="350" r="4" />
<circle id="pointB" cx="250" cy="50" r="4" />
<circle id="pointC" cx="400" cy="350" r="4" />
</g>
<!-- Label the
points -->
<g font-size="30" font-family="sans-serif" fill="green"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text
x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
Try it Yourself »
Complex? YES!!!! Because of the complexity involved in drawing paths it is highly recommended to use an SVG editor to create complex graphics.
