SVG <path>
SVG path- <path>
<path> Element is used to define a path.
The following command can be used for path data:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic B é zier curve
T = smooth quadratic B é zier curveto
A = elliptical Arc
Z = closepath
Note: all the above commands allow lowercase letters. Uppercase indicates absolute positioning and lowercase indicates relative positioning.
Example 1
The above example defines a path that starts at location 150, arrives at location 75 200, then starts from there to 225 200, and finally closes the path at 150.
Here is the SVG code:
Example
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><pathd="M150 0 L75
200 L225 200 Z"/></svg>
For Opera users: view the SVG file (right-click the SVG drawing preview source).
Example 2
The following example creates a quadratic Bezier curve, where An and C are the start and end points, and B is the control point:
Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font="sans-serif" fill="black" stroke="none"
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>
For Opera users: view the SVG file (right-click the SVG drawing preview source).
Is it complicated? Yes! Due to the complexity of drawing paths, it is strongly recommended that you use the SVG editor to create complex graphics.