SVG Essentials, 2nd Edition

Chapter 5. Document Structure

We’ve casually mentioned that SVG lets you separate a document’s structure from its presentation. In this chapter, we’re going to compare and contrast the two, discuss the presentational aspects of a document in more detail, and then show some of the SVG elements you can use to make your document’s structure clearer, more readable, and easier to maintain.

Structure and Presentation

As mentioned in Chapter 1, in Basic Shapes, one of XML’s goals is to provide a way to structure data and separate this structure from its visual presentation. Consider the drawing of the cat from that chapter; you recognize it as a cat because of its structure—the position and size of the geometric shapes that make up the drawing. If we were to make structural changes, such as shortening the whiskers, rounding the nose, and making the ears longer and rounding their ends, the drawing would become one of a rabbit, no matter what the surface presentation might be. The structure, therefore, tells you what a graphic is.

This is not to say that information about visual style isn’t important; had we drawn the cat with thick purple lines and a gray interior, it would have been recognizable as a cat, but its appearance would have been far less pleasing. These differences are shown in Figure 5-1. XML encourages you to separate structure and presentation; unfortunately, many discussions of XML emphasize structure at the expense of presentation. We’ll right this wrong by going into detail ...