Cameron Laird's personal notes on SVG

This page is mostly about my interests in standardized Scalable Vector Graphics. I invite those looking for a "What is SVG?" treatment to start with the pertinent Wikipedia page. What it lacks in working code it compensates for with a plethora of references. Roughly comparable: introductory pages from Adobe and the w3schools.

The only active public Wiki I know for SVG is the Interest Group one. I'm an "Invited Expert" to the Group.

Is SVG part of HTML5, or distinct from it? 'Depends--on whether you're focused on standards, browsers, marketing, personalities, ... In any case, most folks working in one area will want to keep track of the other.

SVG Working Group Blog

The W3C subtitles its main jump page for SVG, "XML Graphics for the Web".

I like to write about SVG for Smart Development, including such pieces as:

I've also written such less-superficial pieces as

Questions often arise about how to communicate between embedded SVG instances; in particular, how can one programmatically re-use the visual elements of an SVG design, but update their behavior? That's a principal subject of the "Create client-side ..." article above. A wider range of communication techniques appears in this highly-simplified model. David Dailey writes about the subject more generally in his Primer.

Another use Phaseit makes of SVG appears in our experimental software-engineering repository bubble charts. Here, SVG is an efficient, light-weight graphical format that's easy to program and provides for convenient tool-tips and hyperlinks.

[Explain examples page ...]

[Tavmjong Bah's blog]

I have a separate page for Inkscape.


The Primer is paramount. Also, as one correspondent writes, An SVG Primer for Today's Browsers is "... invaluable ... highly useful, comprehensive and in-depth ..."

I haven't yet read Francis Hemsher's SVG Companion eBook, although his description of it seems to emphasize the sort of programming we do at Phaseit.


Other SVG-related articles

Daniel Schneider has a tutorial on flow of HTML around SVG-defined images.

The "technical graphics" in 2003's "Applicability of CGM versus SVG for technical graphics" generally means "stringently high-quality aircraft industry graphics for design and manufacturing".

SMIL animation can substitute for Flash.

Stackoverflow (!) has pertinent remarks on SVG vs. Canvas; even more, the links found there are valuable, as is this MSDN writeup, "How to Choose Between Canvas and SVG to Create Web Graphics", as well as a later MSDN entry, "Thoughts on when to use Canvas and SVG".

A Product Manager at Opera provides good insight into management of bounding boxes.

Cameron Laird's personal notes on SVG/