Quite by accident this morning I stumbled across an image format that might turn out to be really cool. Unfortunately, like all things Internet, it’s not much use until the various browsers agree on how it should work. Just for giggles, I thought I’d play around with it a bit. Internet Explorer users — even IE 8 — need not continue with this episode.
One of the cool things about SVG is that it’s more a drawing system than an image format. Image files contain a set of instructions the computer uses to render the picture. That’s not especially new, but it’s nice to have a standard system built into browsers. With something like this I can write code on the server to generate very sophisticated and pretty graphs, without a lot of technical hoo-ha. It would be especially nice for some of the images used in the basic design of this site.
So here is an svg image, plopped into the page the way any image would be:
Alas, only those using Opera and Safari will see it. (PLEASE correct me if I’m wrong!) Alternately, here’s the contents of that same image file, plopped into the regular XHTML of this site in a big ol’ svg tag:
You can look at the source for the page and there it will be, all the drawing instructions used to render this happy little face. (Note that I removed some extraneous parts that connected to the source of the graphic (sodipodi) to see if I could make the image work.)
Except… hmm. The latter doesn’t work at all anywhere (that I know of). Obviously I’m missing something, but at this point it’s not worth figuring out. I did try to paste in an example directly from Mozilla’s site; maybe WordPress is subtly messing up the data. Or something else. If SVG ever becomes more universal, I’ll revisit it.
Edited to add: it looks like the browser has to load a file with an xhtml extension to know how to deal with other xml embedded in the code like that. Unfortunately, if your tell the browser that you are using xhtml, you have to use it exactly correctly. Alas, several of the plugins, and amazon, and Google, provide code that is not strictly compliant, and I shudder to think what would happen if I tried to validate all those old episodes I brought over from iBlog. Firefox can also use the <embed> tag to display the graphic, but ironically it is not compliant.
Let’s try the <object> tag and see if Firefox has relented and begun to support it:
Just for grins I specified a different size, to show the S in SVG. Safari didn’t do it right, but my version of Firefox and Opera did.
Note: The original graphic is under GPL and I got it from here.
Note 2: Since this episode, I’ve done some pretty extensive work with SVG, including using scripts to modify the image — even changing the actual structure of the image interactively. Try the dots!
On Firefox 3.5.3, the first just shows up as the words “Emblem-fun”. The second one doesn’t show up at all. The third one is very pretty, but when the duck flies over it, it leaves a copy of the duck in front of the smiley face for a couple of seconds.
Oooh, actually, the duck leaves a ghost of himself when he’s flying from left to right; when he’s going the other way, he flies behind the smiley face.
UM, okay, now the sidebar is full of gibberish, consisting of the top edge of a section header, followed by “WordPress Database Error: [My SQL server has gone away]”, followed by a bunch of code, and repeating.
I’m reminded of the old lyrics, “My Massa’s gone away …”
The sidebar looks all right from the comment page, but it still isn’t right when I return to the main page.
The sidebar came through all right in Safari 3.2.2, and I see there’s a new post up. The poll and MOH corner aren’t highlighted in pink, although you may have turned that off.
I see the first smiley, still nothing in the space where the second should be, and the third smiley is the same size as the first, rather than the much bigger one that I saw in Firefox, but it is rendered in slightly more subtle colors than the first.
I have not been lucky enough to have the duck cross the smiley to see what happens in Safari.
The database error probably occurred when I was uploading a minor edit to the latest episode; when I save the system does some pretty expensive queries to update the “similar posts” feature (which is new) – all other posts are affected, so it can chew some server cycles.
When you went back, the error information was probably in your cache, and the browser chose not to reload it (the browser doesn’t know for errors). Naturally, your other browser got a nice, fresh version of the page.
Back on Firefox, reloaded the page, new post showed up, pink background is gone. Probably just a matter of timing that I was loading the page at exactly the time that you were updating it.
I see two smiley faces, the bottom one being much bigger. Have not noticed the duck’s effects on the faces, but the duck and Shatner seem to be working.
Now, you need a Ninja and Darth Vader…oohhh…a Ninja Darth Vader!
pL
Well, Mister Boo is supposed to be a Ninja ghost, although I haven’t seen him yet.
As of yesterday, I have been seeing Mister Boo, although I haven’t had the luck to see what happens when he crosses the smiley.