Introduction

Figure"Perseus with the head of Medusa" (reference for the "legendary hero")

Recently I've had the good fortune to be able to devote effort to a long-time passion-project of mine revolving around art and SVG (Scalable Vector Graphics). Returning to this project (after somewhat of a hiatus) got me thinking about general art principles and how they might apply to the creation artworks using SVG. This post is my attempt to synthesize some of these concepts.

Some time ago I was regularly attending life drawing sessions conducted by a local artist, Freeman Burns. Every couple of weeks He'd invite models to his studio and local artists would come and participate in drawing sessions. To me -- over and above the creation of the artwork itself -- this kind of activity is very important to train and exercise one's mind, and more generally to foster creativity and, by extension, innovation.

While attending the life drawing sessions, Freeman helped me understand that all art in one way or another boils down to "making marks". Whether it's using charcoal, ink or oils -- or in the digital world pixels, brushes and strokes -- art is about getting your image from your mind to your medium. And one of the key insights I took away from these sessions was a crystallization of the core elements of art itself: shape, line and color. This post is about applying these core elements to create artworks using the medium of SVG.

SVG as an Artistic Medium

Details aside, SVG is an XML-based vector image format for defining two-dimensional graphics. In addition, SVG supports interactivity and animation¹. It is widely used over the World-Wide-Web to create icons, logos and illustrations, and has many applications for data visualization. This post is about thinking of SVG more generally as an artistic medium. To illustrate, I'll walk through the process I've arrived at to draw figures for illustration and animation.

The Tools

Since it is XML-based, SVG is technically "human readable". This aspect is very useful to programmers who are willing and able to work through the syntax and semantics of the format. But for the creation of artworks you don't want to be writing out your SVG by hand. The good news is there are a number of tools and applications available to create SVG. But my all-time favorite is Inkscape. So that's what I'll be using to create a model for this post.

One of the more interesting applications of SVG (to me) is the creation of assets for games and other simulations. So, for purposes of illustration, I'll walk through the creation of a "legendary hero" -- Perseus -- of Graeko-Roman mythological fame ² .

Applying Principles of Art to SVG

Shape

Shape in art is a two dimensional area that gives rise to perceptible forms in created works. Shapes give character and personality to objects and can be manipulated to convey layering and depth. Shapes range from mathematically well defined geometric classes to organic shapes created by artists.

As a first step to creating the figure, I like to start by defining a set of component shapes. From reference material I've deduced I'll need:

1. A number of shapes for the body parts,
2. Shapes for the helmet, and
3. Since the figure I'm creating is intended as a game asset I'll need shapes for a sword and shield (we'll need to enable our hero to do battle, right?)

Figure 1. Component shapes for the legendary hero.

Since the ultimate goal for this particular model is to enable animation for a computer game I designed the component shapes such that they can readily be arranged and composited to support a number of of poses. So, with this design I've achieved a level of modularity enabling component re-use down stream.

Line

Up to now I've sort of glossed over the point that inherent in our definition of shape is the notion that shapes have perimeters which can be called out with lines and curves. Perceptually, lines in vision are synthetic in the sense that they're a construct of the brain. As you gaze out into your world you perceive objects, and these objects can be described by lines and curves. And yet these perceived linear elements are constructs synthesized by the brain based on the detection of light gradients, and color contrasts. Conversely, artists can use line to 'suggest' shapes, relationships, negative space and ultimately give form to their ideas.

To illustrate, consider the classic Rubin's vase (which I've reproduced below in SVG).

Figure 2. The famous Rubin's Vase example.

Rubin's vase illustrates the importance of synthesis in perception. It's an ambiguous figure that can be perceived either as a vase object or two faces symmetrically arranged around a negative space. Above I've used line to call out the two percepts.

Here, I want to use the illustration to emphasize an important aspect of working with SVG as a medium. SVG defines a shape in terms of both fill and stroke. The stroke is the line defining the perimeter of the shape. The fill is the area encased by the line. When you create a shape in SVG the stroke is implied. Both the fill and stroke in SVG can be associated with color through attributes on the shape ³.

Getting back to the creation of the legendary hero; So far I've drawn my component shapes and arranged them in a "ready" pose. At this point in the process I'd say I've locked in the "broad strokes" that define the model I'm after. Now is the point where I like to come in and add greater detail using linear elements.

Figure 3. Line art for the legendary hero.

The obvious way to get lines in tools like Inkscape is to set properties on the stroke. But for artistic purposes in creating models like the legendary hero I like to hide the stroke and apply a different technique to create the line art. Working with SVG it's straightforward to duplicate shapes. So once I have the broad strokes locked down I can add line art with a bit of style by duplicating any shape, slightly enlarging it, setting an "outline color" and dropping it below the original.

Color

