SVG

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” →

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” →

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” →

CSS Link Hack in SVG

While answering a question about styling SVG with CSS in the Freenode #svg IRC channel (yes, people still use IRC), I threw together a simple example to illustrate.  I like to do this, since in keeps me in practice, and gives me a chance to check the state of current implementations in the fast-changing world of SVG browser support.

The question was how to use CSS stylesheets, both internal and external, with SVG in Inkscape.  While I know that Inkscape makes heavy use of CSS inline style declarations on elements (more than is to my personal taste, to be honest), I didn’t (and don’t) know if it has any UI features for adding internal stylesheet blocks, or links to external stylesheets.  So I made a little test…

svgstyle.svg

<?xml-stylesheet type="text/css" href="svgstyle.css" ?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" height="100%" viewBox="40 0 145 70">

  <style type="text/css"><![CDATA[
     ellipse
     {
       fill: lime;
       stroke: green;
       stroke-width: 10px;
     }
  ]]></style>

  <rect id="inline" x="50" y="10" width="30" height="50"
        rx="5" ry="5"
        style="fill:lime; stroke:green; stroke-width:3px;"/>
  <ellipse id="internal" cx="103" cy="35" rx="15" ry="25"
        style="stroke-width:3px;"/>
  <circle id="external" cx="150" cy="35" r="25"
        style="stroke-width:3px;"/>
</svg>

svgstyle.css

circle
{
   fill: lime;
   stroke: green;
   stroke-width: 10px;
}

Which looks like this (at least, in Firefox, Opera, Safari, and presumably Chrome):

Both internal styles worked fine in Inkscape, but the external reference did not, showing just a black circle.  I’m not really surprised.  Note the clunky way that you have to link to external stylesheets in SVG:

<?xml-stylesheet type="text/css" href="svgstyle.css" ?>

That’s really XSLT-licious. I have to confess, I don’t really care for PIs (insert dated Magnum PI joke here), or XML prologs in general… they seem somehow clumsy and un-XMLy, like a throwback to SGML. And as far as I know, they can’t be created or changed dynamically via clientside script. Compare that to the relatively easy and straightforward X/HTML way of linking to external stylesheets:

<link href="svgstyle.css" rel="stylesheet" type="text/css"/>

In the SVG WG, we intend to allow authors to reference external stylesheets in a manner a little more modern and consistent with what authors are already used to using, in some upcoming spec. We could do that a couple of different ways. We could allow them to use an xlink:href attribute on the <style> element, in the same way we currently treat the <script> element (that is, if there’s a resolvable external link, we use that, otherwise we use the child content of the element), or we could add a <link> element like X/HTML, or both. I kinda like the idea of allowing either.

To that end, I made a couple of tests, just playing around, to see if any browsers accidentally supported either of those options, by merit of having some shared codebase with X/HTML in their implementations. Unsurprisingly, neither worked.

But then I had another idea… use the an <xhtml:link> element in the XHTML namespace…

<xhtml:link href="svgstyle.css" rel="stylesheet" type="text/css"/>

With this rather happy result, which works in at least Firefox, Opera, and Safari.
external-link-xhtml.svg:

I don’t know if this is by design, or if it just fell out of the model, but I have to say I’m pleased as punch that it works. If nothing else, it’s a great proof of concept for adding more ways of linking to CSS in the SVG spec. This one goes in my toolkit, and I’m going to try to ensure that it gets standardized, if it’s not already there in some corner of some other spec. Probably somebody already knows about this (hell, probably everybody does, and I’m late to the party), but for me it was a w00ty discovery.

Update: heycam speculated that you might also be able to use @import rules, and indeed you can:

<style type="text/css">@import url(svgstyle.css);</style>

SVG Tiny 1.2 Staggers Across the Marathon Finish Line

Wow.  After a ridiculously long time in preparation, with political battles along the way, and a long slog of making tests and maintaining older versions of the spec, as well as working on supporting specs like Element Traversal and DOM3 Events, SVG Tiny 1.2 is finally a W3C Recommendation.  Whew!

Continue reading “SVG Tiny 1.2 Staggers Across the Marathon Finish Line” →

Last Day in Tokyo

I wish I kept a more detailed journal… I have chat logs and emails as a quotidian reminder of my doings, but it doesn’t capture all the great conversations and interesting people I meet when traveling.  This short trip to Tokyo, only 10 days or so, was jam-packed with cool folks with cool ideas.  But now I’m jaunting back to Tokyo from the W3C-Keio office, and then to the airport, so no time, no time…

Maybe on the plane I will sketch out my erstwhile meanderings.  The short version: spoke at Web Directions East (and will speak again at Web Directions North) about SVG and Canvas, was blown away by the other presentations there, hung with cool Web community folks (locals and internationals) who I hope to see again, ate good food, wandered the streets of Harajuku and Shibuya and Asakusa and Ebisu, watched mochi being made at a temple festival and ate the results, met with the Japanese chapter of the SVG Interest Group and some Japanese Industrial Standards folks regarding SVG 1.2 Tiny and further on, and collaborated with my awesome and inspiring W3C-Keio teammates.  Had no access to my cash because of a mixup with Visa/RBC.  Stayed in another capsule hotel, in Fujisawa.

