Copia

“Dynamic SVG features for browsers”

Subtitle: Build on SVG basics to create attractive, dynamic effects in your Web projects
Synopsis: Learn how to use dynamic features of Scalable Vector Graphics (SVG) to provide useful and attractive effects in your Web applications. SVG 1.1, an XML language for describing two-dimensional vector graphics, provides a practical and flexible graphics format in XML. Many SVG features provide for dynamic effects, including features for integration into a Web browser. Build on basic SVG techniques introduced in a previous tutorial.
Lead-in: SVG is a technology positioned for many uses in the Web space. You can use it to present simple graphics (as with JPEG) or complex applications (as with Macromedia Flash). An earlier tutorial from June 2006 introduced the basic features of the format. This tutorial continues to focus on SVG for Web development, as it demonstrates dynamic effects that open up new means of enhancing Web pages. The lessons are built around examples that you can view and experiment with in your favorite browser.
Developed by the W3C, SVG has the remarkable ambition of providing a practical and flexible graphics format in XML, despite the notorious verbosity of XML. It can be developed, processed, and deployed in many different environments -- from mobile systems such as phones and PDAs to print environments. SVG's feature set includes nested transformations, clipping paths, alpha masks, raster filter effects, template objects, and, of course, extensibility. SVG also supports animation, zooming and panning views, a wide variety of graphic primitives, grouping, scripting, hyperlinks, structured metadata, CSS, a specialized DOM superset, and easy embedding in other XML documents. Many of these features allow for dynamic effects in images. Overall, SVG is one of the most widely and warmly embraced XML applications.
Dynamic SVG is a hot topic, and several tutorials and articles are available that include fairly complicated examples of dynamic SVG techniques. This tutorial is different because it focuses on a breadth of very simple examples. You will be able to put together the many techniques you learn in this tutorial to create effects of whatever sophistication you like, but each example in this tutorial is simple, clear, and reasonably self-contained. The tutorial rarely deals with any SVG objects more complex than the circle shape, and it keeps embellishments in scripting and XML to a minimum. The combination of simple, step-by-step development and a focus on real-world browser environment makes this tutorial unique.

Pay attention to that last paragraph. There are many SVG script/animation tutorials out there, including several by IBM developerWorks, but I found most of them don't really suit my learning style, and i set out to write a tutorial that would have been ideal for me when I was first learning dynamic SVG techniques. The tutorial covers CSS animation, other scripting techniques and SMIL declarative animations. It builds on the earlier tutorial “Create vector graphics in the browser with SVG”.

See also:

• Copia announcement of the first SVG tutorial
• Copia announcement of “XML in Firefox 1.5, Part 2: Basic XML processing”
• Copia announcement of “XML in Firefox 1.5, Part 3: JavaScript meets XML in Firefox”

[Uche Ogbuji]

About a year or more ago I had an idea that a simple python/SVG library could be written to aid the drawing of the very rudementary components of the yijing in modular fashion upon which the more complex diagrams could be very easily drawn (programatically). Philosophically, it can be thought of extending the concepts within the text into a program that represents the ideas in it. A little beatnick-ish? Well, using SVG, binary numerics and an understanding of the more fundamental arrangements of the trigrams I was able to write such a library: YiJingPlotter.py. It takes advantage of the translation of the trigrams to their binary values (see earlier post) in order to draw them in 2 dimensional coordinate space (leveraging SVG for this purpose). And in 218 lines of code I was able to write the library as well as 2 utility functions that produced the two most (arguably) fundamental / useful arrangements of the trigrams in SVG:

FuXi's circular arrangement

Shao Yung's square diagram

Once again I would embed the SVG diagrams, but alas there is still (apparently) no browser-agnostic way to do this (someone inform me if there is)

The library (written in python) relies on:

• 4Suite's XMLWriter

I tried to comment as heavily as possible for anyone interested in using the library to generate other diagrams. Comments from the second of the two utility functions are below:

Another demonstration of a classic arrangement drawn using the gua/trigram plotting functions. This is ShaoYong's Square. Probably the most useful (in my opinion) arrangement for observing the relationships between the fully developed 64 gua. Within each row, the lower trigrams are all of the same kind (he refered to them as the 'palace' of earth, mountain, etc..) and within each column the upper trigrams are also of the same kind. So, essentially it is a 2 dimensional plot of the 64 gua where the X coordinate is the upper gua and the Y coordinate is the lower gua. This incredible numeric symmetry comes from simply drawing the gua in ascending binary order from 0 - 63, 8 per line! I've added the english names of the corresponding coordinates so a student can match up the lower/upper gua (by name) to find the gua formed.

Note: I'm still unsure of the proper spelling of Shao Yung's name (Wikipedia has it as Shao Yung, however I've seen various references to Shao Yong)

Chimezie Ogbuji

The Trigrams and My Interest

My interest in the trigrams of the very ancient Yijing is mostly scholastic. It's the coherent set of philosophies (or canon), derived from these trigrams and what amounts to a mathematical interpretation of everything that have had a more concrete effect on how I go about my life and how I deal with adversity.

The trigrams are many things, but their most interesting characteristics (from a secular point of view) are their direct analogy to the binary numerical system as well as the fact that they (undisputedely) represent the earliest coherent example of humankind's study of semionics:

the philosophical theory of the functions of sign and symbols

The infinite Characteristics of the Trigrams

The first (and less emphasized) of these two characteristics of the trigrams was formally observed by the German mathematician Gottfried Wilhelm Leibniz (the original observation is probably as old as the purported author of the trigrams: FuXi). He, is the creator of the modern binary system of counting, which is the primary framework upon which microprocessor design is based (an important, historical irony).
He noticed that the concept of duality/balance evident in the trigrams' source (the yijing)) as well as the derived related philosophies are directly analogous to the binary system when you substitute 0 for dashed lines (yin - the concept of no motion) and 1 for unbroken lines (yang - the concept of motion / kinetic energy).

The trigrams are meant to be interpreted from the bottom up, so a continuation of this binary analog would have the reader tip the trigrams over to their right side and read them as binary numbers.

The Binary Analog of the Primary Gua

Below is the original horizontal arrangement of the trigrams with their corresponding binary numbers (click on each to view the corresponding SVG diagram):

Earth - 000 Mountain - 001 Water - 010 Wind - 011 Thunder - 100 Fire - 101 Lake - 101 Heaven - 111

Extension to the 64 Trigrams of the Yijing

Since, the 8 primary gua are the building blocks upon which the 64 symbols of the Yijing are built (and purportedly, everything), this binary analogy can be extended to all the 64 symbols. This is well known amongst scholars of the Yijing and below is the most famous diagram of this extension by Shao Yong (1011AD - 1077AD):

The numerical significance of the trigrams in sequence is well summarized here. This page also includes a very useful animated image of the entire sequence as a binary progression:

The most complete resource on the subject (that I've read so far) is Alfred Huang's The Numerology of the I Ching (ISBN: 0-89281-811-5)

I was unable to embed the SVG diagrams within the page, which is a shame because the yijing trigrams are an excellent SVG use case. I hope to someday capture all 64 as SVG diagrams so the various, more popular philosophical/visual arrangements can be rendered programatically. Imagine Shao Yong's circular diagram as SVG (talk about an interesting combination of ancient numerology with modern vector graphic technology). It would prove quite a useful tool for avid students of the yijing symbols as well as make for some very interesting patterns.

[Chimezie Ogbuji]