Drawing Primitives

The three main drawing primitives in SVG are:

path

<path d="" />

Paths can be filled and/or stroked (fill first)

text

<text> x=  y=  >Duck</text>

Text can also be filled and/or stroked

image

<image x= y= width= height= xlink:href="duck.jpg" />

Much like the img element in HTML5

There is also a set of basic shapes:

rect

<rect x= y= width= height= rx= ry= />

rx,ry are the curve radii at the corners, either missing means same as other one, click on the rectangle to see different rounding.

circle

<circle cx= cy= r= />

Frequent error is users think the attributes are x and y not cx and cy

ellipse

<ellipse cx= cy= rx= ry= />

line

<line x1= y1= x2= y2= />

Any missing attribute set to 0. Almost always it makes more sense to use a path primitive

polyline

<polyline points= />

Almost always it makes more sense to use a path primitive

polygon

<polygon points= />

Last point is joined to first. Almost always it makes more sense to use a path primitive