Paths in SVG

The shapes that you have seen so far are all very regular shapes—but many shapes used in drawings, diagrams, or maps are not simple shapes such as those. All the shapes you have seen so far can be described using the SVG <path> element, although the syntax shown earlier provides a convenient shortcut to create certain shapes.

The <path> Element

Perhaps the easiest way to visualize what the <path> element does is to think of drawing using a pen on a sheet of graph paper. If you were being instructed how to draw, you might be told where to move the pen, when to apply it to the graph paper, what coordinate to draw to, and whether to use a straight line or a curve.

The <path> element has a complex set of options that we won't cover in ...

Get Special Edition Using XML, Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.