Reinventing Fire

With SVG being integrated more and more into HTML5, both included via <object> and <img> elements, and inline in the same document, some natural questions about SVG and CSS are receiving more focus. This includes box model questions like background and border, and pointer events.

I’m interested in comments from the community on what direction SVG should take.

Read the rest of this entry »

Korzybski remarked that “the map is not the territory”, reminding us that we shouldn’t confuse our mental models for reality. But maps, and data visualizations of all kinds, are really powerful, conveying complex ideas easily, and even shaping (or misshaping) perceptions about facts. This is one reason why decentralization of mapping resources and services is good; no one organization should control our common maps.

SVG is a natural fit for mapping. There’s even a detailed proposal by KDDI’s Satoru Takagi-sensei for tiling, layering, and coordinate resolution that fits on top of SVG, which I’d like to see standardized.

I’ve had an idea for a small open-source project for a while, which I’ve discussed with the brilliant Andreas Neumann of Carto.net; he’s been too busy planning SVG Open every year to help out with it thus far, and I don’t have the skills to do it without a great investment in time.
Read the rest of this entry »

What’s a favatar? It’s a favicon! It’s an avatar! It’s a portmanteau!

Well, really, a favatar is a profile picture hosted at the URL a commenter provides, with the filename favatar.png. I made it up!

Read the rest of this entry »

I’ve been doing a lot of website stuff this week. Here’s some highlights:
Read the rest of this entry »

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:

Read the rest of this entry »

My last post was slashdotted. Not servers-melting slashdotted, but unusual-volume-of-comments slashdotted. I posted it late on a Saturday night, so I guess they had no other news fit to print.

It was interesting, and a little bit exciting, to be linked from Slashdot. I have no great insights, but a few observations.
Read the rest of this entry »

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?

Read the rest of this entry »

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.

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…
Read the rest of this entry »

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. Read the rest of this entry »