All those nice basic shapes up until now are easy and quick, but they can’t do everything. For example, points are all connected by straight lines, which means any type of curve is already out of the question.
This advanced functionality is provided by the path element, which has the following syntax:
<path d=”some complex path” />
The d
here stands for data, as you’ll be providing all the path’s data to that attribute. This data, again, comes in the form of lots of points, separated by a whitespace. The difference with polylines, however, is that in front of every point you need to provide the method to use for connecting the previous point with this point. This is called the specifier, and is just a certain predefined letter. I’ll provide them all in a table at the end of this chapter, but I first want to give you an idea of how it works before overwhelming you. So, let’s look at an example.
<svg> <path d="M15,15 L60,60 Q120,40 40,10 Z" stroke="red" strokewidth="8" fill="orange"/> </svg>
When a path is drawn, it always starts at the point (0,0)
, and simply moves through this list of points step by step, connecting them all together. The element relies on you completely to make sure the path turns out great – it doesn’t close off the path for you, nor does it automatically smoothen your path. Most paths start with the specifier M
, because quite often you don’t want your path drawing a line between (0,0)
and your first data point.
Specifiers
Some specifiers also require more (or less) parameters than the two coordinates of the point it is attached to, which is why I’ll provide which parameters it takes for every single one.
Specifier 
Arguments 
Name 
Description 


Moveto 
Moves to (x,y) without drawing a line 


Lineto 
Draws a line to (x,y) 


Horizontal Lineto 
Draws a horizontal line to x (keeping the same y as the previous point) 


Vertical Lineto 
Draws a vertical line to y (keeping the same x as the previous point) 


Curveto 
Draws cubic Bezier curve to (x,y). The points (x_{1},y_{1}) and (x_{2},y_{2}) are the start and end control points. 


Smooth Curveto 
Draws cubic Bezier curve to (x,y) The point (x_{2},y_{2}) is the end control point. The start control point is assumed the same as the previous curve. 


Quadratic Bezier Curveto 
Draws quadratic Bezier curve to (x,y). The point (x_{1},y_{1}) is the control point for controlling how the curve bends. 


Smooth quadratic Bezier Curveto 
Draws quadratic Bezier curve to (x,y). Control point is assumed to be the same as the last control point used. 


Elliptical arc 
Draws arc to the point (x,y) The values rx and ry are the radiuses of the ellipse. The xaxisrotation rotates the ellipse the arc is created from (without changing start/end point). The largearcflag (0 or 1) determines how wide the arc is. The sweepflag (0 or 1) determines which way the arc goes (underneath or above). 


Closepath 
Closes the path by drawing a straight line from the current point to the first point. Doesn’t need an argument. 
Each of these also has a lowercase variation, which works exactly the same way, except for one major difference: the points you give as parameters are interpreted as relative to the previous point. The example will demonstrate this as well.
<svg> <! Red line > <path d="M30,30 l60,60" stroke="red" strokewidth="8"/> <! Orange Line > <path d="M120,50 L60,60" stroke="orange" strokewidth="8"/> <! OrangeRed Arc > <path d="M120,120 A10,10 45 0 1 200,140" stroke="red" strokewidth="8" fill="orange"/> </svg>
If you’re wondering what are Bezier curves? I’m planning on creating an indepth tutorial on these one day, as part of a complete vector graphics course, as the subject is too long and difficult to explain here. But, as long as it’s not ready, Google it! For now, just know that they are smooth curves between two points.
Paths are powerful, but complex. I don’t recommend trying to create those from the top of your head – I think it’s much faster and easier to use software that can output SVG files.