And saw Mt. Fuji two clear days in a row, with lovely warm winter weather.  Sayonara, Japan!

Canadian Roadtrip

The SVG Working Group met in Ottawa for the SVG 1.2 Tiny Test Fest this week, which went very well.  The Test Fest was sponsored by BitFlash at the Brookline Hotel, which is where the Bilderberg Group met last time I was up here.

With airlines prices being what they are, and anticipating having to rent a car, I decided to drive up instead of flying.  I actually looked into train tickets, but was sorely disappointed… it would have taken 2 days, required finding a hotel room in NYC, and booking a connecting train in Canada, and it would still have been the same price as a flight.  Apparently, Amtrak is not only not ramping up their service to meet what you would think is a growing demand for cheap, eco-friendly travel… they are actually removing passenger lines, because the freight industry controls the rails. What a pity… I would like to have taken a train.

As it turned out, though the drive was long (about 13 hours), I didn’t really mind it.  I kind of enjoy road trips.  I loaded my iPod with podcasts and audiobooks; I loved the podcasts so much, I haven’t even gotten to the audiobooks yet.  This is the first time I’ve ever listened to a podcast, and I am definitely going to subscribe to some feeds (I know, I’m behind the times, but I work from home and normally just listen to NPR or music while I’m driving).  The changing leaves were beautiful, too.

On the way back down, I decided to detour to Niagara Falls.  The only other time I was in this area, as I was roadtripping across the States with a friend (on my way to move from Missouri to North Carolina by a very circuitous route), she didn’t want to go to the Falls, and I’ve been wanting to go ever since.  So, I figured, hey, since I’m in the area… But we worked pretty late last night, so I ended up leaving the hotel just before midnight… I was pretty drowsy about half the way to Niagara Falls, so I pulled over and slept in my car in a rest area.  But that gave me a chance to see a bit of Toronto by day;  I detoured from my detour to see the CN Tower and Kensington Market in Toronto, which seems like a nice city… it’s one of the few major Canadian cities I’d never been to before, so I’m glad I did it.

In Niagara Falls, I did the normal tourist thing, strolling along the walkway above the falls, snapping pictures, and taking the Maid of the Mist boat tour that takes you into the deluge under the falls.  I got soaked, naturally, and the roar was deafening. It was pretty fun.  The falls –American Falls and Horseshoe Falls– are pretty impressive, with the rainbows and towering mist and translucent water rushing over the edge.

So, off to dinner, then I’m hitting the road again back home to North Carolina.

Setting a Visible Goal

SVG 1.2 Tiny, previously in CR, went back to LC today.  Which might seem like a step backwards, but is really a huge leap in the right direction.

Okay, you have no idea what I’m talking about, right?  So, the W3C’s Recommendation track looks something like this:

  1. Editor’s Draft, where ideas are just being hashed out
  2. First Public Working Draft, where we have the basic direction, but still in rough form, and are seeking initial public feedback
  3. incremental Working Drafts, where the draft spec improves over time, based on review and comments
  4. Last Call Working Draft, where we pretty much think it’s done, and ask the public to give it a final once-over
  5. Candidate Recommendation, in which the spec is mostly stable, and where we invite implementors to actually write the code and provide the wisdom of experience
  6. Proposed Recommendation, where the W3C Members get a final chance to say what they like, don’t like, and provide their official comments for consideration to the Director
  7. Recommendation, where the Director (usually Tim Berners-Lee, in consultation with trusted advisors) looks at the spec, looks at the comments, and decides whether or not this should have the stamp of approval from W3C.

On the surface, SVG 1.2 Tiny going from Candidate Recommendation to Last Call seems rather counter-productive.  But the truth of it is, the SVG spec has changed quite a lot for the better, due to lessons learned during implementation and building a test suite.  But change is change, and if you change the spec any time before Recommendation status, you go back to Working Draft (in this case, Last Call Working Draft).  This lets everyone review the current spec, and provide critical feedback before we move forward again.  But with a solid test suite (though no test suite is ever really done), and several interoperable implementations, the current state of SVG 1.2 Tiny is much improved over the previous Last Call, so the path to Recommendation is actually much clearer this time.

I’m really proud of the work the SVG Working Group has done, and I’m honored to have been part of it.  I’m glad that we are now a public working group, so people can see what we are working on and help steer us in the right direction (especially with the new SVG Interest Group that I co-chair with Jeff Schiller).  I’m relieved that the long haul of completing SVG 1.2 Tiny may be coming to an end.  And I’m confident that this specification will really push SVG forward.

And have we got some cool things planned for the coming months!!