Special Edition Using XML, Second Edition

SVG Basic Shapes

SVG provides a number of basic graphic shapes. In earlier examples, you have seen some of these in use—but without any explanation. In this section, each of the basic SVG graphics shapes is introduced.

The <rect> Element

The SVG <rect> element, not surprisingly, creates a rectangular shape. A rectangle has a width and a height, which are described by the width and height attributes on the <rect> element. The rectangle also must have a defined position on the screen: Otherwise, the SVG rendering engine has no way of knowing where on the screen the rectangle should be displayed. The position of a rectangle is defined by the x and y attributes. With those four attributes defined, the SVG rendering engine can display a basic rectangle. ...