About Paths
The <path> element works like the pen tool in Adobe Photoshop. You define a starting point where the pen touches down, then define subsequent points from that spot. The pen draws lines between each defined point. Paths can be closed or open, filled, stroked, transformed, and manipulated like any other shape element. Let's take a look at code defining a <path> element.
<path d="M50 50 L65 90 L100 80 L100 200 L250 210" style="fill:none; stroke:black"/>
The code looks like some bizarre form of shorthand, and, in fact, it is! The <path> element requires the d attribute to create shapes. The d attribute stands for path data and consists of coordinates that define the path to create the outline of a shape.
The letters M and L within the ...
Get SVG for Web Developers 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.
