SVG paths represent the outline of a shape. This shape can be filled, stroked, used to navigate text, become a pattern, and/or used as a clipping path.
When we write SVG by hand in our HTML or embed the XML code from vector graphic software, the code details of the paths that make up our graphics are exposed. This way of utilizing SVG is referred to as “inline” and this handy post over at CSS-Tricks should help get you started on that and other SVG concepts.
Depending on the shapes used, these paths can get fairly complex, especially when there are many curves involved. Understanding what exactly is going on “behind the scenes” here can be really beneficial in terms of editing these graphics and eliminating any surprises when they are rendered.
In this article, I’ll review the possible commands that reside within the path data of SVG, with a special focus on an image of a banana and a number of diagrams for further understanding.
The path Element
The <path> element within <svg> contains the command details that a path takes to complete a shape, which can consist of both straight lines and curves.
While the <path> element accepts a number of attributes, in this article I’ll strictly focus on the commands within the path data.
Path Data
The path data makes up the specific information that defines a graphic’s path. This data can include a start and end point, subpaths, and curves through moveto, lineto, closepath, and various curve commands.
This data is contained within a d attribute in the <path> element:
Continue reading %A Closer Look at SVG Path Data%
