Designing SVG Web Graphics

A Simple Square

Now create a simple square in SVG, which you use in a number of examples later on. A square is simply a rectangle with its width equal to its height, so you can use the <rect> element here.

What I want you to create is a simple static logo that at this stage uses only SVG <rect> elements and the <svg> element you learned about in Chapter 2, “SVG Document Overview.”

First, create in Listing 3.3 an image with a single rectangle.

Listing 3.3. (SingleRect.svg)

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="400" height="500"> <rect x="10" y="20" width="100" height="100" style="fill:none; stroke:#000099; stroke-width:4;"/> ...