Exploring SVG

by Jason McIntosh

A common theme among many reponses I received from href="http://www.xml.com/pub/a/2001/04/18/comicsml.html">my ComicsML
article involved SVG,
the vaguely buzzy W3C standard for
describing graphics through XML. Due
to its name -- which expands to Scalable Vector Graphics -- I had a
vague idea that it let you write XML elements that described a picture
via plotting points and drawing lines between them, and I guess if I
stopped to think about it, which I didn't, I would conjure up
pleasantly nostalgic visions of my fourth grade computer class,
drawing pictures on graph paper and then trying to code them in href="http://www.myoldcomputers.com/museum/man/pics/applebasic.jpg">Apple
][ BASIC via blocks of carefully enumerated HLINE and VLINE
statements. (Mine was a picture of a shining Atari logo blowing up an
evil Apple logo, for it would be years before I'd mature into platform
agnosticism, and I suppose I harbored some resentment at this
activity. Anyway:)

After spending Sunday afternoon immersed in SVG specs, articles,
and tutorials, I have found myself bedazzled at its true purpose as
XML's solution for describing and rendering all sorts of graphics and
animation, so much so that many consider it positioned as competition
for Macromedia's Flash. (I suspect that if I had any idea how Flash
worked I would have figured this out sooner, but, anyway; there you
have it.) This is very interesting, an open file format not
owned by any one company and therefore generatable through whatever
tool one wishes to use (I used emacs), and which has support from
major vendors -- see especially href="http://www.adobe.com/svg/">Adobe's SVG viewer plugin for
Windows and Mac browsers (which, incidentally, you'll probably need in order to
see the stuff I point to later in this entry), not to mention that
their Illutsrator 9.0 product can export its files as SVG -- and viewable through any application that cares to parse the XML and figure out how best to draw all these flying shapes, given the environment, whether it be a PC's web browser, or the itty-bitty LCD screen of a palmtop device, or a superprecise plotter printer.

Despite all this, at first I wondered if the Flash-competing angle
was a crackpot viewpoint -- I had previously viewed Flash as just
Flash, a domain unto itself -- but Dale alluded to this as
well in href="http://www.oreillynet.com/pub/a/network/2001/02/02/epstein.html">a
recent interview, so I would tend to believe him, even though his
interview subject responded by scoffing at SVG's comparitavely puny
browser penetration figures.

I scratch my head at that, though: to compare market penetration
with regard to electronic media formats that are not only free but
very easy to obtain and use seems a little weird to me. When I hit a
page that wants to show me a little SVG magic, and I don't have the
right plugin, my browser will beep and offer to go fetch it for me,
and I will say "Duh, OK," and click the Install button, and there you
have it: one more SVG user, who will use it seamlessly from then
on. It's not anything like comparing OS usage, or even browser
application usage, as far as I can tell.

Of course, I'm out of luck unless I have a Windows or a Mac machine
handy. My experimentation was made possible by my trusty old home Mac,
but my main box there runs RedHat Linux, and at work I use
Solaris. (Well, there's a shared Windows box here, but Erik keeps
moving the icons around and confusing me by renaming the computer icon
to I like gherkins or Dorky Plunk Xob or something
every day, so I don't use it too often.) I wrote a friendly letter to
Adobe thanking them for making a Mac version at all, and added my
voice to what I hope is a sizeable collection of Unixheads who'd like
to share the love as well.

Hey, look, they wrote me back tonight!

Hello Jason,

Adobe has not yet announced any plans to support Linux platforms. As you may
know, there are some Linux SVG development efforts under way elsewhere.

Java based viewers:
IBM at:

See http://www.mozilla.org/projects/svg

Amaya Version4.0 (Windows and Unix)
http://www.w3.org/Amaya) from W3C

Batik SVG Toolkit and Viewer

SVG announcement page that includes Linux based SVG tools

As for our own plans, we have a policy of not discussing unannounced product,
but I can say that we evaluate support for additional platforms based mostly on
the numbers of seats they represent.

Adobe notes in their online documentation that they consider their
plugin a placeholder until the major browser vendors start supporting
SVG natively. Innnnteresting optimism, and actually encouraging. After
receiving that email, I was most hopeful about that Mozilla page, but
its tone is mostly an expectant "Gee, it sure would be nice to support
SVG, wouldn't it?" Oh well. This is why open source is beautiful; you
can get away with posting this sort of webpage. :)


A couple of things I made very quickly, hammering in just a few
lines of XML (use the plugin's contextual menu (accessed via right
mouse button or control-click) to check out the source for yourself,
if you'd like), based on a mixture of ripping off the tutorials
available at <svg-spot> and skimming href="http://www.w3.org/TR/2000/CR-SVG-20001102/">the W3C spec
(palatable reading, but dry; I recommend a beverage on hand to ease

(Note also that href="http://www.sun.com/software/xml/developers/svg/">Sun
Microsystems has an SVG resource page some tutorials that cover
specific sub-topics, and href="http://www.adobe.com/svg/tutorial/intro.html">Adobe has a general
tutorial, though it's aimed at Illustrator users)

Since I was researching all this with ComicsML in mind, I quickly
homed in on the <image> element, which lets you import whole
files containing raster graphics -- that is, the far more common image
format involving descriptions of which bits go where and with what
color on a two-dimensional grid, rather than the collections of
pure-math points, lines and arcs that form the basis of vector
graphics. This, plus the fact it takes the same coordinate and size
attributes of every other SVG element, made it a shoo-in for the first
solution I'll create to the problem of describing comic panels'
layout. Within a few minutes I had already chopped up my example comic
and recast it in
three directions
. Woowoo! It's not the solution I was envisioning,
but definitely a start in that direction, especially considering that
fiddly bits like figureing out coordinates could be greatly assisted
through a little bit of programmatic magic.

It's worth noting that importing these graphics goes a little bit
against the point of SVG, since raster graphics are, by definition,
neither S nor V, but the standard would never have caught on had there
not been room made for the well-established Web graphics formats we
know and love. (Well -- most of them. JPEG and PNG are represented,
but not GIF. (To which I say: href="http://www.burnallgifs.org">right on.))

Interesting SVG examples

An power plant engineer made an interactive schematic of a power
generation system in SVG
, letting you poke buttons to open and close
switches (or something) and watch the little things turn off and on
and spin around and stuff while numbers shuffle past. It's the
interface the Enterprise's power generator would have if it was
located in Wisconsin. He made some other SVG stuff, too.

A mad
map of Moscow
that makes stunning use of SVG's zoomability,
starting you a mile high, and letting you zoom, zoom, zoom in until
you can see all the individual shrubs and streetlights that someone
took the time to render. Yikes!

Finally, I like this
self-depreciatory demonstration
of how JavaScript and SVG can be
combined to sink the Web into new depths of design depravity, mostly
because it's on the W3C's server. (Actually, it's not all that ugly,
but I appreciate the effort nonetheless.)

The moral of the story, as far as I'm concerned, is SVG
, so I'm going to do what I can to support its growth, which
is to say, import its namespace into the ComicsML spec. I think it
will not only help to solve its immediate problems involving layout,
but will enourage comics creators (and their comics' readers!) to use
this open and powerful language.

This is my first O'Reilly Network weblog entry. Now I am
l33t. Thanks, Dale and Nancy!

What do you think of those little meerkat heads at the
top? Scaled down so much, and lacking their cute little
meerkat bodies, their species becomes disturbingly
ambivalent. I think they look something like a jury of little
Edward Gorey puppets, craning their necks around in unison to peer at
something off to the right, perhaps that there Oracle ad
banner. Bizarre!!