Path is the most complex of all the shape elements in SVG. By using path, you are creating a structure freehand. In other words, it's like drawing your own unique design. To use path effectively, you must follow the attributes and their meanings. SVG provides specialized attributes for path that direct the line movement. For example, to create an arc or curve, you could use the attribute 'curveto.' Once you learn the path attributes, drawing unique shapes with SVG will be no problem.
Path Element
Path provides a way to custom design shapes but follows much of the same basic rules as other SVG elements.
<?xml version = "1.0" standalone= "no"?>
This is the basic XML declaration statement with one additional feature. Standalone directs the parser to look for an external file for more information. In SVG, this is a DTD located at W3C.
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
The second line identifies the DTD address for the parser. This line is static, so it never changes.
<svg width= "100%" height= "100%" version= "1.0"
xmlns= "http://www.w3.org/2000/svg">
This is the root element and namespace declaration. The root element will always be 'svg' and the namespace will also be 'http://www.w3.org/2000/svg.' Width and height attributes, when located after the root element, assign characteristics for the entire page. The attributes tell the parser to use 100 percent of the width and height for the page as a whole.
When working with path, you must provide step-by-step instructions for line movement.
<path d="M0 100
There are a few things to take note of in this code. The 'd' attribute signifies the beginning of the line. 'M' is the attribute for moveto. This sample code tells the parser to start drawing at x coordinate '0' and y coordinate '100,' so at the top of the grid slightly to the right.
<path d="M0 100 L150 300
The parser will add a line that goes to x 150 and y 300. This will slant the line vertically to the right. As with most SVG images, creating is a process of trial and error. Working with coordinates can be difficult to visualize. The best approach is to test as you go. Every time you add a line movement, you should check to make sure the shape is progressing the way you want.
Test and go will require that you complete the code before uploading it. All path lines end with a 'Z.' Just as 'd' signifies the beginning of the line, z closes it.
<path d="M0 100 L150 300 Z" />
Path is able to do much more than shown here. It will take practice to master the art of the path element. For more information on attributes, check out SVG Path Attributes to Draw a Freehand Shape. This lists the attributes and how to handle them.