main_leaderboard, all: [728,90][970,90][320,50][468,60]

SVG <path>

SVG Path - <path>

The <path> element is used to define a path.

The following commands are available 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 of the commands above can also be expressed with lower
letters. Capital letters means absolutely positioned, lower cases means relatively positioned.

Example 1

The example below defines a path that starts at position 150,0 with a line to position 75,200
then from there, a line to 225,200 and finally closing the path back to 150,0:

Here is the SVG code:

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

Example 2

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
and the kind with two control points is called cubic.

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:

Complex? YES!!!! Because of the complexity involved in drawing paths it is
highly recommended to use an SVG editor to create complex graphics.