<< INSERT THE N >>

Introduction

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 principles of art and how they apply to SVG. This post is an 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 foster creativity more generally.

While attending these sessions, Freeman helped me understand that all art is about 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 christallization 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 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 the figure.

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 generating 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 figure 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 figure -- Perseus -- of Graeko-Roman mythological fame ² .

<>

Reference Image. Whenever I'm modelling a character I like to work off references. In classical mythology, Perseus is a heroic figure. So as a starting point I found some imagery from classical Greece in the form of this statue.

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 layoring and depth. Shapes range from mathematically well defined geometric clases to organic shapes created by artists.

Toward creating the figure, I like to start by defining a set of component shapes. From the reference I've induced I'll need:

1. A number of shapes for the body parts,
2. A shape for the hair,
3. Shapes for the helmet, and
4. 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?)

<>

Component shapes for the legendary hero.

In this example I have a set of shapes that can be readily arranged to create a wide range of poses for the hero type and maintain consistency. So, working with these components we acheive a level of modularity.

Tip: A note on modularity. One of the benefits of working with SVG is that it readily lends itself to the creation of modular and re-usable component libraries. Modular libraries define component parts that can be readily assembled in order to help maintain consitency and produce animations and sequential artworks.

To illustrate, in the next step I've arranged the parts to create a "resting pose" for the legendary hero.

<>

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 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 constucts 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).

<< INSERT EXAMPLE >>

Rubin's vase in SVG.

Rubin's vase illustrate the importance of synthesis in perception. It's an ambigous 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 raise 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; I've drawn a set of shapes and arranged them in a resting pose. In doing so I refined the shapes to better define relationships among the constituent body parts and to suggest a particular heroic physique. Finally, I've hidden the stroke-lines for reasons which I'll make evident momentarily.

<< INSERT SVG >>

At this point in the process I'd say I've locked in the "broad strokes" that are starting to better define the figure I'm after. Now is where I like to come in and flesh out greater detail using linear elements.

INFO: I think what attracts me most to SVG is the capability to work with Bezier Curves to create shapes. Working with SVG shapes is a completely different approach to creating art than working with brushes and strokes that are availible in bitmap centric applications like Photoshop. To me its a process more akin to sculpting than drawing. Working with Inkscape beziers I feel like I'm sculpting lines.

And this brings me to 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.

But for artistic purposes I like to hide the stroke and apply a differnt 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.

TIP: Inskcape makes the process I just described somewhat easier using the linked outset tool. Select a shape and use path -> linked outset from the dropdown menu. This gives you a linked outset shape which you can resize using a convenient handle. TODO CONSIDER EMBEDDING A SCREENSHOT...

With this approach, I can add detailed linework independent of the stroke lines associated with the shapes in the artwork.

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 if I had enough time. But here my aim is to distill color theory down to some of the key concepts most highly relevent to SVG. Artists use color theory to create imagery that influences mood and perception in many ways in order to acheive 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.

<>

Structure of the Human Eye.

Above I've created a diagram of the eyeball (using SVG of course!) to illustrate. Light passes through the lens, traverses the aqueous humor on 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 differntially 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

In art, the qualitative perception 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.

The Color Wheel

RESUME HERE

INCLUDE A SCREENSHOT OF THE COLOR WHEEL FROM INKSCAPE...

## Palettes ## Shade ## Highlight ## Gradients

Discussion

If you've followed along then maybe you can appreciate what I mean about SVG as an artistic medium.

As a format it can describe libraries of reusable works.

As an artform it has many applications: icons, illustrations, animations, lazer cuts, simulations, datavisualization and beyond...

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 (as opposed to bitmap image representational formats). I'm not going into much greater detail 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 vector graphics to create art INSERT UP.

2. I created this character as an asset for a game demo I'm writing to demonstrate AI applications in game development INSERT UP. Spoiler alert; he battles Medusa.

INSERT MEDUSA

1. Technically the fill and stroke colors (along with other properties of these features) can be specified and modified using CSS ^{INSERT UP} .