HTML5 SVG Paths
The below instructions are in Capital letter as well as small letters. The Capital letters are for certain place while the lower letters are for qualified position.
- M/m - moveto – To move from one point to another point. We may need to code the moveto at the beginning of the initial data section. There can be several moveto to begin a new subpath. Factors – (x y)+
- L/l - lineto – Get a line using (x,y) organize. Factors – (x y)+
- H/h - Horizontal lineto – Draw a straight-line using x organize. Factors – x+
- V/v - Vertical lineto – Draw a perpendicular line using y organize. Factors – y+
- C/c - curveto – To get three-dimensional Bézier curve. Factors – (x1 y1 x2 y2 x y)+
- S/s - shorthand/smooth curveto – To get easy cubic Bézier curve. Factors – (x2 y2 x y)+
- Q/q - quadratic Bézier curveto. Factors – (x1 y1 x y)+
- T/t - shorthand/smooth quadratic Bézier curveto- Factors – (x y)+
- A/a - elliptical arc – To get an oval curl using x-axis, y-axis, rx, ry,cycle, huge-arc-flag, and clean-flag. Factors – (rx ry x-axis-turning heavy-arc-flag clean-flag x y)+
- Z/z - closepath – To close together the SVG path. Factors – None
Example -
Scenario - Below example describes how to draw a path.
<html>
<head>
<title>SVG PATH</title>
</head>
<body>
<svg width="400" height="250" stroke-width="5" stroke="crimson">
<path d="M340 240 L340 110 H240 0 V0 20" fill="blue"/>
</svg>
</body>
</html>