How to View the Files | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Making Enhancements

There are some important non-technical aspects that are part of a mind-set that will assist you in learning how to create your own variations of the SVG code in this book. First, it is essential that you actively experiment with the code, which requires that you invest some of your time (and invariably necessitates a certain degree of trial and error). Note that the ability to visualize geometric patterns can be helpful, but it's not an absolute requirement. In the words of Darach Ennis, you benefit by being 'curious and fearless'; in other words, don't be intimidated by the code or fearful of making 'mistakes' as you dabble with the code. Although you might spend time struggling to achieve a specific effect, your experimentation can lead to inadvertently creating unexpected effects, some of which might be more interesting than your initial intent!

Another important aspect of creating your own variations is to start with simple changes. This is the philosophy that underlies an iterative approach whereby you progressively construct more interesting and visually rich graphics images. While it might be tempting to use complex techniques in order to create exotic-looking 'knock-out' graphics as quickly as possible, this approach can quickly exhaust your supply of ideas.

In terms of technical details for writing your own enhancements, start with objects that you understand. For example, you can work with rectangles and triangles before you generalize them to polygons. Next, you can work with circles, ellipses, and Bezier curves. Since color is of paramount importance, experiment with combinations of different color gradients with these geometric objects. When you decide to incorporate conic sections or polar equations, you can also search the Web for equations that you can use in your code.

By now you ought to be convinced that many visual effects can be created very easily in SVG. Leverage these features in your code. For instance, it's almost effortless to specify the color, thickness, and 'dash' pattern for stroke-related attributes of arbitrary geometric objects. (Imagine accomplishing the same thing in other programming languages!). Try using 'extreme' values for these attributes; for example, small decimal values, negative values, or perhaps four-digit or five-digit values. In other words, experiment with boundary values as you try 'pushing the envelope.' Look for ways to combine rectilinear shapes (such as line segments and rectangles) with curved shapes such as elliptic arcs and Bezier curves in order to create sharp contrasts.

As you gain experience with writing SVG code, you can also try your hand at writing SVG code for common-place objects. Generally, it's better to avoid a connect-the-dots approach whereby you incorporate many of hard-coded values in your code. While this technique will help you create a specific image quickly, it's difficult to generalize the code or to make many variations of the image that can be easily transferred to other images that differ considerably from the original image. Again, it's important to learn how to master simple objects and add them to your repertoire so that you can later combine them in order to create more sophisticated graphics images.

Remember that there is a learning curve associated with acquiring any new skill, and this is definitely true vis-à-vis SVG. While it's difficult to quantify or predict the level of your creativity, you can influence your environment in ways that will make it easier to be creative. If you can, give yourself a block of unstructured time where you can experiment with SVG. Although it might initially seem unproductive, this type of activity can be very useful because it frees your mind from the stress of trying to achieve a specific goal and gives your mind time to absorb new information.

With all of the preceding in mind, here's a partial list of techniques (all of which are used in the sample code) that you can leverage in your code:

vary the width and/or height of rectangles
vary the major/minor axes of ellipses
add perturbation factors such as randomly generated values
multiply values by constant scale factors
multiply values by trigonometric functions
add rectilinear objects to conic sections and vice versa
interchange x and y coordinate values
use the modulus function
use integer-valued numbers
use very small or large periods for trigonometric functions
overlay elements in pairs (reflected or parallel offset)
add solid/dotted line segments from fixed locations
use multiple stops in radial and linear gradients
use patterns defined in SVG defs elements
add shadow effects using constant offset values
add striping effects with the modulus function
add smoothly varying (R,G,B) color values

The rest of the chapter displays a variety of graphics images that are available on the CD-ROM. Unless otherwise indicated, all the specified folders are sub-directories of the folder Supplemental\polarEquations.