Summary -

In this topic, we described about the SVG Paths with detailed example.

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 -

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>

Output -