SVG for Web Developers

Shape Elements

SVG has several built-in shape elements. They are:

• <rect>— Rectangle

• <circle>— Circle

• <ellipse>— Ellipse

• <line>— Straight line

• <polyline>— Open shape consisting of straight line segments

• <polygon>— Closed shape consisting of straight line segments

The coding of shape elements looks exactly like other elements we've seen so far with opening and closing tags. Like any element, they contain attributes that further define the shape. The best way to learn about SVG's shape elements is to see them in action, so let's create a simple picture, using common shapes.

The <rect> Element

Let's begin with the <rect> (rectangle) element. We've already seen it in some of our earlier chapters, but now we'll take a closer look.

The <rect> element creates ...