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!
