Simple Riches: <pattern> <opacity> <transform> & <use>


SVG offers a large and deep set of tools, both in itself and through related technologies, like ECMA Script and SMIL, to develop a visual field in which to present textual and graphical information. Within those tools there are four I would like to explore in some detail. These are pattern, opacity, transform and use. They are all simple to work with and apply and when added to and played off against each other offer great visual possibilities - ways to both satisfy the eye and connect to and echo the work of visual artists from many different times, places and traditions. They provide ways to make an SVG site exciting to look at as well as to use - giving visual pleasure by good design


Patterns are, for me, one of the most important elements in SVG. Important because they allow for an efficient way to make a visually rich and subtle surface on which to present other information, a surface which makes the experience of using and looking at the site better by making it less bleak and bare, and more subtle and refined. They can be delicate and unobtrusive or bold and graphic and, in either case, engaging and attractive.


Opacity is useful in developing visually interesting and complex sites because they allow for the layering of color and shape which lets the viewer see and see through, to penetrate the surface and have a sense of space suffused with light. It allows for a wide range of effects from the close melding to the clear separation of shapes with other shapes and with a background pattern. Like pattern, it is a way to exploit "the painter's model" that central to SVG.


Transform is to shapes what opacity is to color: it allows for playing out many ways of similarity and difference, of variations on a form through scaling, rotating, moving and skewing. The possibilities of making changes on a theme by using these variables are nearly endless and offer a wonderful cluster of possibilities.


Repeating, reusing and varying of images can give visual richness and variety without making large demands on storage space or processor cycles. Use can create the kinds of visual environments which are like those of the textile and printing arts, rather than the photographic ones, the experiences which rely of repetition and rhyme, rather than of a tonal field.

A note on color

Basic to so much design and these "simple riches" is color. SVG handles it beautifully by allowing it to mixed and modified in so many different ways and rendering it so beautifully. The interaction of color deserves attention because it has a pervasive effect on feelings, the experience of grasping information and gives pleasure. It shapes our attitudes, our reactions and how we respond to the information we interact with.

Presentation slides:

For additional examples here are my presentation slides shown in Vancouver at SVG Open 2003: