SVG path

SVG path - <path>

<Path> element is used to define a path.

The following command can be used to route data:

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bezier curve
• T = smooth quadratic Bezier curveto
• A = elliptical Arc
• Z = closepath

Note: All the above commands allow lowercase letters. Capital represents absolute positioning, relative positioning indicates lowercase.

Example 1

The above example defines a path that starts at position 1500, reached position 75200, and then from there to 225 200 in 1500 and finally closed path.

Here is the SVG Code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).

Example 2

Using Bezier curve smooth curve model that can be scaled indefinitely. Under normal circumstances, the user selects one or two end points and two control points. A control point of a Bezier curve that is called a quadratic Bezier curve and the two control points are called cubes.

The following example creates a quadratic Bezier curves, A and C are the starting and ending points, B is a control point:

Here is the SVG Code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).

Complicated? Yes! ! Because when drawing the path complexity, it is strongly recommended to use SVG editor to create complex graphics.