The Illustrator SVG Format plug-in defines all vector shapes as path data. Your shapes created in Illustrator are expressed in the form <path d="pathdata">. The "style= " attribute defines properties and values associated with the element to which it is attached. The "d= " attribute defines the points making up the path. The path's fill and stroke properties are referred to in a "class" definition; Illustrator defines fill and stroke properties for all the drawn elements (see Cascading Style Sheets). For more detail see the SVG Specification.

There are predefined graphic objects such as <rect/>, <circle/>, <ellipse/>, <polyline/>, and <polygon/>. Because a key optimization technique for SVG is in cutting down character count in the file, substituting path data with predefined objects can be very helpful.

For example, the two samples below describe the same blue circle with a red outline.

<circle style="fill:blue;stroke:red;"
cx="200" cy="200" r="100"/>

<path style="fill:blue;stroke:red;"
d="M200,100c0,55.23-44.77,100
-100,100S0,155.23,0,100S44.77,0,100,
0s100,44.77,100,100z"/>

Next lesson: Text