Designing SVG Web Graphics

The <path> Element

The <path> element is probably the most important SVG shape, at least in the sense that it is the most versatile. Any 2-dimensional shape that you can draw, an SVG <path> element can describe. Except for the simplest shapes, however, you would be well advised to let a vector drawing package automatically create the code for you.

The following is an example of a <path> element:

<path d="M10,20 L110,20 110,120 10,120" 
style="fill:#000099; fill-opacity:0.1; 
stroke:#000099; stroke-width:4"/> 

The d attribute of the <path> element describes several types of drawing action. The M10,20 means to move to coordinates (10,20) . The L110,20 means to draw a line from the preceding point to coordinates (110,20). The 110,120 means the same ...