O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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;"/> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required