Graphics/CSS JavaScript SVG

Cross-browser JavaScript vector graphics library

Speaking of SVG, Lachlan Hardy pointed out the Raphaël JavaScript library to me, and I wanted to pass it along.

This library provides cross-browser dynamic vector graphics that generates VML for IE, and SVG for the rest of the world. Among the graphical elements you can create are paths, eclipses, rectangles, circles, and text, and be able to apply a number of transformations.

Included in the library web site is a playground where you can try the code out.


Vector Magic: The tech that could, the company that could not

Vector Magic originated as a free online service hosted at Stanford University. You could upload a raster image, such as clip art or a photo, and use the service to generate a vector-based image. You could then export the image in a format such as SVG.

The service was simple to use and did an excellent job, especially if you’re not experienced with using tools like Adobe Illustrator or Inkscape’s Trace functionality.

The developers behind Vector Magic split their software off from Stanford, creating a company named Vector Magic and began to offer the web services for a price. Unfortunately, the price was high: to download a vectorized image would cost about $2.50 American, which ended up being too steep for most folks.

The company then came out with a monthly “all you can download” subscription service, costing $7.95 a month. That’s not a bad price for the service. However, the company also demands that you maintain a credit card on file, which is something I’ve never been comfortable with. Again, a case of good technology but not the best business practices.

I looked forward to the long awaited Desktop tool, where I could create as many vectorized images I wanted without having to pay $2.50 per vectorized download, or tie into a monthly subscription service that wants to keep my credit card on file.

Vector Magic just announced the release of their first desktop product, this one for the PC. The Mac version will following in a couple of months. This is a production release—if there was a beta release, it wasn’t public. I tried the application and it is very efficient, and does a terrific job at converting raster images into vectors. For one license you can also run the application on two machines, though you have to activate the license on each machine over the internet. If something happens to one machine, an email to the company should be enough to open the license for install on another machine. Should be enough, as there is no formal deactivation process, like you would have with Photoshop.

However, the cost of the application is $295.00. This is more money than I’m willing to pay for a tool just to make a vector conversion of an occasional raster image. I’m not one to begrudge people making money off their work and products, but I’ve been effectively priced out of Vector Magic’s market. It’s time for me to return to an open source tool like Inkscape and regretfully leave Vector Magic for those whose use of the product either justifies the cost, or who have deeper pockets than mine.

Vector Magic desktop tool

Graphics/CSS Photography

Picnik your Flickr

How many misspellings does it take to make a successful mashup?

Elaine posted a note about Flickr adding edit capability via Picnik. I immediately tried it out, as the following screenshots demonstrate:

[images lost]

Just as with the stand alone version of Picnik, some of the functionality is free, others are part of a premium package: $24.95 per year.

Picnik is one of the few online photo editors I did include in the book, primarily because it’s one of the better organized, and has some of the most interesting effects. One aspect I like most about it is the sliding scale tool, which provides live scaling of the image.

Picnik uses Flash, like all of the online photo editors do. Flash isn’t a requirement, though. Most of the functionality, and then some, that Picnik can do can be done with something that most people already have installed at their linux-based hosting site: ImageMagick.

To use the ImageMagick, you do need to have command line access through SSH. ImageMagick can also be installed on the Mac using Macports, and accessed via the Terminal application. Once installed, the following command:

convert purpledragon_thumb.jpg -bordercolor white \ -background DarkGray -polaroid 5 purplepolaroid.png

Creates the following effect.

Purple dragonfly polaroid

Or, you can use Picnik with the premium package.

Graphics/CSS SVG

Experiments: SVG Clock

I thought I would go into some detail on some of the experiments I’ve been trying out on the site, starting with the SVG clock in the sidebar.

A major advantage of SVG is that you can actually see how something is created. Try that with a Flash file.

The SVG clock in the sidebar is an adaption of a very simple SVG clock created by Jason Davis. I modified it by creating specific second tick actions, and then altering the appearance. I also added code so that it would reflect my time, not yours. I figured you had your computer clock and didn’t need me repeating it.

The clock is LGPL so you can copy the SVG file directly into your own space, set the width of the container, and even alter the coloring if you wish. I’m using linear gradients to create a clock highlight, interior shadow, and silvery frame. I also added a Gaussian blur as shadow, but this only shows up in Firefox 3, Opera, and Safari.

The function to change to your time zone is:

setInterval("setClock(calcTime(-6))", 1000);

The value to change is “-6”, which states that my timezone is currently 6 hours behind GMT.

It’s just a frill, true, but after seeing some of the crap I’ve seen in sidebars, you could do worse. It takes up less CPU than most animated ads, and requires no external load times. From a browser performance perspective, Safari requires less CPU to run the clock than Firefox or Opera. If you load the clock directly, it will be quite large, but will also eat up considerable CPU. Leave it up for a while and I guarantee your computer’s fan will come on.

