Rapid SVG Development: Inkscape's Presentation at SVG Open 2011

In some ways, SVG is simple: paths, shapes, gradients, etc. can be described by anyone with the slightest grasp of the Cartesian coordinate system, programmer or no. Just send minimal markup to the browser, and the browser will take care of the rest.

In fact, the SVG specification makes a point of how little markup is required to render an image. Each path instruction is just one letter long ('m' for move, 'l' for length, etc.), including precise details, like 'rx' for 'the x-radius of the ellipse used to round off the corners of the rectangle'.

Precisely this brevity and relative lack of abstraction, however, makes real-world SVG applications a bit tedious at times. The spec serves as a great reference, but reads even more like a dictionary than the average specification.

Especially for such a 'simple' markup language, then -- as for natural languages that lack the Turing-completeness of the lambda calculus (pdf), or the logical sophistication of Lojban -- real-world applications are far more useful than definitions. You don't need to learn what words mean; you need to learn how people use them.

And just as the English speaker can speak better English by reading great English books, so also the SVG creator can create better SVG by watching what the best SVG creators are doing.

So it might pay off if you pay attention to what Inkscape, one of the most popular (and ambitious) open-source vector graphics editors, is doing. Of course, Inkscape is a tool for making SVG graphics, not an SVG graphic itself; but Inkscape's major goal is making SVG creation faster and easier -- and the presentation itself is one of Inkscape's creations.

Recently, at the SVG Open 2011 conference, Inkscape's Tavmjong Bah gave a pretty detailed presentation on the history, features, and future of Inkscape, along with some info on popular and particularly useful extensions.

If you're relatively new to SVG, then you'll find it helpful just to browse the presentation.

If you basically know how SVG works, but want to read through some really strong SVG, generated by Inkscape itself, then view the source. It's (lots of) SVG, with JavaScript to advance the slides.

For example, here's a cool (slightly simplified) matrix transform of a path with a gradient fill (previously defined):

<path d="m 113,203.5 c 0,0 3.34046,5.10071 3,7.5 -0.66817,4.70868 -10.80945,7.05842 -8.5625,11.25 2.21991,4.14114 10.22139,1.79405 16.9375,6.125 6.6875,4.3125 4.88949,13.10149 9.75,15.3125 9.47925,4.31205 34.375,-7.4375 33.125,-7.1875 -1.25,0.25 -24.57014,5.09545 -29.82014,0.84545 -5.98592,-4.84575 -7.70217,-8.23028 -12.11736,-11.09545 -4.13751,-2.68498 -9.94967,-3.78036 -11.30246,-5.97865 -1.35279,-2.19829 2.7092,-5.03469 2.98996,-9.27135 0.16862,-2.54442 -4,-7.5 -4,-7.5 z"
         transform="matrix(0.5296484,0,0,0.5296484,-11.722258,-13.864159)"
         id="path8566"
         style="opacity:0.21674876;fill:url(#radialGradient9177-1);fill-opacity:1;fill-rule:evenodd;stroke:none" />

Which, I confess, I haven't done myself in SVG (at least not all at once!).

If you have a few SVG minutes to spare, then view the presentation here.