About these examples

SVG, short for "Scalable Vector Graphics", is an XML markup language designed for bringing 2D artwork and drawings to the Web and other places. As well as vector graphics (lines, circles, paths, etc.) SVG supports text, images, animation, scripting, colors, gradients, filter effects and many other things. It is a very rich (declarative) graphics language which can be just as easily hand coded or machine generated.

Back in 1998/9 and the years following I became very active in the SVG community. As far as I know, I was the author of the first known SVG rendering engine back then which I wrote in Java using the new (at the time) Java 2D API. I was also a very active member of the SVG Working group at W3C that produced the SVG 1.0 Specification. Over the years I have compiled a large collection of my own SVG test cases and examples and used them in lectures about SVG at various conferences around the World. The recent adoption of SVG by the major Web browsers, both on traditional desktop computers and on mobile devices, as well as many people asking me about my examples has prompted me to collect all of my material into one place.If you ever attended one of my talks on SVG over the years you may already have some of these but this is the first time I have tried to collect everything into one place.

These examples are not meant to be works of art, I would by no means claim to be an artist. I view them more as a learning aid. You will find most of the major SVG features used somewhere in these files. If you are interested in learning a bit more about the power and ease of use of SVG, I encourage you to look at the source for the files as well as the "artwork" as some pictures may look the same but might have been created using different SVG techniques behind the scenes!

With a few exceptions, all of the examples were either hand coded (by me) or produced using Ruby scripts that I wrote to generate SVG output. One or two of the examples were produced using Inkscape.

Anyway, I hope that this material is of interest and useful. I certainly had fun walking down memory lane while putting it together.


Kelvin R. Lawrence
April 2nd 2013