Getting to the Point

SVG paths have a pretty good set of shape commands, enough to let you draw any 2D shape you might want in an authoring tool: horizontal, vertical, and diagonal straight lines, elliptical arc segments, and cubic and quadratic Bézier curves. Béziers are great, giving you precise control over the position and curve interpolation of each point in a concise format, using control points (“handles”), and are easily chained together to create complex shapes.

But let’s say you have a series of points, and you want to draw a smooth line between them, e.g. for stock data, an audio wave, or a mathematical graphing equation. Béziers are not as handy there, because not all the points needed to define a Bézier spline are on the curve itself. Obviously, you can decompose any set of points into a set of Béziers, but that takes math, and who wants to do that? (Put your hand down, nerd. I’m talking to the normals.)

Sometimes, you just want to lay down a set of points, and let the browser draw a smooth curve (unlike polylines, where each segment is just a straight line between the points). Like this:

Please use a modern browser.
Continue reading “Getting to the Point” →

Formata Non Grata

Recently, a browser implementer asked me for examples of SVG. He was having trouble finding good examples of SVG in use, particularly as parts of an HTML document. This question has come up again and again, actually, and it always vexes me. I’ve been active in the SVG community for close to a decade, and I’ve seen thousands of amazing SVG files (and many more of mediocre to average quality), but somehow they seem to have disappeared or bitrotted over the years. Some of those files only worked with the slightly-unstandard Adobe SVG Viewer, or didn’t quite work with Firefox’s incomplete support, I know, but surely not all of them. Where is all the great SVG content I remember, the games and GUIs and design and development? Where are all those files to be found?

I hear some browser implementers say that people just don’t use SVG. Intuitively, this feels false to me, based on my own experience. But could it be true?

Continue reading “Formata Non Grata” →

Successful Launches

Today has been a good day for launches! In my last post, I mentioned the successful launch of the W3C Audio Incubator Group, which I’ve been working on for a few weeks.

The second launch is a bit more visceral. When I realized that there would only be a few more space shuttle launches, Megan and I decided that we would try to see one if we could. This occurred to me about a month ago, but I wasn’t sure we could fit it into our schedule. But this week, Megan had to cancel a long biketrip, and that opened up a spot for us to drive down. So, we drove ten and a half hours to Cape Canaveral, slept a few hours in a cheap hotel, and got up early (for us, 8:00 AM is really early) to drive to Jetty Park, which was already crowded by the time we got there.

But we still landed a good spot right on the waterfront across from the launch site. A few low clouds threatened the launch early on, but it cleared up by early afternoon. A passing Korean car cargo ship gave us a little anxiety, fearing it might block the view, but it cleared in plenty of time.

Finally, the countdown blared out of someone’s radio, and the whole waterfront chimed in. 5… 4… 3… 2… 1…

We were pretty far away, but the rocket flame was impressively bright in person, and when the sound reached us, we could almost feel it. This is the final flight of the Atlantis, which makes me a bit sad. I’m ambivalent about retiring the shuttles… single-launch rockets are probably a cheaper option… still, it’s drawing to the end of an era, and I hope we keep pushing forward. Gauss-gun launch rails, anyone?

So, it was a successful launch, which makes me glad. Definitely worth the trip.

We did come away from it with reddened, painfully sensitive skin. I assert that this is rocketburn, not sunburn. Need a higher Rocket Protection Factor next time.

Web Audio Goes to Eleven

I’m really excited about W3C’s new public Audio Incubator Group, just launched today, and open for collaborators, innovators, and instigators. Go take a look for yourself, and see if you can contribute.

To celebrate the occasion, here’s a simple example of an experimental audio inteface, in the world’s first (and worst) audio synthesizer in SVG (you’ll need a special Minefield build to use it). Just click on the keyboard… it’s pretty rough still, but it shows some of the potential:


(standalone SVG file)

For some background, read on after this break…
Continue reading “Web Audio Goes to Eleven” →

Stumbling Towards a Graphical Workflow

I’m working with a professional designer, Michael, on some graphics for my upcoming MIX presentation.  I’ve worked with designers before on various projects, some SVG, some traditional Web design, but this is my first time working on an SVG project with someone who never used SVG before, and it’s been an interesting experience, which I thought I’d jot down for anyone interested.

Both of us have been busy with other projects, and since we are in different places (me in Chapel Hill NC, him in Atlanta GA), we have only gotten to touch base a few times.  Michael has delivered some first drafts of the graphics, which look lovely, and I decided to dig into the underlying code, confident that I could trim down the file size and thus help browser performance.

My personal graphical editor of choice is Inkscape, which is a fine tool for all its warts (though it’s a little painful on Mac, where it is hosted as an X-11 application); typically, though, I create SVG either programmatically with a script or manually with a text editor (yes, I know that’s crazy… but it can be done).  Michael, being a professional designer, uses Adobe Illustrator, and I am keen to have him use the tools he is most comfortable with.  Since I want SVG to be used by mainstream designers, I want to understand how their tools work and what their workflow is like.

So, in order to make sure that we can roundtrip the files as seamlessly as possible, while still leveraging the features of SVG, I set about today to establish a workflow with Illustrator, TextMate (my go-to text editor, with a custom SVG code template bundle), Firefox, and its native debugger extension Firebug (with its handy “Inspect Element” context-menu selection).  My goal: to make reusable icons out of some of the graphical assets in the larger image, to be referenced by SVG’s <use> element. Continue reading “Stumbling Towards a Graphical Workflow” →

Sonnet to Liberty

For the Fouth of July, America’s Independence Day, here’s a poem by Oscar Wilde, from 1881:

Not that I love thy children, whose dull eyes
See nothing save their own unlovely woe,
Whose minds know nothing, nothing care to know,—
But that the roar of thy Democracies,
Thy reigns of Terror, thy great Anarchies,
Mirror my wildest passions like the sea,—
And give my rage a brother——! Liberty!
For this sake only do thy dissonant cries
Delight my discreet soul, else might all kings
By bloody knout or treacherous cannonades
Rob nations of their rights inviolate
And I remain unmoved—and yet, and yet,
These Christs that die upon the barricades,
God knows it I am with them, in some things.

Platform Games

I attended Google I/O a couple weeks ago, and had a great time.  They really put the “hype” in HyperText Markup Language 5, identifying things like the Geolocation API and some of the WebApps Working Group deliverables as part of “HTML5”.  Not quite accurate, but it was a branding exercise, not a technical one.  Notably absent from the things they rolled into HTML5 during the keynote, though, was SVG… in fact, they seemed to go out of their way to avoid it.

But it’s in there. Continue reading “Platform Games” →