08 February 2011

Scalable Vector Graphics

For the past few weeks I've been busy with an online course in Scalable Vector Graphics (SVG) given by the World Wide Web Consortium (W3C). It's the first formal course I've followed since 2004 when I returned to CMM in Amsterdam (where I'd studied for my multimedia engineer diploma) for a follow-up course in DVD authoring.

I'm having great fun and would recommend this SVG course to anyone experienced in programming for the web. The course work is well structured and Professor David Dailey gives encouraging feedback on submitted homework. In short, the online experience is a real joy.

Emerging Language


SVG is an emerging XML-based language which is already well supported by most browsers, although Microsoft are still playing catch-up and are promising limited support for SVG with Internet Explorer (IE) 9. Current IE users can still enjoy SVG graphics and animations by installing the Adobe SVG Viewer (ASV), which is a wee plug-in for IE, and despite the fact that it's no longer supported by Adobe, it still works.

SVG Examples


Op Art squares - PNG8 - 5.055 kB
The image above is an embedded PNG (portable network graphics) file made in Photoshop from an SVG file I made during the course. It is 5.055 kB in size, which is rather small and therefore a quick download, but compared to the SVG source file, which weighs in at 1,337 bytes (just over a kilobyte=1024 bytes), this embedded bitmap image is about 5 times too big!

What is more, the image above will break up when magnified in your browser, but the tiny SVG source file will allow magnification without distortion as it is a vector graphics file. If you are using Safari, Opera, Chrome, Firefox, or IE+ASV, point your browser at the hand-coded SVG file (opens in a new browser window): Op Art 2 - squares

And here's another PNG I made from a file I originally coded in SVG.

Op Art circles - PNG8 - 49.42 kB
As this image is more complex than the first, it comes as no surprise that its embedded PNG file is rather large (49.42 kB) in comparison. The SVG source file, however, which includes animation (for all but Firefox), is only 3,346 bytes (just over 3 kB)!

My SVG course continues for another couple of weeks during which we'll be getting more into JavaScript/SMIL animation. For part of this time I'm hoping to follow the course from a laptop in Holland, which highlights the great advantage in following such a course online.

No comments:

Post a Comment