SVG is a good scratchpad for programmers

Along with all its enterprise-class uses, SVG is nimble enough for little projects

Public discussion of SVG is usually solemn, and focused on big questions that make adults frown: "Will Apple's rejection of Flash result in combat over patents where Linux suffers collateral damage while ... ?", "Does IE 5 support SVG adequately to allow for the next generation of applications to support management of corporate expense accounts?", and that sort of thing. Lost in those sorts of conversation is how useful and fun SVG is!

If you're currently using a modern browser other than Internet Explorer, you can see a few examples for yourself. Immediately below, for instance, is a clever "carousel" animation by bruce rindahl. Of course, there are plenty of other ways to put the same pixels on the screen, with an animated
, or Flash, or JavaScript, or CSS transforms, or applets, or browser-specific plug-ins. Each of them has advantages, of course. From a developer's perspective, SVG nicely balances programmability, compactness, and a declarative approach. You can see for yourself how readable Mr. rindahl's implementation is.

An aspect of SVG that particularly deserves programmers' attention is its use as what I call a "scratchpad". When I do ad hoc financial calculations, I generally open a Python interactive session. I could use a dedicated calculator, and I recognize many people favor a spreadsheet as a model; for me, an open interpreter is as fast as a dedicated hardware calculator, and it's handy that Python (or R or Lua or Tcl or Octave or Sage or ...) conveniently binds intermediate results such as "monthly fixed expenses" to named variables.

SVG plays an analogous role for me. Suppose, for example, that I need to graph data. There is an abundance of software already available to create graphs, of course, including spreadsheets, Graphviz, R and gnuplot. In a world where browsers are always available, though, a few lines of SVG can feel like a particularly light-weight way to achieve the same. Keep in mind that SVG is an XML application, so it's always possible to use XSLT or other XML tools on instances. Nearly all current SVG implementations support Unicode, JavaScript and CSS interpretation, moreover, so textual decoration of the graphs I create is powerful.

Among articles focused on SVG graphing are "Render dynamic graphs in SVG" and "SVG::Graph". The latter has graphics such as this, originally expressed as just 70 lines of SVG.


Along with charts-and-graphs, computer-aided design (CAD) is a welcoming playground for SVG. When I'm laying out two-dimensional geometric design of a garden, closet, or mechanical construction, sometimes it's quicker to achieve what I have in mind with SVG than with a dedicated CAD application.

Later in the month, "Smart Development" will return to the news of SVG: how Firefox exploits hardware to accelerate rendering, which rendering engines support which animation constructs, and so on; for today, I'm simply enjoying how much of what I want for my own visual experiments a few lines of SVG give me.

ITWorld DealPost: The best in tech deals and discounts.
Shop Tech Products at Amazon