Basic Shapes

Rectangles, Circles, Ellipses and Polygons

<rect> takes a top-left x, y, a width, a height and optional corner radii rx, ry (give one and the other copies it). <circle> takes a center cx, cy and radius r; <ellipse> takes the center and radii rx, ry. <polygon> joins its points and closes the shape. The default fill is black and the default stroke none.

The four closed basic shapesHTMLLive
<svg width="610" height="110" stroke="#263238" stroke-width="3">
  <rect x="10" y="15" width="130" height="80" rx="14" fill="#1f5f8b"/>
  <circle cx="210" cy="55" r="45" fill="#e09a10"/>
  <ellipse cx="330" cy="55" rx="62" ry="35" fill="#3f7d3a"/>
  <polygon points="455,10 494,32 494,78 455,100 416,78 416,32" fill="#5b3f99"/>
  <polygon points="555,12 566,42 598,43 572,63 581,93 555,75 529,93 538,63 512,43 544,42"
           fill="#b5452f"/>
</svg>
Browser output of Listing 1.4
Browser output of 4

The shapes inherit the stroke set on <svg>, and the stroke is centered on each outline, half inside and half outside. The star alternates ten points between radius 45 and 18, 36 degrees apart: the usual recipe for stars and regular polygons.