The SVG Coordinate System

---

Using rect to Render Rectangles

Consider the rectangle in Figure 1.2 whose vertices are the four points A(50,50), B(200, 50), D(200, 100), and C(50, 100).

Figure 1.2: A red rectangle.

The following quantities are required in order to specify a rectangle:

1. the upper-left vertex (x,y)of the rectangle

2. the width width

3. the height height

Observe that the situation in which width = height results in a square, which means that the SVG rect element can be used for squares as well as rectangles.

The SVG rect element defines a rectangle by specifying values for the attributes width, height, x, and y. The SVG style element (discussed below) allows you to specify the color of the rectangle and the color and thickness of its perimeter.

The SVG document in Listing 1.2 demonstrates how to draw a red rectangle by means of the SVG rect element.

Listing 1.2 rect1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="100%" height="100%"> <!-- draw rectangle --> <g transform="translate(50,50)"> <rect    x="0" y="0" width="150" height="50"    style="fill:red;"/> </g> </svg> 

Remarks

You can also render the rectangle in Listing 1.2 without the SVG g element as follows:

 <rect    x="50" y="50" width="150" height="50"    style="fill:red;"/>

However, the preceding line is tantamount to specifying a 'hard-coded' rectangle. If you later decide that you want to render the same rectangle elsewhere on the screen, you would need to create a new component with its own hard-coded values.

The SVG transform attribute in an SVG g element can be combined with other transformations that render sophisticated effects with surprising ease. Suffice it to say that it's a good idea to develop the habit of 'wrapping' your components inside an SVG g element.

The SVT rect element also allows you to render rounded rectangles by specifying the value of two optional attributes rx and ry, which represent the x-radius and y-radius, respectively, of the ellipse that 'rounds' the four vertices of the rectangle. If rx and ry are equal to half the value of the attributes width and height, respectively, then the rounded rectangle looks precisely like an ellipse!

In addition to the SVG rect element, rectangles can also be rendered by means of the SVG elements line, polyLine, path, or polygon. In addition to specifying rectangles, these SVG elements can define a broad set of geometric objects, and you'll see more examples of them later in the book.

---