15 February 2011

Misadventures with old laptops

I borrowed my wife Genie's PowerBook G4 laptop for the duration of my current stay in Holland. I wanted to keep up with the SVG course I'm following online, and expected at least one article to come in that would need approval for publishing on our community website BAD info. The PowerBook is lightweight (15" screen) and I knew I'd be able to get online easily enough, so before I set off I loaded it with all the apps and working files I was likely to need...

This morning I connected Genie's laptop to a friend's network in Bussum and logged on to the W3C Courses site to check my homework for the week. Then I realised Genie hadn't installed Opera. Opera seems to offer the best browser support for SVG at the moment and I figured I'd better download it. But Opera no longer supports OSX 10.4 or pre-Intel machines. So I tried Chrome: Intel only, OSX 10.5 or later. I was able to upgrade to the latest version of Firefox but then got the message that I'd need to upgrade the Flash plug-in for security purposes. And then I found out that Adobe are no longer supporting the Flash plug-in for this machine. Ouch!

Tomorrow I'll try the PC route – there's a recent machine running Windows 7 upstairs. I'll download the ASV plug-in for Internet Explorer (for which Adobe has offered no support for years) and hope that it runs as well as it does on my Dell laptop at home. But I'm well outside my comfort zone here, and am starting to miss my 8-core Mac Pro.

Anyway, I'll leave you with something I made earlier. Genie likes this one, so I thought I'd put it online. For Genie.

The PNG file embedded above is 29.16 kB, but its source file (SVG) is less than 3 kB.

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.