Professor of art with 45 years of teaching experience. Teaching online since 1995. Background in drawing, painting and photography. Work in computer graphics since 1989, web graphics since 1994. Presently teaching at Penn State University.
Giving Another Look to Scalable Vector Graphics
Variables and Sources
Difficult things work to with or around
Let me begin by giving a bit of my background which can help make clearer where I am coming from and the reasons why I am suggesting that more attention to how graphics can look using the very rich and subtle tools available in SVG.
My education was in art - painting, design, photography, art history and art criticism mostly - and that is what I have taught for the past 45 years. In 1994, I was asked to teach a course, Commentary on Art, at a distance and luckily, for me, that winter Netscape appeared and I was able to use it for the course which I taught in the spring of 1995 - it was first course ever taught anywhere completely on the Web. I have been teaching Web-based classes since, most recently to large enrollment classes of about 200 students. The subject matter the course has been the various aspects of Web graphics and design, art criticism and art history.
From the beginning I have been fascinated by the graphic possibilities of the Web and, like many others, frustrated by the limitations it presented for layout and the use of visual elements and welcomed, with interest, in the years that followed the developments in ways to expand those possibilities with tools like Cascading Style Sheets, the PNG format and Scalable Vector Graphics and the support of them by the different browsers. That has been and continues to be painful in many ways, as you all know, and especially for someone who is very much interested in what a site looks like, as well as what it says and does.
Many of the recommendations have placed an emphasis on the separation of content and presentation, which is on the whole a good thing, but it has seemed to have had the an unfortunate consequence of implying that how a site looks doesn't effect its meaning. As you can imagine that for anyone with my background, this is both regrettable and seems simply wrong.
Form shapes meaning and that what a site looks like is a part of what it has to say. This is why I want to talk about 'another look for SVG' and, more importantly, to show examples of interesting ways to use the visual vocabulary of SVG.
I want to do this because there is so much brilliant, sophisticated work being done using SVG, but almost all of it has been work by programmers whose interests are more in what happens behind the scenes and what things you can make graphics do than in what it looks like - simply put, clever programming and scripting gets more play than the choice of a color, the refinement of a shape or a gently animated transformation.
The separation of content and presentation in theory and practice has made the emphasis on power of accessing information and working with it dynamically pervasive. A glance at the program for this conference makes it clear that look of site based on SVG is a not primary concern for much of this community, understandably since it is mostly a community of computer programmers, not artists and graphic designers.
Looking at what can be done with vector graphics is further complicated by the aesthetic of the photograph, the tonal image, and of 3D modeling, both of which are often seen as the main goals of computer graphics. They have provided exciting and beautiful results - more in photography than 3D modeling, but both are also special cases and recent additions in the global history of image making - photography since the mid-19th century and vanishing point perspective since the early 15th century Europe. Their roles in the global history of visual culture are minor ones, in spite of the fact that they are presently so pervasive.
To make the point dramatically, the representation of shadows almost never occurs in art outside of the European tradition and occurred in Europe only after the 15th century, not because they couldn't be, but because they were seen as incidental and trivial. Most of the art of the world has always be based of stroke and fill, not light and shade - on concept rather than percept - so a specific light source and its consequences, shadows, was neither useful nor interesting.
This means that most art relies on a shallow pictorial space, the interaction of color, line and shape and representation of ideas. All things that Scalable Vector Graphics are designed to do and can do very well, whereas showing a light source and spatial illusion are things SVG struggles to do well.
SVG offers a rich and subtle set of tools to work with - especially with color, patterns, filters and opacity - and can be used to develop graphics to attract and engage the viewer visually and, by suggestion, tactility, even before the viewer is engaged intellectually.
What are the variables that can be work with effectively and where can the designer look for ideas and inspiration?
Pictorial space and the picture plane have been much discussed and argued about for the last 100+ years since Manet used in some of his paintings what one art historian called 'a playing card space' - that is the flat space, rendered without shadows, seen in the a deck of playing cards. This return to pre-Renaissance pictorial space was one of the consuming interests of the most of the early 20th century European artists - Picasso, Matisse, Mondrian, Brancusi and Klee among them. And they often found their inspiration in the art of non-European cultures - especially of Japan and North and sub-Saharan Africa - and in the folk and popular art of Europe.
This space is a shallow one and it is created with simple shapes, color relationships, texture and marks, overlapping forms and transparency. It occurs in all kinds of art and artifacts - it is especially easy to grasp by looking at textiles which weave and stain these element together. It relies on an integration of formal elements on the plane of the picture, textile or other material. Here in western Canada it is possible to see many very beautiful examples in the art of the Northwest Coast native peoples.
It also matters to consider the whole space, the whole screen. That is what the viewer sees and if the graphic is an isolated image it will lose its impact and ability to attract, inform and persuade. An effective image must a part of the total fabric of the site and needs to be integrated into it. Context is in this, as in most things, is of central importance.
For my purpose, one of the best examples of graphics are letters and other forms of writing, like those of the Chinese and Maya - they demonstrate so well how vector graphics can be used. They also show how richly varied basic shapes can be and how these variations effect how we receive the meaning, how form and presentation come together. They also can serve as a reminder that we are dealing with a long history of making marks that carry meaning - the recent reports of the missing tablets in Baghdad of among the earliest examples of writing have made that old news, new news.
The limitations of being able to present both the varied letterforms and other kinds of forms has been a big block to realizing the graphic potential of the Web. For letterforms and many other kinds of glyphs the support in SVG for Unicode and multi-direction writing have opened up possibilities that have long been closed. One small thing I have been able to do - have an o with a micron - ō - on the name of the Japanese poet, Bashō - lets me do something I have been trying to since 1989.
The best SVG graphics primarily flat, and usually great care and attention needs to be given to refinements of form, relationships between shapes, colors and their inner relations and how to weave them all into a whole. They are the patterning of surface like a fine carpet - and serve a similar purpose by enriching our visual environment.
Colors and the ways to vary them in hue, value and saturation, as well as mixing them optically using patterns and opacity, are among the great resources in SVG. To take advantage of all they can do using either RGB or hex colors is a good idea. Using color names makes it difficult to effect the kind of slight, often barely perceptible, changes that can mean so much in presentation, especially when working with compliments and split-compliments. The interaction of color can be lifetime study and is barely touched on here, but those interactions deserve more than casual acquaintance because they can have a pervasive effect on feelings and the experience of grasping information.
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 to present on which to present other information, a surface which makes the experience of using and looking at the site so much more satisfying by delighting and pleasing the eye. They need to be created by the designer - the canned ones are mostly like bad wallpaper, overly complex and gaudy - so they are delicate and unobtrusive. By using simple geometric repeats,they are especially useful in creating a shallow woven space and in the optical mixing of colors. I have used patterns in most of the examples I will present today.
Like patterns, opacity is an equally useful element is 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. Like glazes in oil painting or ikat fabric dyeing or batik resist the depth and resonance transparency offers is wonderfully rewarding tool for adding visual richness to SVG graphics. It allows for a wide range of effects from close integration to full separation of shapes with other shapes and shapes with a background.
So much of the work being done now in SVG draws on three different sources: cartography, technical drawing and cartooning. All three tend to assume that representing three-dimensions are more desirable than presenting two, that moving image is better and more useful than a still one and that dynamic site is more engaging than a fixed one. These assumptions have lead, I believe, to the passing over some very rich possibilities for other looks to give SVG images and ones which cans enrich its visual resources based on some common and uncommon models and traditions of image making.
Where can we look for ideas and inspiration?
The list is long - most of the history of visual culture in written in vector graphics - images made using stroke and fill. Is is not limited to comics and cartoons and did not begin with The Yellow Kid and Gertie the Dinosaur, the first comic strip and the first animated cartoon. Nor to the drawings and plans that were recorded, rather than memorized, when paper came into common use, nor maps that flourished especially after the Age of Exploration.
Sources extend from cave art of 30,000 years ago to contemporary graffiti.
Look, for instance, at cutouts from Chinese and Javanese shadow-puppets to Timurid manuscripts with collage calligraphy to Pennsylvania Dutch scherenschnitte to Lotte Reiniger's cutout animation.
There are the textile spaces of quilting and ikat, embroidery and tapestry - or stencils for Japanese textile patterns to French pouchoir for illustrations to Jasper John's numbers and letters in paintings, drawings and prints.
Or the work of contemporary artists like Ellsworth Kelly, Sol LeWitt, Agnes Martin, Don Judd and the early paintings of Frank Stella and later paintings of Chuck Close.
Or the art of the Tlingt, Haida, Salish, Kwakiutl, Tsimshian and other of the Northwest Coast First Peoples (there is a fine collection of this work in Vancouver at The Museum of Anthropology at the University of British Columbia).
They can come from all kinds of art and from nearly every culture. Just looking around with an open eye and mind is all it takes.
The filters are the most difficult elements in SVG to work with for two reasons. First, they tend to be obtrusive, and overwhelm the rest of the design and second they lend themselves to trompe l'oeil effects, they try to fool the eye and imitate the tonal representation of a photograph. (It is out of place here to go into in detail, but most painters never tried to fool the eye, in fact, they went to great lengths to make sure it was clear that what they did was a painting, not the real thing.) The filters that cause the first problem are Turbulence, Displacement and Morphology and the second are lighting effects, especially Specular, DistantLight, PointLight and SpotLight.
The results I have gotten in almost every case when I have tried to use them have been failures, mostly simply ugly and visually repellent. I would really be interested if anyone in the SVG community has found ways to use these particular filters to that enrich their work, rather than dominate it, and attract viewers, rather than repel them.
The W3C test suite also creates problems when it is treated, as it often is, as a visual standard and resource rather than simply examples of how parts of the spec work. For instance, the use of a 'smilie' face as a model graphic doesn't even have the austere charm of ASCII art from which it comes.
Finally, I like to make clear that my remarks are not meant to be critical of the excellent work done by the members of the SVG Working Group. They have developed and are continuing to develop a spec that opens up so many exciting possibilities and promises so much. I can only commend them and suggest that their diligence and talent should be models for us to apply to our own work, especially those of use who are designers, rather than programmers, and to realize more and more of the possibilities Scalable Vector Graphic spec opens for us.
I will turn to these example now. They are all built without scripting, using the tools of the SVG and CSS and SMIL, to keep them simple and make the some of the powers in the presentation of visual images with Scalable Vector Graphics as clear as possible.
The examples (svgopen03maddox.zip) I am showing were made either by hand coding, using WebDraw, Adobe Illustrator, CorelDraw or a combination of them.
XHTML rendition created by gcapaper Web Publisher v2.0, © 2001-3 Schema Software Inc.