Is the clock worth the extra burden on the client’s machine? Yes, and no. As a demonstration of what you can do with SVG and simple animation, I think it’s a valuable tool. There is a Catch 22 about SVG: we don’t use SVG because browser support is incomplete or inefficient; effort to better incorporate SVG is of secondary importance because SVG is little used. The only way to break this cycle is to actually start using the specification, and pushing a bit at the edges while we go about it.

As for the contents of the clock, how much do your web page readers really care about what time is it where you’re at? I would have thought probably not a whole lot, but I find that I’m not particularly good at understanding what particular bits of minutia interest people. I’m told people want to know you bought chewing gum–the brand, the flavor, the date and time when purchased. What time it is where you live must seem monstrously important in comparison.

Graphics/CSS Programming Languages

Experiments in Color

I’ve written about this previously, but worth repeating. CSS can be dynamically created using a PHP application, as long as the content type is set to CSS:

<?php // declare the output of the file as CSS header('Content-type: text/css'); ?>

The style sheet can then be used directly or imported into another:

@import "photographs.php"; I use this feature to randomly assign a background image for my header and also to access the color of select pixels in the image in order to colorize the theme based on image. I based the points on the photographer’s “rule of thirds”, which puts the focus on the photo along an imaginary line, either along the top or bottom horizontal third, or the left or right horizontal third. I also pick a pixel directly in the middle of the image. I could test all pixels and find the most common colors used, but the amount of processing is prohibitive. I’ve haven’t seen this algorithm fail when it comes to creating a compatible color set, yet.
fishie.jpeg (JPEG Image, 818x195 pixels)

I use the built-in graphical GD functions in PHP to pick the color points, as well as find the size of my background image, and adjust the header accordingly. I could also have used IMagick, the PHP-based wrapper for ImageMagick, but GD is almost universally available on web hosts, while IMagick is not.

// create a working image 
$im = imagecreatefromjpeg($imgname);

// get image height and width
$height = imagesy($im);
$width = imagesx($im);

// sample five points in the image, based on rule of thirds and center
$rgb = array();

$topx = round($height / 3);
$bottomx = round(($height / 3) * 2);
$lefty = round($width / 3);
$righty = round(($width / 4) * 2);
$centerx = round($height / 2);
$centery = round($width / 2);

$rgb[1] = imagecolorat($im, $topx,$lefty);
$rgb[2] = imagecolorat($im, $topx, $righty);
$rgb[3] = imagecolorat($im, $bottomx, $lefty);
$rgb[4] = imagecolorat($im, $bottomx, $righty);
$rgb[5] = imagecolorat($im, $centerx, $centery);

// extract each value for r, g, b
$r = array();
$g = array();
$b = array();

$ct = 0; $val = 5000;
// process points
for ($i = 1; $i <= 5; $i++) {
   $r[$i] = ($rgb[$i] >> 16) & 0xFF;
   $g[$i] = ($rgb[$i] >> 8) & 0xFF;
   $b[$i] = $rgb[$i] & 0xFF;

   // find darkest color
   $tmp = $r[$i] + $g[$i] + $b[$i];
   if ($tmp < $val) {
       $val = $tmp;
       $ct = $i;


   printf(".color1 { fill: rgb($r[1],$g[1],$b[1]); stroke: rgb($r[4],$g[4],$b[4]); }\n");
   printf(".color2 { fill: rgb($r[2],$g[2],$b[2]); stroke: rgb($r[3],$g[3],$b[3]); }\n");
   printf(".color3 { fill: rgb($r[3],$g[3],$b[3]); stroke: rgb($r[2],$g[2],$b[2]); }\n");
   printf(".color4 { fill: rgb($r[4],$g[4],$b[4]); stroke: rgb($r[1],$g[1],$b[1]); }\n");
   printf(".color5 { fill: rgb($r[5],$g[5],$b[5]); }\n");

   printf("stop.begin { stop-color: rgb($r[1],$g[1],$b[1]); }\n");
   printf("stop.middle   { stop-color: rgb($r[5],$g[5],$b[5]); }\n");
   printf("stop.end { stop-color: rgb($r[4],$g[4],$b[4]); }\n");
   printf(".nameExpanded, .nameCollapsed { background-color: rgb($r[4],$g[4],$b[4]); } \n");
   printf(".column-post h2, .column-post h2 a, .firstpost, 
                .firstpost a { color: rgb($r[$ct],$g[$ct],$b[$ct]); } \n");

To ensure that the title and title bars contrast strongly enough to be viewable, I test the selected colors for the ‘darkest’, ie the less saturated of colors. Adding up the RGB separate values does the trick: a value of RGB(0,0,0) totals to 0, while one for RGB(255,255,255) totals to 765. Everything else falls in between.

Again, the reason for doing this type of adjustment is not only to add an interesting, and changing element, to the site interface, but also to demonstrate what can be done with both images and CSS. Neither is static, and none of the modifications requires scripting on the client, and many of the modifications aren’t impacted by browser type.

For more details on the processing, access the viewable copy of the PHP program.