It's hard to do justice to the concept of color in art in a short blog post. I could write an entire book about it given world enough and time. But here my aim is to distill color theory down to some of the key concepts most highly relevant to SVG. Artists use color theory to create imagery that influences mood and perception in many ways in order to achieve their artistic expression.

Perception

Understanding color theory starts with perception. Variation in color arises due to variation in light frequencies across the visible spectrum. We perceive color thanks to the structure of the human eye.

Figure 4. Structure of the human eye.

This illustration I've created of the structure of the human eye shows how light passes through the lens, traverses the aqueous humor and falls on the retina. The retina is a thin sheet of nerve cells covering the interior of the eyeball. It is the retina that enables us to sense light. The retina is comprised of two main types of cell that respond to light; rods and cones. Rods are sensitive to light intensity. It's the cones that underly our perception of color. Different cone cells respond differently to different light frequencies. They respond differentially depending on whether light hitting them falls closer to the red, green or blue frequency ranges in the visible spectrum.

So that's the biological underpinning of the red, green and blue primary color scheme. All the colors we perceive in the world around us are the result of combinations of red, green and blue intensity levels reflecting off of objects and landing on the retina.

Elements of Color

The qualitative perception of different colors (i.e., red vs. green vs. blue etc.) isn't the only way to think about color. Artists describe color not only in terms of hue (the colors as they appear on the color wheel) but also in terms of value and saturation. Value refers to the lightness or darkness of a color. Saturation refers to intensity or purity. Highly saturated colors are vibrant. Low saturation is dull.

Palettes

In art the term color palette refers to the set of colors chosen by an artist for a particular piece. In creating SVG artworks the artist has virtually an infinite range of color possibilities to choose from. This is simultaneously a blessing and a curse! The color palette greatly impacts the mood and aesthetic of an artwork and subtle changes have huge impacts on the perceptual quality of a piece.

Highlight

Effective use of highlights are very important to art and illustration. Highlights -- areas of reflected light -- convey a sense of material and texture to what otherwise might come across as flat shapes. I recall a frustrated aspiring artist asking -- "What color do I use for gold?" The artist was frustrated because they realized they were not achieving the effect they wanted merely by applying a uniform color across the object they were trying to depict. Their frustration stems, in part, from the fact that "gold" is not just a color -- it's a material. What we label "gold" is actually a combination of hue and saturation. But what we perceive as gold out in the world combines all that with how light falls on an object, gets reflected and so on. Especially with SVG artworks, the artist has to bring to bear many techniques -- including effective use of highlights -- to bring life to an image.

Shading

Another important technique to give form to your SVG artwork is to effectively use shading. Many effects can be created by dropping shadows and adding shaded areas to shapes to provide a sense of depth and add greater dimensionality to a piece. For purposes of illustration, I typically apply a simple two-tone cell-shading technique to add depth and 'pop' features to which I want to draw the viewer's eye.

The Legendary Hero Model

And that brings us through to the completed version of this "legendary hero" model. It's important to have a good sense of completion in calling an artwork "done". "Done-ness", or, being done is often a subjective decision and there's no "one size fits all" answer to the question of when a piece is finished. The sense of completion can range from a feeling of satisfaction or the sense that the work has reached its natural conclusion to a feeling of indifference or a sense that any additions might detract from the piece. In this case, I've added just enough detail to call out the necessary features on this model. But given its purpose -- which is to serve as a basis for animation -- adding more detail would be problematic. Too much detail and the animation process gets bogged down. Part of the artistry is to find just the right sweet-spot between eye catching detail and simplicity in creating the right aesthetic.

Figure 5. Model: The legendary hero.

Conclusion

Lately I've put in a lot of effort trying to understand SVG not just as a technical specification for a graphics format but as an artistic medium. In physical art your medium is the material you're working with to create your artwork -- oil paints, water colors, clay in sculpture -- just to name a few. Digital art is also a medium and as a digital art form vector graphics opens up whole new worlds of possibilities for expression. I'm hoping that this whirl-wind tour demonstrating how SVG provides exquisite control over the use of shape, line color and other visual elements to achieve artistic expression helps get your creative juices flowing. But even beyond all that SVG adds a dimension procedural expression to the creation of imagery -- where algorithms and code can be applied to the generation of artworks for a wide range of applications.

End Notes

1. Scalable Vector Graphics (SVG) is a technological specification that enables the creation of digital images using a format defined over mathematical operations. That's *very* different from bitmap formats originally used to represent digital images. I'm not going into much greater detail on the format specifics in this post -- I'm afraid that will have to await another article. But -- long story short -- vector graphics is a digital art form well known to web developers and graphics designers and I've had a long-standing passion revolving around applying SVG to create art .
   
   
2. I created this character as an asset for a game demo I'm writing to demonstrate AI applications in game development . Spoiler alert; he battles Medusa.
   
   
3. Technically, the fill and stroke colors (along with other properties of these features) can be specified and modified using CSS styles as well as shape attributes .